美文网首页
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 点击全屏查看图片

    项目中显示后台下发的缩略图,点击缩略图放大全屏查看,现在是直接放大图片,当然你也可以使用在分页的UIScrollV...

  • [前端]插件库

    图片全屏查看

  • jquery实现点击图片全屏查看功能

    怎么现在每次写代码都是用的别人的轮子,呜呜 jquery实现点击图片全屏查看功能 js代码 css代码

  • 插件

    动态可视化库vis.jsCSS浏览器兼容性处理:autoprefixer点击全屏查看图片

  • 卧槽,原来我买了一辆豪车

    《点击图片查看详情》 《点击图片查看详情》 《点击图片查看详情》 《点击图片查看详情》 你为什么会买车? 毕业后的...

  • 图片预览+旋转控件

    功能 点击图片后,弹出预览窗口; 可在预览窗口中查看前一张、后一张 工具栏包括“全屏查看、放大、缩小、旋转、保存旋...

  • vue用click产生了点击穿透事件

    项目里面,点击图片,然后调用一个组件。让图片全屏展示,然后点击全屏,组件消失。按理说我没有tap.不会存在点击穿透...

  • iOS 中实现图片点击全屏预览

    点击单张图片的全屏预览和双指捏合缩小放大

  • h5 video 横屏播放

    在android ios 手机上 点击 全屏 按钮 只能竖屏的 尝试 横屏播放点击全屏 按钮 不能横屏 是 因为 ...

  • Python用于NLP :处理文本和PDF文件

    提示:代码图片可以点击全屏查看,双指操作还可以放大缩小。 这是我的Python用于自然语言处理(NLP)系列文章的...

网友评论

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

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