一：簡介

在專案中免不了會遇到，實名認證上傳身份證、繫結銀行卡等功能。在實際操作中呢，會涉及到上傳圖片，在頁面佈局時，可能圖片不是一張，考慮到佈局的美觀等因素，顯示圖片的位置變得很小，如果想檢視上傳的圖片是否清晰，內容是否完整，可能就需要放大才能實現，下面就和大家分享一下我封裝的一類，完美的實現了圖片的縮放功能。

另外，這些博文都是來源於我日常開發中的技術總結，在時間允許的情況下，我會針對技術點分別分享iOS、Android兩個版本，儘量附上demo以供大家參考，如果有其他技術點需要，可在文章後留言，我會盡全力幫助大家。

二：實現思路分析

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];
}

好了，到這裡點選圖片放大到全屏就完成了

希望可以幫助大家，如有問題可加QQ技術交流群: 668562416，如果哪裡有什麼不對或者不足的地方，還望讀者多多提意見或建議

如需轉載請聯絡我，經過授權方可轉載，謝謝