淺析在iPhone下實現UIScrollView圖片瀏覽器功能

iPhone下UIScrollView圖片瀏覽器是本文要介紹的內容，今天看書中介紹了從圖片庫中調用圖片的例子，一時性起打算做一個簡單的圖片瀏覽器。

功能很簡單，從圖片庫中載入圖片，然後放到view下，並支援放大，縮小，平移。

由於對控制項陳列庫不瞭解，一開始的方案是這樣的：

前面的架構都一樣：

用toolbar做按鈕條，裡面有個按鍵，觸發從按鍵。

按鍵action調用圖片庫，之後圖片庫發訊息到delegate(我這裡協議掛在了主UIViewController上面，後面其他的delegate也一樣)。

如果正確得到了圖片 UIImagePickerControllerDelegate的imagePickerController:didFinishPickingMediaWithInfo:的第二個參數可以得到一個包含選定圖片的Dictionary。

OK，演出開始了。後面的方案是這樣。

1、搞了個UIImageView作為圖片載體，撲滿整個螢幕，然後將Mode設定為Center，圖片設定後可以置中顯示。

然後利用UIPinchGestureRecognizer做手勢，手勢觸發後會回調回應程式法。在方法中設定UIImageView的bounds和center保證其置中顯示。過程中從網路上搜尋了一個擴充UIImage的類型，可以進行縮放圖片。源碼：(注意，這個函數由於用到了UIGraphicsXXXX函數，要求只能再主線程中調用)

 

  
//  
  
//  UIImage_Extra.h  
  
//  Camera  
  
//  
  
//  Created by 李 擇一 on 11-4-22.  
  
//  Copyright 2011 __MyCompanyName__. All rights reserved.  
  
//  
  
#import <Foundation/Foundation.h> 
  
@interface UIImage (Extra)  
  
- (UIImage*) imageByScalingAndCroppingForSize: (CGSize)targetSize;  
  
@end  
  
//  
  
//  UIImage_Extra.m  
  
//  Camera  
  
//  
  
//  Created by 李 擇一 on 11-4-22.  
  
//  Copyright 2011 __MyCompanyName__. All rights reserved.  
  
//  
  
#import "UIImage_Extra.h"  
  
@implementation UIImage (Extra)  
  
- (UIImage*)imageByScalingAndCroppingForSize: (CGSize)targetSize  
  
{  
  
    UIImage *sourceImage = self;  
  
    UIImage *newImage = nil;          
  
    CGSize imageSize = sourceImage.size;  
  
    CGFloat width = imageSize.width;  
  
    CGFloat height = imageSize.height;  
  
    CGFloat targetWidth = targetSize.width;  
  
    CGFloat targetHeight = targetSize.height;  
  
    CGFloat scaleFactor = 0.0;  
  
    CGFloat scaledWidth = targetWidth;  
  
    CGFloat scaledHeight = targetHeight;  
  
    CGPoint thumbnailPoint = CGPointMake(0.0,0.0);  
  
    if (CGSizeEqualToSize(imageSize, targetSize) == NO)   
  
    {  
  
        CGFloat widthFactor = targetWidth / width;  
  
        CGFloat heightFactor = targetHeight / height;  
  
        if (widthFactor > heightFactor)   
  
            scaleFactor = widthFactor; // scale to fit height  
  
        else  
  
      scaleFactor = heightFactor; // scale to fit width  
  
        scaledWidth  = width * scaleFactor;  
  
        scaledHeight = height * scaleFactor;  
  
        // center the image  
  
        if (widthFactor > heightFactor)  
  
        {  
  
            thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5;   
  
        }  
  
        else   
  
            if (widthFactor < heightFactor)  
  
            {  
  
                thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;  
  
            }  
  
    }         
  
    UIGraphicsBeginImageContext(targetSize); // this will crop  
  
    CGRect thumbnailRect = CGRectZero;  
  
    thumbnailRect.origin = thumbnailPoint;  
  
    thumbnailRect.size.width  = scaledWidth;  
  
    thumbnailRect.size.height = scaledHeight;    
  
    [sourceImage drawInRect:thumbnailRect];  
  
    newImage = UIGraphicsGetImageFromCurrentImageContext();  
  
    if(newImage == nil)   
  
        NSLog(@"could not scale image");  
  
    //pop the context to get back to the default  
  
    UIGraphicsEndImageContext();  
  
    return newImage;  
  
}  
  
@end 
 

再往下做平移的時候出現了問題，雖然可以重載touchesBegan和touchesMove移動UIImageView，可是就失去了iOS特效了，並且當圖片移到螢幕邊緣再進行放大，縮小，UIImageView就不一定飛到那裡去了，還需要繼續增加判斷條件。所以此方法不可取。

現在發現了新的api可以解決展開的問題。在UIImage 中有個函數叫stretchableImageWithLeftCapWidth:topCapHeight:的，可以返回一個新的UIImage，這個UIImage是可以展開的。具體用法請參閱apple的Sample Code.

2、到網上查了可以利用UIScrollView做平移處理，在其中嵌入一個UIImageView，手勢用來管理圖片放大縮小，這樣就可以一邊吃火鍋，一邊唱歌了。

這個方案要考慮的事情有幾個，一個是UIScrollView的contentSize的要考慮UIImageView的大小，在放大或者縮小圖片以後要調整contentSize的大小。

還有一個就是在縮放的時候要考慮到，縮放的中心位置問題。比如，現在圖片上有個人臉，然後手勢是以人臉鼻子為中心放大的，在放大結束後，可能手勢的中心就跑偏了，因此要在縮放時修改UIImageView的center，這個計算還是挺複雜的。

3、為瞭解決這個問題繼續搜尋文檔，發現在UIScrollView裡面有zoom這個東東，可以通過delegate的viewForZoomingInScrollView:方法指定UIScrollView中的某個view放大，還可以設定放大的最大倍數和最小倍數。這個nb了，一個UIScrollView類全都搞定了平移縮放。酷啊！！

但是這個也有要注意的問題。由於UIScrollView裡面可能要主動調用他所包含subView的屬性，因此在縮放過程中，不要修改subview的屬性。

另外，縮放平移全都人家搞了，在給UIImageView中換圖片之前一定要注意先將UIScrollView的zoomScale，contentSize，contentOffset全都設定成初始值。設想這樣一個情況，在UIScrollView裡面將圖片放大，contentSize，contentOffset，zoomScale全變了，而你這時候找了個特小的圖片放進來，如果不設定那三個屬性的初值，或者只設定了一個，這樣必然會造成混亂。

三種方法裡還是第三種最簡單啊。

總結：我忘了那本書裡面說過，Apple公司為在Mac上面的工作做了20年，如果你需要用很多代碼實現一個很簡單的功能，肯定是方法不對。

今天的探索印證了這句話。還有，現在市面上所有的iOS開發書籍裡都沒有原理層面的講解開發的。所以搜尋引擎，加上瀏覽各種網站論壇成為解決問題的快捷途徑。

小結：淺析在iPhone下實現ScrollView圖片瀏覽器功能的內容介紹完了，希望本文對你有所協助。