iOS開發-UIScrollView的用法

UIScrollView是用來在屏幕上顯示那些在有限區域內放不下的內容。例如，在手機屏幕上顯示內容豐富的網頁或者很大的圖片。在這種狀況下，須要用戶對屏幕內容進行拖動或縮放來查看屏幕或窗口區域外的內容。

因此，ScrollView應該首先有一個窗口，用來顯示內容，其次，還要有內容自己。這裏的這個顯示窗口就是UIScrollView，這個窗口能夠是整個手機屏幕，也能夠只是手機屏幕的一部分區域（屏幕其餘部分能夠顯示些別的東西）。內容則是你須要查看的圖片或者網頁等信息視圖。一般，其大小會超過這個屏幕，正由於如此，咱們纔要使用UIScrollView來查看。

使用方法

創建scrollView

先來看如何使用UIScrollView在小窗口中顯示一副大圖。

UIScrollView-001.jpg

假定ViewConroller已經設置了屬性@property UIScrollView * scrollView;

- (void)viewDidLoad{
[super viewDidLoad];//1. 創建UIScrollView窗口，咱們只打算用手機的上半屏顯示圖像，(這一步也能夠在storyboard裏完成)self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320 , 300)];//2.創建內容視圖UIImageView * view = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tesla.jpg"]];//3.將內容視圖做爲scrollView的子視圖[self.scrollView addSubview: view];//4.固然了，還得把scrollView添加到視圖結構中[self.view addSubview: self.scrollView];
}

運行一下看看，發現窗口正常顯示了圖片的左上角。可是根本拖不動，看不了圖片的其餘部分。這是怎麼回事呢？由於咱們沒有爲scrollView設置要顯示的內容大小。而scrollView的contenSize大小默認是0。

內容展現：contentSize contentOffset contentInset

contentSize描述了有多大範圍的內容須要使用scrollView的窗口來顯示，其默認值爲CGSizeZero，也就是一個寬和高都是0的範圍。

當contentSize小於當前scrollView的大小時，意味着用戶要顯示的內容在窗口範圍內是能夠所有顯示的，這個時候，一般內容視圖是拖不動的（有內容沒有顯示出來纔要拖嘛，都顯示得出來）。之因此說是「一般」，是由於經過某些設置，仍是能夠拖得動的，後邊回彈機制裏會解釋。因此要讓視圖能夠拖動，咱們得設置一個contentSize。在前面這個簡單的這個例子裏，咱們固然就設置成imageView的大小就行了啊。因此在第2步以後添加一句：

self.scrollView.contentSize = view.bounds.size;

這樣，就能夠顯示圖片的所有內容。
可是若是你只想在窗口顯示圖片的的一部分，也是能夠的，就把contentSize設置得小一點就行了。除了contentSize，還有contentOffset，contentInset也能夠結合起來使用。須要注意的是，contentSize的範圍是以scrollView的位置爲基準的。因此，若是內容視圖的frame.origin不是(0,0)，則須要仔細計算內容視圖能被顯示的範圍。

• contentOffset: 描述了內容視圖相對於scrollView窗口的位置(固然是向上向左的偏移量咯)。默認值是CGPointZero，也就是(0,0)。當視圖被拖動時，系統會不斷修改該值。也能夠經過setContentOffset:animated:方法讓圖片到達某個指定的位置。

• scrollRectToVisible:animated:與setContentOffset:animated:相似，只不過是將scrollView座標系內的一塊指定區域移到scrollView的窗口中，若是這部分已經存在於窗口中，則什麼也不作。

• contentInset: 表示scrollView的內邊距，也就是內容視圖邊緣和scrollView的邊緣的留空距離，默認值是UIEdgeInsetsZero，也就是沒間距。這個屬性用的很少，一般在須要刷新內容時才用獲得。

好了，圖片如今能夠拖動了。爲了更清楚的進行描述，咱們換一張圖片。大小爲550*350的網格。

咱們發現，當將圖片拖到邊緣的時候，圖片仍是能夠繼續被拖動的，會顯示contenSize以外的內容。

• 若是contentSize設置爲圖片的大小，拖動到邊緣後仍然能夠繼續拖動，視圖顯示出必定的彈性，顯示出空白，一旦鬆手，內容視圖會回彈，空白不會顯示在scrollView窗口中。

• 若是contentSize設置得比圖片的大小還小，拖動到contentSize指定的大小後仍然能夠繼續拖動，顯示內容視圖的更多部分，但一旦鬆手，內容視圖也會回彈，超過contentSize的那部分不會顯示在scrollView窗口中。

• 若是contentSize設置得比圖片的大小更大，拖動到圖片的邊緣後仍然能夠繼續拖動，顯示空白，直到超過contentSize的範圍，纔會產生彈性，鬆手後，視圖回彈，靜止狀態下咱們能夠看到scrollView能夠顯示出contentSize範圍內圖片範圍外的空白。

也就是說scrollView窗口在手指釋放的時候後的靜止狀態下，只會顯示contentSize範圍內的內容。

UIScrollView-002.jpg

scrollView的這種回彈機制，是能夠設置的，相關的屬性爲:bounces，alwaysBounceHorizontal，alwaysBounceVertical，decelerationRate。

在拖動的過程當中，咱們還發現水平方向和垂直方向還顯示出狀態條，狀態條的顯示也是能夠設置的。相關屬性爲：indicatorStyle showsHorizontalScrollIndicator showsVerticalScrollIndicator  scrollIndicatorInsets flashScrollIndicators

UIScrollView-003.jpg

回彈機制：bounces alwaysBounceHorizontal alwaysBounceVertical

• bounces：描述的當scrollview的顯示超過內容區域的邊緣以及返回時，是否有彈性，默認值爲YES。值爲YES的時候，意味着到達contentSize所描繪的的邊界的時候，拖動會產生彈性。值爲No的時候，拖動到達邊界時，會當即中止。因此，若是在上面的例子當中，將bounces設置爲NO時，窗口中是不會顯示contentSize範圍外的內容的。

• alwaysBounceHorizontal：默認值爲NO，若是該值設爲YES，而且bounces也設置爲YES，那麼，即便設置的contentSize比scrollView的size小，那麼也是能夠拖動的。

• alwaysBounceVertical：默認值爲NO，若是該值設爲YES，而且bounces也設置爲YES，那麼，即便設置的contentSize比scrollView的size小，那麼也是能夠拖動的。

狀態條顯示indicatorStyle showsHorizontalScrollIndicator showsVerticalScrollIndicator  scrollIndicatorInsets flashScrollIndicators

根據咱們的實際須要，咱們能夠對狀態條進行各類設置。

• indicatorStyle: 狀態條的風格，默認值爲UIScrollViewIndicatorStyleDefault。除此以外，還有UIScrollViewIndicatorStyleBlack, UIScrollViewIndicatorStyleWhite兩種其餘風格。能夠用來和環境配色。

• showsHorizontalScrollIndicator : 當處於跟蹤狀態(tracking)時是否顯示水平狀態條，默認值爲YES。下一節說明什麼是跟蹤狀態。

• showsVerticalScrollIndicator : 當處於跟蹤狀態(tracking)時是否顯示垂直狀態條，默認值爲YES。

• scrollIndicatorInsets : 狀態條和scrollView邊距的距離（暫時還沒想明白爲何要有這個）。

• flashScrollIndicators: 短暫的顯示一下狀態條，當你將scrollView調整到最上面時，須要調用一下該方法。

狀態跟蹤

以前提到過跟蹤狀態(tracking)。相關的屬性有三個：tracking dragging decelerate，這三個屬性代表了當前視圖的滾動狀態。

• tracking: 只讀，一旦用戶開始觸摸視圖(也許尚未開始拖動)，該屬性值爲YES

• dragging: 只讀，當用戶開始拖動（手指已經在屏幕上滑動一段距離了），該屬性值爲YES

• decelerate: 只讀，當用戶鬆開手指，但視圖仍在滾動時，該值返回YES

• zooming: 只讀，用戶是否正在進行縮放手勢。

• zoomBouncing：只讀，當縮放超過最大或者最小範圍的時候，回彈到最大最小範圍的過程當中，該值返回YES。

縮放

上一節咱們看到了zooming屬性，scrollView除了支持拖動以外，還支持縮放。

• maximumZoomScale: 最大放大比例，默認值爲1，不得小於minimumZoomScale

• minimumZoomScale: 最小放大比例，默認值爲1，不得大於maxmumZoomScale

• bouncesZoom: 描述在縮放超過縮放比例時，是否bounce，默認值爲YES。若是值爲NO，則達到最大或最小縮放比例時會當即中止縮放。不然，產生彈簧效果。

• zoomScale: 當前的縮放比例。系統會根據縮放過程調整此值。

• setZoomScale:animated:: 程序設置縮放大小。

• zoomToRect:animated: 將內容視圖縮放到指定的Rect中。

• panGestureRecognizer

• pinchGestureRecognizer

其餘設置

• delegate: scrollView的委託對象，該委託對象必須實現UIScrollViewDelegate協議，這些方法會在合適的時候被調用。

• scrollEnabled:視圖是否可被拖動，默認值爲YES。一旦該值設置爲NO，則scrollView再也不接受觸屏事件，會直接傳遞響應鏈。

• scrollToTop:是否啓動「滾動至頂端」手勢，默認值爲YES。當用戶使用了「滾動至頂端」手勢(輕擊狀態欄)時，系統會要求離狀態欄最近的scrollView滾動到頂端，若是scrollToTop設置爲NO，則該scrollView的delegate的scrollViewShouldScrollToTop:方法會返回NO，不會滾動到頂端。不然，則會滾動到頂端。滾動到頂端以後，會給delegate發送scrollViewDidScrollToTop:消息。須要注意的是，在iphone上，若是有多個scrollview的scrollToTop參數設置爲YES的時候，「滾動至頂端」手勢會失效。

• delaysContentTouches:是否推遲觸屏手勢處理，默認值爲YES。設置爲YES的時候，系統在肯定是否發生scroll事件以後，纔會處理觸屏手勢，不然，則會當即調用touchesShouldBegin:withEvent:inContentView:方法。

• directionalLockEnabled:是否鎖定某個特定方向的滾動，默認值爲NO。設置爲YES時，一旦用戶向水平或豎直方向拽動時，另外一個方向的滾動則被鎖定了。可是若是首次拽動是斜着的，那麼則不會鎖定方向。

• keyboardDismissMode: 當拖動發生時，鍵盤的消失模式，默認值是不消失。

• pagingEnabled:是否使用分頁機制，默認值爲NO。當設置爲YES時，會按照scrollView的寬度對內容視圖進行分頁。

• decelerationRate: 手指滑動後擡起，頁面的減速速率。可使用UIScrollViewDecelerationRateNormal和UIScrollViewDecelerationRateFast常量值來設置合理的減速速率。

特殊的ScrollView

除了這些基本的ScrollView，咱們經常使用的新聞客戶端或者待辦事項軟件，都會有列表視圖，也就是UITableView，也是一種ScrollView，它繼承了UIScrollView的特性，又有本身的獨特性。除了列表視圖，還有瀑布流視圖UICollectionView，也相似，將來再詳細剖析。