美文网首页
iOS 点击全屏查看图片

iOS 点击全屏查看图片

作者: coco_CC | 来源:发表于2018-10-20 18:42 被阅读13次

    项目中显示后台下发的缩略图,点击缩略图放大全屏查看,现在是直接放大图片,当然你也可以使用在分页的UIScrollView上添加图片来进行展示。

    • 步骤分为三步

    1.创建UIImageView
    注:采用EGOImageView是因为加载的是url,直接引用的三方库:
    pod 'EGOImageLoading', '~> 0.0.1'

        //初始化要显示的图片内容的imageView(这里位置是使用当前屏幕的 宽和高宏定义)
        EGOImageView *imgView = [[EGOImageView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];
    //图片背景色设置成黑色(必须)
        imgView.backgroundColor = [UIColor blackColor];
        //要显示的图片,即要放大的图片(放大图片的填充方式)
        [imgView setContentMode:UIViewContentModeScaleAspectFit];
        [imgView setImageURL:[NSURL URLWithString:imgArray[sender.tag]]];
        imgView.userInteractionEnabled = YES;
    

    2.以动画方式添加到window上

        UIWindow * window = [UIApplication sharedApplication].keyWindow;
        [window addSubview:imgView];
        [self shakeToShow:imgView];
    
    
    //放大过程中出现的缓慢动画
    - (void) shakeToShow:(UIView*)aView{
        CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
        animation.duration = 0.2;
        NSMutableArray *values = [NSMutableArray array];
        [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)]];
        [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
        animation.values = values;
        [aView.layer addAnimation:animation forKey:nil];
    }
    

    3.在UIImageView上添加手势,点击取消显示当前图片

    //添加点击手势(即点击图片后退出全屏)
        UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(closeView:)];
        [imgView addGestureRecognizer:tapGesture];
    
    
    - (void)closeView:(UITapGestureRecognizer *)tap {
        
        [tap.view removeFromSuperview];
    }
    

    相关文章

      网友评论

          本文标题:iOS 点击全屏查看图片

          本文链接:https://www.haomeiwen.com/subject/jjumzftx.html