iOS許多APP中都使用到了圖片放大瀏覽的功能，如淘寶、微信等。最近也琢磨了一些方法，基本可以實現點選圖片放大，並且可以左右滑動瀏覽上一張下一張圖片，也可以通過手勢撐開放大縮小，可以加上長按儲存到相簿的功能。具體的做法是子類化UIImageView，新增點選手勢，監聽手勢建立UIScrollView瀏覽檢視，實現左右滑動，每張圖片用獨自的UIScrollView盛放便可以實現放大縮小旋轉等功能。

一、效果

瀏覽效果和放大效果

二、實現流程

1、子類化UIImageView，取名為ZoomImageView

#import <UIKit/UIKit.h>

@class ZoomImageView;
@protocol ZoomImageViewDelegate <NSObject>
@optional
//圖片將要放大
- (void)imageWillZoomIn:(ZoomImageView *)imageView;
//圖片已經放大
- (void)imageDidZoomIn:(ZoomImageView *)imageView;
//圖片將要隱藏
- (void)imageWillZoomOut:(ZoomImageView *)imageView;
//圖片已經隱藏
- (void)imageDidZoomOut:(ZoomImageView *)imageView;
@end

@interface ZoomImageView : UIImageView {
    UIImageView *_fullImageView;
}
@property (nonatomic, weak)id<ZoomImageViewDelegate> delegate;
//繫結資料用於瀏覽
@property (nonatomic,strong)NSMutableArray *imageArray;
//描述
@property (nonatomic,strong)NSMutableArray *desArray;
//當前圖片
@property (nonatomic,strong)NSString *nowImage;
- (instancetype)initWithFrame:(CGRect)frame withImage:(NSString *)imageStr;
 

//是否處於點選狀態   
 _isTap = NO;
//新增點選手勢
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(zoomAction)];
[self addGestureRecognizer:tap];
self.userInteractionEnabled = YES;
//等比例放大縮小
self.contentMode = UIViewContentModeScaleAspectFit;
 

實現ZoomAction圖片放大方法，當zoomImageView 被點選，用[self _createViews]建立放大所需的檢視。然後顯示_maskView，_maskView的背景設定為黑色，這樣原來的圖片就將被黑色覆蓋，接著獲取被點選的圖片的frame，將_fullImageView的的座標設定為被點選圖片的座標，用_fullImageView實現放大動畫，放大完成後_fullImageView再次隱藏並移除，這樣就實現了放大功能。最後顯示用於圖片滑動瀏覽的_photoListView檢視。

- (void)zoomAction{
    if (_isTap == YES) {
        return;
    }else{
        _isTap = YES;
    }
    NSLog(@"開始放大");
    //呼叫代理物件將要放大的協議方法
    if ([self.delegate respondsToSelector:@selector(imageWillZoomIn:)]) {
        [self.delegate imageWillZoomIn:self];
    }
    [self _createView];
    //座標系由當前檢視轉化為window的座標
    CGRect frame = [self convertRect:self.bounds toView:self.window];
  
    _fullImageView.frame = frame;
    _maskView.alpha = 1;
    _maskView.hidden = NO;
    
    //設定動畫效果實現放大
    [UIView animateWithDuration:0.3 animations:^{
        //放大到整個螢幕
        _fullImageView.frame = [UIScreen mainScreen].bounds;
        
    } completion:^(BOOL finished) {
        
        _photoListView.hidden = NO;
        _maskView.hidden = NO;
        _fullImageView.hidden = YES;
        
        //呼叫代理物件已經放大的協議方法
        if ([self.delegate respondsToSelector:@selector(imageDidZoomIn:)]) {
            [self.delegate imageDidZoomIn:self];
        }
    }];
}
 

//建立大圖顯示時需要的子檢視
- (void)_createView {
    
    if (_photoListView == nil) {
       
        //蒙砂檢視
        _maskView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        _maskView.backgroundColor = [UIColor blackColor];
        _maskView.alpha = 1;
        _maskView.hidden = YES;
        [self.window addSubview:_maskView];
        
        //圖片瀏覽檢視
        _photoListView = [[PhotoListView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        _photoListView.hidden = YES;
        _photoListView.desArray = _desArray;
        _photoListView.images = _imageArray;
        
        //計算當前檢視為第幾張
        for(NSInteger i = 0; i < _imageArray.count;i++){
            NSString *urlNow = _imageArray[i];
            if([_nowImage isEqualToString:urlNow] ){
                _photoListView.indexPath = i;
            }
        }
        [self.window addSubview:_photoListView];
        
        //建立大圖顯示檢視
        _fullImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
        _fullImageView.image = self.image;
        _fullImageView.contentMode = UIViewContentModeScaleAspectFit;
        [self.window addSubview:_fullImageView];

    }
}

在PhotoListView上建立UIcollectionView，每個cell的大小設定為螢幕大小，每個cell盛放一張圖片，滑動方向設定為左右滑動

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(kScreenWidth, kScreenHeight);
layout.minimumInteritemSpacing = 0;
layout.minimumLineSpacing = 30;
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
_collectionView =[[PhotoCollectionView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth + 30,kScreenHeight) collectionViewLayout:layout];
_collectionView.backgroundColor = [UIColor clearColor];
[self addSubview:_collectionView];

//文字顯示
_desBg = [[UIView alloc] initWithFrame:CGRectMake(0, kScreenHeight -  85, kScreenWidth, 35)];
_desBg.backgroundColor = [UIColor colorWithWhite:0 alpha:0.4];
[self addSubview:_desBg];
    
_desLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, kScreenWidth - 20, 35)];
_desLabel.backgroundColor = [UIColor clearColor];
_desLabel.textColor = [UIColor whiteColor];
_desLabel.font = [UIFont systemFontOfSize:13];
_desLabel.textAlignment = NSTextAlignmentLeft;
_desLabel.numberOfLines = 2;
_desLabel.userInteractionEnabled = NO;
[_desBg addSubview:_desLabel];
     
//建立頁碼顯示
_pageCountLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, kScreenHeight -  50, kScreenWidth, 50)];
_pageCountLabel.backgroundColor = [UIColor colorWithWhite:0 alpha:0.4];
_pageCountLabel.textColor = [UIColor whiteColor];
_pageCountLabel.font = [UIFont systemFontOfSize:15];
_pageCountLabel.textAlignment = NSTextAlignmentCenter;
_pageCountLabel.userInteractionEnabled = NO;
[self addSubview:_pageCountLabel];

//接受通知方法
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(PageChangeAction:) name:@"PageChangeAction" object:nil];

- (void)PageChangeAction:(NSNotification *)text {
    NSString *str = text.userInfo[@"nowPage"];
   _pageCountLabel.text = [NSString stringWithFormat:@"%li/%lu",[str integerValue] + 1,(unsigned long)_images.count];
    if (_descriptionArr.count > 0) {
        NSString *desStr = _descriptionArr[[str integerValue]];
        if ((NSNull *)desStr != [NSNull null] && desStr != nil) {
            _desLabel.text = desStr;
            _desBg.hidden = NO;
        }else{
            _desBg.hidden = YES;
        }
    }else{
        _desBg.hidden = YES;
    }
}

在UICollecionViewCell中新增 PhotoScollView，PhotoScollView繼承自UIScolloview，用於放置圖片。

//子類化滑動檢視
scrollView = [[PhotoScrollView alloc] initWithFrame:self.bounds];    
[self.contentView addSubview:scrollView];

此處我只添加了單擊手勢和雙擊手勢，單擊是傳送通知隱藏滑動檢視，雙擊是放大圖片或者縮小圖片。因為同時涉及單擊和雙擊，所以要處理單擊和雙擊的衝突。這裡的處理方法是雙擊手勢觸發時,讓單擊手勢暫時失效 [singleTap requireGestureRecognizerToFail:doubleTap];

- (id)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.showsVerticalScrollIndicator = NO;
        self.showsHorizontalScrollIndicator = NO;
        //子檢視
        imageView = [[UIImageView alloc] initWithFrame:self.bounds];
        //等比例放大
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        [self addSubview:imageView];

        //指定代理
        self.delegate = self;
        
        //縮放倍數
        self.maximumZoomScale = 3;
        self.minimumZoomScale = .5;

        //雙擊手勢
        UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleTapAction:)];
        
        //設定手指的數量
        doubleTap.numberOfTouchesRequired = 1;
        //點選的數量
        doubleTap.numberOfTapsRequired = 2;
        //將手勢新增到滑動檢視上
        [self addGestureRecognizer:doubleTap];
        
        //單擊手勢
        UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTapAction)];
        [self addGestureRecognizer:singleTap];
        
        //雙擊手勢觸發時,讓單擊手勢暫時失效
        [singleTap requireGestureRecognizerToFail:doubleTap];
    }
    return self;
}

- (void)setImageUrl:(NSString *)imageUrl{
    
    //填充資料
    //[imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]];
    imageView.image = [UIImage imageNamed:imageUrl];
}

#pragma mark UITapGestureRecognizer

//單擊手勢
- (void)singleTapAction{
    
    //傳送通知結束瀏覽
    [[NSNotificationCenter defaultCenter] postNotificationName:@"HideShowViewNotification" object:nil];
    
}

//雙擊呼叫的方法
- (void)doubleTapAction:(UITapGestureRecognizer *)tap{
    
    if (self.zoomScale != 1) { //不是正常倍數
        
//        self.zoomScale = 1; //還原
        [self setZoomScale:1 animated:YES];
    }else{
    
//        self.zoomScale = 3;
        [self setZoomScale:3 animated:YES];
    
    }
}

#pragma mark UIScrollViewDelegate
//返回放大的檢視
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return imageView;
}

放大後的圖片和放大前的圖片不應該是同一張，放大前應該用縮圖，節約流量，提高顯示速度，放大後應該用大圖，展示清晰圖片。並且真實專案中應該考慮圖片快取等問題。

三、demo連結