iOS 实现点击图片放大

一：简介

在项目中免不了会遇到，实名认证上传身份证、绑定银行卡等功能。在实际操作中呢，会涉及到上传图片，在页面布局时，可能图片不是一张，考虑到布局的美观等因素，显示图片的位置变得很小，如果想查看上传的图片是否清晰，内容是否完整，可能就需要放大才能实现，下面就和大家分享一下我封装的一类，完美的实现了图片的缩放功能。

另外，这些博文都是来源于我日常开发中的技术总结，在时间允许的情况下，我会针对技术点分别分享iOS、Android两个版本，尽量附上demo以供大家参考，如果有其他技术点需要，可在文章后留言，我会尽全力帮助大家。

源码Demo获取方法

关注 【网罗开发】微信公众号，回复【93】便可领取。
网罗天下方法，方便你我开发，更多iOS技术干货等待领取，所有文档会持续更新，欢迎关注一起成长！

二：实现思路分析

1. 给UIImageView添加手势

2. 封装一个继承NSObject的FBYImageZoom类

3. 写一个函数用来接收出入的UIImageView

4. 根据传入的UIImageView重新绘制在Window中

5. 添加放大后背景视图的颜色和透明度

6. 使用动画放大展示ImageView

7. 添加恢复ImageView原始尺寸的tap点击事件

8. 完成之后将背景视图删掉

三：实现源码分析

根据实现思路分析，一步步进行编码实现：

1. 给UIImageView添加手势

self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 150, SCREEN_WIDTH-100, SCREEN_WIDTH-100)];
self.myImageView.image = [UIImage imageNamed:@"bankcard"];
//添加点击事件
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];
[_myImageView addGestureRecognizer:tapGestureRecognizer];
[_myImageView setUserInteractionEnabled:YES];
[self.view addSubview:_myImageView];

2. 封装一个继承NSObject的FBYImageZoom类

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

@interface FBYImageZoom : NSObject

@end

3. 写一个函数用来接收出入的UIImageView

/**
 *  @param contentImageview 图片所在的imageView
 */
+(void)ImageZoomWithImageView:(UIImageView *)contentImageview;

4. 根据传入的UIImageView重新绘制在Window中

+(void)ImageZoomWithImageView:(UIImageView *)contentImageview{
    
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    [self scanBigImageWithImage:contentImageview.image frame:[contentImageview convertRect:contentImageview.bounds toView:window]];
}

5. 添加放大后背景视图的颜色和透明度

//当前视图
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    //背景
    UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    [backgroundView setBackgroundColor:[UIColor colorWithRed:107/255.0 green:107/255.0 blue:99/255.0 alpha:0.6]];

6. 使用动画放大展示ImageView

    //动画放大所展示的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) {
        
    }];

7. 添加恢复ImageView原始尺寸的tap点击事件

//添加点击事件同样是类方法 -> 作用是再次点击回到初始大小
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
[backgroundView addGestureRecognizer:tapGestureRecognizer];

/**
 *  恢复imageView原始尺寸
 */
+(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];
    }];
}

8. 完成之后将背景视图删掉

//完成后操作->将背景视图删掉
[backgroundView removeFromSuperview];

四：项目实际使用

1. 引入封装类FBYImageZoom

#import "FBYImageZoom.h"

2. 给UIImageView添加手势

//添加点击事件
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];

3. 调用封装类函数

//浏览大图点击事件
-(void)scanBigImageClick:(UITapGestureRecognizer *)tap{
    NSLog(@"点击图片");
    UIImageView *clickedImageView = (UIImageView *)tap.view;
    [FBYImageZoom ImageZoomWithImageView:clickedImageView];
}

好了，到这里点击图片放大到全屏就完成了

058B04FD193B20F1EC3C74CA755C53A7.gif

希望可以帮助大家，如有问题可加QQ技术交流群: 668562416，如果哪里有什么不对或者不足的地方，还望读者多多提意见或建议

如需转载请联系我，经过授权方可转载，谢谢