iOS-UIImageView点击图片放大，再次点击恢复原始尺寸

Posted 2022-08-05 极客学伟

需求分析：公司的新项目是集成了社交分享的功能，可以分享所见的奇闻异事，其中包括用户可以选择想要分享的图片状态，一张或多张，这种设计会产生用户想点击看大图的需求，再次点击返回原始的图片尺寸。还有用户的个人信息栏有用户头像的照片，用户头像一般是小图，所以用户会有点击查看大图的需要，结合这种需求，设计了一个封装类。
github开源地址：https://github.com/qxuewei/XWSacnBigImage

封装类.h文件：

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface XWScanImage : NSObject
/**
*  浏览大图
*
*  @param scanImageView 图片所在的imageView
*/
+(void)scanBigImageWithImageView:(UIImageView *)currentImageview;
@end

.m文件

#import "XWScanImage.h"

@implementation XWScanImage

//原始尺寸
static CGRect oldframe;

/**
 *  浏览大图
 *
 *  @param scanImageView 图片所在的imageView
 */
+(void)scanBigImageWithImageView:(UIImageView *)currentImageview
    //当前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:colorWithRGBA(107, 107, 99, 0.6)];
    //此时视图不会显示
    [backgroundView setAlpha:0];
    //将所展示的imageView重新绘制在Window中
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:oldframe];
    [imageView setImage:image];
    [imageView setTag:0];
    [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:0];
    //恢复
    [UIView animateWithDuration:0.4 animations:^
        [imageView setFrame:oldframe];
        [backgroundView setAlpha:0];
     completion:^(BOOL finished) 
       //完成后操作->将背景视图删掉
        [backgroundView removeFromSuperview];
    ];


@end

使用方法：
1.导入XWScanImageClass
2.为UIImageView增加点击事件，并且开始用户交互属性

//为UIImageView1添加点击事件
UITapGestureRecognizer *tapGestureRecognizer1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick1:)];
[_ImageView1 addGestureRecognizer:tapGestureRecognizer1];
//让UIImageView和它的父类开启用户交互属性
[_ImageView1 setUserInteractionEnabled:YES];

3.浏览大图点击事件

-(void)scanBigImageClick1:(UITapGestureRecognizer *)tap
NSLog(@"点击图片");
UIImageView *clickedImageView = (UIImageView *)tap.view;
[XWScanImage scanBigImageWithImageView:clickedImageView];

运行结果截图：

点击第一张图片之后：
服务器维护。。。