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縮放不自然。

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