照片墙

目的:用户通过点击照片墙的任意一张图片,可查看其大图。并且通过左滑右滑切换到另一张图片。

创建根视图控制器

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];
}

完整项目

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值