美文网首页iOS即时通讯IOS收藏Object-C
iOS开发笔记:实现点击图片放大全屏(可设置放大后的背景透明度)

iOS开发笔记:实现点击图片放大全屏(可设置放大后的背景透明度)

作者: degulade | 来源:发表于2016-03-01 02:12 被阅读13581次

    刚转行iOS的搬砖工人,在此记录下这条路上的点点滴滴,共勉

    • 最近遇到这个问题,单击图片—>让图片全屏,再次单击—>恢复原图。

    使用方法:
    调用.h文件中的scanBigImageWithImageView:(UIImageView *)currentImageview alpha:(CGFloat)alpha方法即可:

    下载地址:https://github.com/ShadowBryan/ImageMagnification

    全屏/返回.gif

    PS:一口气补完了《一拳超人》,好困,现在已经是凌晨两点,明天还要早起上班,所以稍稍偷下懒,直接上代码

    完整代码如下:

    ZJImageMagnification.m

    //
    //  ZJImageMagnification.m
    //
    //  Created by degulade on 2017/4/21.
    //  Copyright © 2017年 degulade. All rights reserved.
    /*图片放大*/
    
    #import "ZJImageMagnification.h"
    
    @implementation ZJImageMagnification
    //原始尺寸
    static CGRect oldframe;
    
    /**
     *  浏览大图
     *
     *  @param currentImageview 当前图片
     *  @param alpha            背景透明度
     */
    +(void)scanBigImageWithImageView:(UIImageView *)currentImageview alpha:(CGFloat)alpha {
        
        //  当前imageview的图片
        UIImage *image = currentImageview.image;
        //  当前视图
        UIWindow *window = [UIApplication sharedApplication].keyWindow;
        //  背景
        UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
        //  当前imageview的原始尺寸->将像素currentImageview.bounds由currentImageview.bounds所在视图转换到目标视图window中,返回在目标视图window中的像素值
        oldframe = [currentImageview convertRect:currentImageview.bounds toView:window];
        [backgroundView setBackgroundColor:[UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:alpha]];
        
        //  此时视图不会显示
        [backgroundView setAlpha:0];
        //  将所展示的imageView重新绘制在Window中
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:oldframe];
        [imageView setImage:image];
        imageView.contentMode =UIViewContentModeScaleAspectFit;
        [imageView setTag:1024];
        [backgroundView addSubview:imageView];
        //  将原始视图添加到背景视图中
        [window addSubview:backgroundView];
        
        
        //  添加点击事件同样是类方法 -> 作用是再次点击回到初始大小
        UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
        [backgroundView addGestureRecognizer:tapGestureRecognizer];
        
        //  动画放大所展示的ImageView
        [UIView animateWithDuration:0.4 animations:^{
            CGFloat y,width,height;
            y = ([UIScreen mainScreen].bounds.size.height - image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width) * 0.5;
            //宽度为屏幕宽度
            width = [UIScreen mainScreen].bounds.size.width;
            //高度 根据图片宽高比设置
            height = image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width;
            [imageView setFrame:CGRectMake(0, y, width, height)];
            //重要! 将视图显示出来
            [backgroundView setAlpha:1];
        } completion:^(BOOL finished) {
            
        }];
        
    }
    
    /**
     *  恢复imageView原始尺寸
     *
     *  @param tap 点击事件
     */
    +(void)hideImageView:(UITapGestureRecognizer *)tap{
        
        UIView *backgroundView = tap.view;
        //  原始imageview
        UIImageView *imageView = [tap.view viewWithTag:1024];
        //  恢复
        [UIView animateWithDuration:0.4 animations:^{
            [imageView setFrame:oldframe];
            [backgroundView setAlpha:0];
        } completion:^(BOOL finished) {
            //完成后操作->将背景视图删掉
            [backgroundView removeFromSuperview];
        }];
    }
    
    @end
    

    ZJImageMagnification.h

    //
    //  ZJImageMagnification.h
    //
    //  Created by degulade on 2017/4/21.
    //  Copyright © 2017年 degulade. All rights reserved.
    //
    
    #import <Foundation/Foundation.h>
    
    @interface ZJImageMagnification : NSObject
    
    /**
     *  浏览大图
     *
     *  @param currentImageview 当前图片
     *  @param alpha            背景透明度
     */
    +(void)scanBigImageWithImageView:(UIImageView *)currentImageview alpha:(CGFloat)alpha;
    
    @end
    
    

    相关文章

      网友评论

      • 陈藩:如果我的cell中加载九张这样的图片,使用大图会很慢,使用小图时,点击放大会模糊,所以我做的是小图时加载小的图片,放大时加载大的图片,但是体验效果还是不很好,请问改怎么改善呢
      • Corbin___:为什么是convertRect:currentImageview.bounds
        不是convertRect:currentImageview.frame
      • 锦箫_1:您好,麻烦问一下,点击放大后还想通过捏合手势再进行放大,这个怎么弄呢,还麻烦您回复
      • 郑明明:我改写了一下你的返回动画,我重新添加了一组关键帧,但是出现了关键帧累计的效果,我不知道怎么改了,所以使用了透明度变化的消失动画
      • 郑明明:有的
      • 郑明明:你看主流的效果都是有点哦
      • 郑明明:如果点击屏幕退出也有动画的话就太好了
      • 郑明明:真心简书上面干货多
        郑明明:@NtZheng 发现了一个更好,逻辑更清楚的一个实现思路
        郑明明:@degulade 前些天我又自己琢磨了一下
        degulade:@NtZheng 加油!我也是刚入门的菜鸟!
      • 郑明明:我也正是要写这个效果呢
      • 郑明明:学习了
      • 郑明明:不错哟
      • 郑明明:还可以哟
        degulade:@NtZheng 谢谢!
      • Zz丶mika:请问我要在放大状态下保存图片到相册怎么做?
        degulade:@Zz丶mika 最简单的方法,手机截屏。。。
      • feng_dev:其实最简单的是 添加 手势 push 到下一个界面 传值 就行了,不用写这么多了
        degulade:@Developer_峰 嗯,都可以的
      • feng_dev:实现 pinch 手势 放大呢
      • 刘泽世:这个放大的图片必须是个常量吗? 我直接给image就不行
        degulade:@刘泽世 不行哦,必须设置位置大小才行。
      • 超_iOS:请问这个动画有相关资料吗
        超_iOS:@小菜超 你这个图是从一点变成全屏的动画。。嗯我看看
        degulade:我也是初学者,个人觉得学习iOS最好的方法,就是自己亲自敲一次代码,肯定会有很多问题,遇到问题解决问题,这样比较有助于成长 :smile:
        degulade:@小菜超 这个不是动画,就是给这个UIImageView添加一个点击事件(也可以称为手势),然后在自定义的方法(即事件的具体方法)中设置一个把图片放大全屏的效果。
        你可以看看我的上一篇文章,《iOS开发笔记:实现修改头像》,有讲手势,和这篇笔记同理的。

      本文标题:iOS开发笔记:实现点击图片放大全屏(可设置放大后的背景透明度)

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