IOS 怎麼用UIScrollView來滾動和縮放他的內容第一篇

本篇文章來自於互聯網資料翻譯

UIScrollView是在IOS最有用的控件之一。他是一個來展示超過一個屏幕的內容的很好的方式。下面有不少的技巧來使用他。

這篇文章就是關於UIScrollView的，深刻淺出，看看咱們接下來學習的內容：

1：怎麼用UIScrollView來展一個比較大的圖片

2：當UIScrollView縮放的時候怎麼一直保持在中間

3：在UIScrollView裏面怎麼嵌入一個複雜的視圖層次

4：UIScrollView的特性怎麼和UIPageControl一塊兒來瀏覽多個頁面的內容

5：建立一個UIScrollView滾動視圖在上面能看到下一頁和上一頁的一部分而且還能看到當前頁面。這就像appstore的一個瀏覽app的一個效果。

這篇文章是IOS5.0以上 xcode4.5的環境

咱們開始建立一個項目以下圖：

咱們填上項目的名字還有你建立appid時候寫的公司標識，還有類名字的前綴，設置咱們的設備是iPhone咱們暫時只支持iPhone的模式，選擇單視圖模版。選擇下一步而且選擇保存位置。

因爲咱們介紹UIScrollView的4個效果，所以咱們建立一個tableView，每一個cell會出現一個新的視圖控制器而且展示一個效果。

上面這個圖顯示如今你的storyboard是什麼樣的當你完成的時候。

咱們編譯UITableView的導航，接下來咱們要作的是：

1：打開MainStroyboard.storyboard而且點擊系統模版給咱們建立的第一個初始化場景。

2：而後咱們添加一個UITableViewController從對象庫而後放到storyboard。

3：如今選擇tableView你剛纔添加的而後選擇Editor，而後Embed in，NavigationController。

4：選擇tableViewController的tableView，而且設置他的cell類型是靜態類型的在屬性檢查器。

5：最後，設置tableView的section是一個，有4個cell，設置cell是basic類型。而後把他們的lables改成Image scroll，Custom View scroll，paged paged with peeking

保存這個storyboard ，而且編譯運行。你應該看到你的tableView。以下圖：

滾動縮放一個大圖片：

咱們接下來要作的是學習怎麼用UIScrollView來縮放和滾動一個大的圖片。

第一步你須要設置這個Viewcontroller，選擇ViewController.h 而且添加一個UIScrollView的outlet。讓你的Controller符合UIScrollView的UIScrollViewDelegate協議以下

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController <UIScrollViewDelegate>
 
@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
 
@end

而後在在ViewController.m設置實現屬性

@synthesize scrollView = _scrollView;

回到storyboard，從對象庫拖拽一個Viewcontroller而且設置他的類是Viewcontroller。

點擊tableview的Cell  crl+點擊鼠標左鍵向一個新的Viewcontroller拖拽，而且彈出一個storyboard segues而且選擇push效果。

從對象庫拖拽一個UIScrollView到Viewcontroller上而且填充。

而後而後把UIScrollView的輸出口連上還有設置Viewcontroller做爲UIScrollView的代理。以下圖：

如今在Viewcontroller.m中的延展中添加屬性和方法。這些屬性方法是私有的。

而後添加

@synthesize imageView = _imageView;

如今咱們開始設置咱們的UIScrollView了在viewDidLoad和viewVillAppear

用下面代碼：

- (void)viewDidLoad {
    [super viewDidLoad];
 
    // 1
    UIImage *image = [UIImage imageNamed:@"photo1.png"];
    self.imageView = [[UIImageView alloc] initWithImage:image];
    self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=image.size};
    [self.scrollView addSubview:self.imageView];
 
    // 2
    self.scrollView.contentSize = image.size;
 
    // 3
    UITapGestureRecognizer *doubleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewDoubleTapped:)];
    doubleTapRecognizer.numberOfTapsRequired = 2;
    doubleTapRecognizer.numberOfTouchesRequired = 1;
    [self.scrollView addGestureRecognizer:doubleTapRecognizer];
 
    UITapGestureRecognizer *twoFingerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewTwoFingerTapped:)];
    twoFingerTapRecognizer.numberOfTapsRequired = 1;
    twoFingerTapRecognizer.numberOfTouchesRequired = 2;
    [self.scrollView addGestureRecognizer:twoFingerTapRecognizer];
}
 
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
 
    // 4
    CGRect scrollViewFrame = self.scrollView.frame;
    CGFloat scaleWidth = scrollViewFrame.size.width / self.scrollView.contentSize.width;
    CGFloat scaleHeight = scrollViewFrame.size.height / self.scrollView.contentSize.height;
    CGFloat minScale = MIN(scaleWidth, scaleHeight);
    self.scrollView.minimumZoomScale = minScale;
 
    // 5
    self.scrollView.maximumZoomScale = 1.0f;
    self.scrollView.zoomScale = minScale;
 
    // 6
    [self centerScrollViewContents];
}

上面的代碼看起來有點複雜。所以咱們停下來一步步的分析下。

1：第一步，你須要建立一個UIImageView，設置他的Image屬性，而後設置UIImageView的座標，而且添加到UIScrollView上

2：而後咱們設置UIScrollView的contentSize，這樣作的目的是讓UIScrollView知道他本身能向橫方向和豎方向滾動多遠或者說多少像素。

3：而後向UIScrollView上面添加了兩個手勢:一個是雙擊手勢來縮小，另外一個兩個手指單擊來放大。

4：接下來咱們須要計算UIScrollView的最小縮放比例。縮放比例是1意味着UIScrollView的內容是正常大小展現。小於1，展現內容放大，當

大於1說明內容縮小。爲了獲得最小縮放比例，你須要計算你縮放多少才能讓圖片溫馨的展現到UIScrollView里根據他的寬度。而後你根據他的高度作相同的計算。最後比較這兩個縮放比例的最小的一個設置爲UIScrollView最小縮放比例。給你一個縮放比例而後你能夠看到整張圖片當放大的時候。

5:你設置最大縮放比例爲1，由於縮放的比圖片分辨率大你看圖片會模糊。你設置初始縮放爲最小縮放比例。所以這個圖片能夠開始充分放大。

6：讓你的圖片永遠在UIScrollView中間當縮放時候。

- (void)centerScrollViewContents {
    CGSize boundsSize = self.scrollView.bounds.size;
    CGRect contentsFrame = self.imageView.frame;
 
    if (contentsFrame.size.width < boundsSize.width) {
        contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
    } else {
        contentsFrame.origin.x = 0.0f;
    }
 
    if (contentsFrame.size.height < boundsSize.height) {
        contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
    } else {
        contentsFrame.origin.y = 0.0f;
    }
 
    self.imageView.frame = contentsFrame;
}若是UIScrollView的bounds大小大於UIImageView圖片frame的大小，那麼圖片的座標就是條件爲真時計算的結果，相反就是原始座標。- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer {
    // 1
    CGPoint pointInView = [recognizer locationInView:self.imageView];
 
    // 2
    CGFloat newZoomScale = self.scrollView.zoomScale * 1.5f;
    newZoomScale = MIN(newZoomScale, self.scrollView.maximumZoomScale);
 
    // 3
    CGSize scrollViewSize = self.scrollView.bounds.size;
 
    CGFloat w = scrollViewSize.width / newZoomScale;
    CGFloat h = scrollViewSize.height / newZoomScale;
    CGFloat x = pointInView.x - (w / 2.0f);
    CGFloat y = pointInView.y - (h / 2.0f);
 
    CGRect rectToZoomTo = CGRectMake(x, y, w, h);
 
    // 4
    [self.scrollView zoomToRect:rectToZoomTo animated:YES];
}

1：得到你點擊圖片的座標位置.

2:接下來計算縮放比例縮放150%，可是必須限制最大縮放比例

3：而後用第一步計算的位置計算你想要縮放的位置大小。

4：最後，你須要告訴UIScrollView縮放的frame而且加上動畫。

- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer {
    // Zoom out slightly, capping at the minimum zoom scale specified by the scroll view
    CGFloat newZoomScale = self.scrollView.zoomScale / 1.5f;
    newZoomScale = MAX(newZoomScale, self.scrollView.minimumZoomScale);
    [self.scrollView setZoomScale:newZoomScale animated:YES];
}

這相似放大的方式。

- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    // Return the view that you want to zoom
    return self.imageView;
}

這是UIScrollView縮放機制的靈魂地方。當UIScrollView完成縮放時候你告訴他是哪一個視圖在UIScrollView裏面實現了縮放。

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    // The scroll view has zoomed, so you need to re-center the contents
    [self centerScrollViewContents];
}

這個方法是當UIScrollView完成縮放時候，你須要通知視圖在UIScrollView中間，不然UIScrollView縮放不天然。

編譯運行項目出現上圖效果，你能夠試着放大縮小滾動。