1. 程式人生 > >IOS UIScrollView——用法詳解

IOS UIScrollView——用法詳解

UIScrollView是用來在螢幕上顯示那些在有限區域內放不下的內容。例如,在手機螢幕上顯示內容豐富的網頁或者很大的圖片。在這種情況下,需要使用者對螢幕內容進行拖動或縮放來檢視螢幕或視窗區域外的內容。

所以,ScrollView應該首先有一個視窗,用來顯示內容,其次,還要有內容本身。這裡的這個顯示視窗就是UIScrollView,這個視窗可以是整個手機螢幕,也可以只是手機螢幕的一部分割槽域(螢幕其他部分可以顯示些別的東西)。內容則是你需要檢視的圖片或者網頁等資訊檢視。通常,其大小會超過這個螢幕,正因為如此,我們才要使用UIScrollView來檢視。

使用方法

建立scrollView

先來看如何使用UIScrollView

在小視窗中顯示一副大圖。

UIScrollView-001.jpg
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,還有contentOffsetcontentInset也可以結合起來使用。需要注意的是,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 UIScrollView-002.jpg

scrollView的這種回彈機制,是可以設定的,相關的屬性為:bouncesalwaysBounceHorizontalalwaysBounceVerticaldecelerationRate

在拖動的過程中,我們還發現水平方向和垂直方向還顯示出狀態條,狀態條的顯示也是可以設定的。相關屬性為:indicatorStyleshowsHorizontalScrollIndicator showsVerticalScrollIndicatorscrollIndicatorInsets flashScrollIndicators

UIScrollView-003.jpg 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)。相關的屬性有三個:trackingdragging 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: 手指滑動後擡起,頁面的減速速率。可以使用UIScrollViewDecelerationRateNormalUIScrollViewDecelerationRateFast常量值來設定合理的減速速率。



原文連結:http://www.jianshu.com/p/bcaf5cdfaa7e