目的:用户通过点击照片墙的任意一张图片,可查看其大图。并且通过左滑右滑切换到另一张图片。
创建根视图控制器
在 AppDelegate.m
文件中创建导航控制器作为根视图控制器:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:[[VCRoot alloc] init]];
self.window.rootViewController = nav;
[self.window makeKeyAndVisible];
return YES;
}
创建照片墙
在 VCRoot.m
文件中创建照片墙:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.title = @"照片墙";
//使导航栏不透明
//如果透明的话,那么查看时图片就会网导航栏上移一点
self.navigationController.navigationBar.translucent = NO;
UIScrollView* sv = [[UIScrollView alloc] init];
sv.frame = CGRectMake(10, 10, 375, 667);
//设置画布大小
sv.contentSize = CGSizeMake(375, 667*1.2);
//打开交互事件
sv.userInteractionEnabled = YES;
for(int i = 0 ; i < 15 ; i++){
NSString* strName = [NSString stringWithFormat:@"%d.jpg",i+1];
UIImage* image = [UIImage imageNamed:strName];
UIImageView* iView = [[UIImageView alloc] initWithImage:image];
iView.frame = CGRectMake((i%3)*375.0/3, (i/3)*140, 375.0/3-15, 130);
[sv addSubview:iView];
//开启交互事件
iView.userInteractionEnabled = YES;
//创建点击手势
UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(pressTap:)];
//单个手指
tap.numberOfTouchesRequired = 1;
//单次点击
tap.numberOfTapsRequired = 1;
[iView addGestureRecognizer:tap];
//图像对象的 tag 值
iView.tag = 101 + i;
}
//不现实纵向滚动条
sv.showsVerticalScrollIndicator = NO;
[self.view addSubview:sv];
self.view.backgroundColor = [UIColor whiteColor];
}
实现点击图片放大的事件函数
- (void)pressTap:(UITapGestureRecognizer*) tap
{
UIImageView* imageView = (UIImageView*) tap.view;
VCImageShow* imageShow = [[VCImageShow alloc] init];
NSLog(@"当前图片的tag:%lu",imageView.tag);
imageShow.imageTag = imageView.tag;
[self.navigationController pushViewController:imageShow animated:YES];
}
向已经放大显示的图片添加滑动手势
在 VCImageShow.m
文件中创建左滑、右滑手势:
//创建一个左滑手势
UISwipeGestureRecognizer* leftSwipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(pressTapShowNext:)];
leftSwipe.direction = UISwipeGestureRecognizerDirectionLeft;
[_imageView addGestureRecognizer:leftSwipe];
//创建一个右滑手势
UISwipeGestureRecognizer* rightSwipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(pressTapShowNext:)];
rightSwipe.direction = UISwipeGestureRecognizerDirectionRight;
[_imageView addGestureRecognizer:rightSwipe];
实现图片的左右滑切换
- (void)pressTapShowNext:(UISwipeGestureRecognizer*) swipe
{
if(swipe.direction == UISwipeGestureRecognizerDirectionLeft){
UIImageView* iView = (UIImageView*) swipe.view;
VCImageShowNext* next = [[VCImageShowNext alloc] init];
NSLog(@"当前图片的tag:%lu",iView.tag);
next.imageTag = iView.tag + 1; //iView.tag 也可以用 _imageTag 来代替
[self.navigationController pushViewController:next animated:YES];
}
if(swipe.direction == UISwipeGestureRecognizerDirectionRight)
[self.navigationController popViewControllerAnimated:YES];
}