ios 利用UIScrollView實現圖片縮放

前言：我們希望做出的效果是，實現圖片的分頁滑動，且每張圖片都可以雙擊或用手指捏合來縮放大小。上一篇講解UIGestureRecognizer的中，我們介紹的UIPinchGestureRecognizer也可以實現用手指捏合來縮放大小這個功能，這里介紹另外一種方法，直接使用UIScrollView自帶的功能實現同樣的效果。

實現的大體思路：要實現圖片的分頁滑動，那么肯定是一個大的ScrollView，而每一張圖片都可以放大縮小，那么每張圖片imageView必定也在一個scrollView上。

在講解圖片縮放的具體實現之前，我們先來區分幾個概念：contentSize、contentOffset 、frame

舉個例子：一個ScrollView的frame是（0,0,320,480），contentSize是（960,480）

contentSize 代表scrollview中的全部內容區域，

frame代表scrollview在屏幕中顯示的區域，

contentOffset 是scrollview當前顯示區域頂點相對於frame頂點的偏移量，如當前顯示的是第二幅圖，那么它的contentOffset.x就是320；

 1、取得屏幕寬高

    #define MRScreenWidth      CGRectGetWidth([UIScreen mainScreen].applicationFrame)

    [[UIScreenmainScreen]bounds].size.width  區別？

2、直接上代碼吧

#import "MyZoomViewController.h"
#define MRScreenWidth      CGRectGetWidth([UIScreen mainScreen].applicationFrame)
#define MRScreenHeight     CGRectGetHeight([UIScreen mainScreen].applicationFrame)

@interface MyZoomViewController ()

@end

@implementation MyZoomViewController
@synthesize srcollView = _srcollView;
@synthesize imageView = _imageView;

- (void)viewDidLoad
{
    [super viewDidLoad];
    _srcollView = [[UIScrollView alloc]init];
    _srcollView.delegate = self;
    
    _srcollView.userInteractionEnabled = YES;
    _srcollView.showsHorizontalScrollIndicator = YES;//是否顯示側邊的滾動欄
    _srcollView.showsVerticalScrollIndicator = NO;
    _srcollView.scrollsToTop = NO;
    _srcollView.scrollEnabled = YES;
    _srcollView.frame = CGRectMake(0, 0, MRScreenWidth, MRScreenHeight);
    
    UIImage *img = [UIImage imageNamed:@"image1.png"];
    _imageView = [[UIImageView alloc]initWithImage:img];
    //設置這個_imageView能被縮放的最大尺寸，這句話很重要，一定不能少,如果沒有這句話，圖片不能縮放
    _imageView.frame = CGRectMake(0, 0, MRScreenWidth * 2.5, MRScreenHeight * 2.5);
   
    [self.view addSubview:_srcollView];
    [_srcollView addSubview:_imageView];
    [_imageView release];
    [_srcollView release];
    
    // Add gesture,double tap zoom imageView.
    UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self
                              action:@selector(handleDoubleTap:)];
    [doubleTapGesture setNumberOfTapsRequired:2];
    [_srcollView addGestureRecognizer:doubleTapGesture];
    [doubleTapGesture release];

//    float minimumScale = _srcollView.frame.size.width / _imageView.frame.size.width;//最小縮放倍數
//    [_srcollView setMinimumZoomScale:minimumScale];
//    [_srcollView setZoomScale:0.5f];
    
    [_srcollView setMinimumZoomScale:0.25f];
    [_srcollView setMaximumZoomScale:3.0f];
    [_srcollView setZoomScale:0.5f animated:NO];
    
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}
#pragma mark - Zoom methods

- (void)handleDoubleTap:(UIGestureRecognizer *)gesture
{
    NSLog(@"handleDoubleTap");
    float newScale = _srcollView.zoomScale * 1.5;//zoomScale這個值決定了contents當前擴展的比例
    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gesture locationInView:gesture.view]];
    [_srcollView zoomToRect:zoomRect animated:YES];
}

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center
{
    CGRect zoomRect;
    zoomRect.size.height = _srcollView.frame.size.height / scale;
    NSLog(@"zoomRect.size.height is %f",zoomRect.size.height);
    NSLog(@"self.frame.size.height is %f",_srcollView.frame.size.height);
    zoomRect.size.width  = _srcollView.frame.size.width  / scale;
    zoomRect.origin.x = center.x - (zoomRect.size.width  / 2.0);
    zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);
    return zoomRect;
}


#pragma mark - UIScrollViewDelegate

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return _imageView;
}
//當滑動結束時
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
    //把當前的縮放比例設進ZoomScale，以便下次縮放時實在現有的比例的基礎上
    NSLog(@"scale is %f",scale);
    [_srcollView setZoomScale:scale animated:NO];
}

#pragma mark - View cycle
- (void)dealloc
{
    [super dealloc];
}


@end

這個只是實現了單張圖片的縮放，但多張圖片的也是這個原理。多張圖片縮放要注意的是，每張圖片frame的設置，一般起點為width * i

總結：

1、圖片縮放必須實現UIScrollViewDelegate的這兩個方法：viewForZoomingInScrollView和 scrollViewDidEndZooming:withView:atScale:。

2、設置最大、最小縮放比，maxinumZoomScale、mininumZoomScale。不要忘記，設置imageview的最大縮放長寬，不然不能實現正常的縮放。 

 

二、實現簡單的單張大圖片的滾動顯示