UIScrollView（滾動試圖）

時間 2019-11-19

標籤 uiscrollview 滾動試圖简体版

原文原文鏈接

UIScrollView（滾動試圖）動畫

1.簡介atom

爲何有UISCrollView：在iOS開發中，因爲移動設備的屏幕大小有限，因此不能像PC同樣顯示不少內容，所以當手機屏幕須要展現的內容較多超出一個屏幕時,用戶能夠經過滾動手勢來查看屏幕之外的內容。普通的UIView不具有滾動的功能的，Apple公司就封裝了一個繼承於UIView的UIScrollView類（@interface UIScrollView : UIView <NSCoding>）。 UIScrollView的內部已經幫咱們集成了一些手勢(UIPanGestureRecognizer, UIPinchGestureRecognizer),因此咱們儘可能避免給scrollView添加手勢。 spa

滾動視圖有如下兩個主要做用：
讓用戶能夠經過拖拽手勢來觀看想看到的內容
讓用戶能夠經過捏合手勢來放大或縮小觀看的內容

用來展現超出屏幕大小內容時, 通常須要配合其餘控件來使用，如添加一個UIImageView子控件，能夠用來顯示更大的圖片；而後scrollView會自動的幫咱們去實現拖動查看所有。圖示效果以下：左圖表示指示器的介紹。rest

咱們常見的UITableView，CollectionViewUITextView（用來顯示大量的文字）也是繼承自UIScrollView。UIWebView，儘管那不是UIScrollView的直接子類，它適用UIScrollView去顯示網頁內容。blog

2.scrollView相關屬性繼承

@property(nonatomic) CGPoint contentOffset; // default CGPointZero 內容的偏移量
@property(nonatomic) CGSize contentSize; // 裏面內容的大小，也就是能夠滾動的大小，默認是0，沒有滾動效果。
@property(nonatomic) UIEdgeInsets contentInset; //設置content視圖到scrollView上左下右的邊距; 默認是(0,0,0,0)
@property(nonatomic) BOOL bounces; //默認是 yes，就是滾動超過邊界會反彈有反彈回來的效果。假如是 NO，那麼滾動到達邊界會馬上中止。 @property(nonatomic) UIScrollViewIndicatorStyle indicatorStyle; // 設置滾動條的樣式，默認是UIScrollViewIndicatorStyleDefault ，基本只是設置顏色。總共3個顏色：默認、黑、白
@property(nonatomic) UIEdgeInsets scrollIndicatorInsets;//設置滾動條的位置默認是@property(nonatomic) BOOL showsHorizontalScrollIndicator; //滾動時是否顯示水平滾動條(默認是YES)
@property(nonatomic) BOOL showsVerticalScrollIndicator;//滾動時是否顯示垂直滾動條(默認是YES)
@property(nonatomic,getter=isPagingEnabled) BOOL pagingEnabled ; //是否能夠翻頁 (默認是NO)
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled ; //是否能滾動(默認是YES)
@property(nonatomic,getter=isDirectionalLockEnabled) BOOL directionalLockEnabled; //方向是否鎖定 (默認是NO)

@property(nonatomic,readonly,getter=isDecelerating) BOOL decelerating; // returns YES if user isn't dragging (touch up) but scroll view is still moving事件

@property(nonatomic) BOOL alwaysBounceVertical; // default NO. if YES and bounces is YES, even if content is smaller than bounds, allow drag vertically 圖片

@property(nonatomic) BOOL alwaysBounceHorizontal; // default NO. if YES and bounces is YES, even if ci

@property(nonatomic) CGFloat decelerationRate NS_AVAILABLE_IOS(3_0); //設置手指放開後的減速速率開發

@property(nonatomic) CGFloat minimumZoomScale; // 表示能縮最小的倍數默認是 1.0

@property(nonatomic) CGFloat maximumZoomScale; //能放最大的倍數默認是 1.0. must be > minimum zoom scale to enable zooming

@property(nonatomic) BOOL scrollsToTop //點擊狀態欄, 能夠回到頭部（默認是YES）

其餘幾個屬性介紹

tracking

當 touch 後尚未拖動的時候值是YES，不然NO

zoomBouncing

當內容放大到最大或者最小的時候值是 YES，不然 NO

zooming

當正在縮放的時候值是 YES，不然 NO

decelerating

當滾動後，手指放開可是還在繼續滾動中。這個時候是 YES，其它時候是 NO

delaysContentTouches

是個布爾值，當值是 YES 的時候，用戶觸碰開始，scroll view要延遲一會，看看是否用戶有意圖滾動。假如滾動了，那麼捕捉 touch-down 事件，不然就不捕捉。假如值是NO，當用戶觸碰， scroll view 會當即觸發 touchesShouldBegin:withEvent:inContentView:，默認是 YES

canCancelContentTouches

當值是 YES 的時候，用戶觸碰後，而後在必定時間內沒有移動，scrollView 發送 tracking events，而後用戶移動手指足夠長度觸發滾動事件，這個時候，scrollView 發送了 touchesCancelled:withEvent: 到 subview，而後 scroView 開始滾動。假如值是 NO，scrollView 發送 tracking events 後，就算用戶移動手指，scrollView 也不會滾動。

bouncesZoom

和 bounces 相似,區別在於：這個效果反映在縮放上面，假如縮放超過最大縮放，那麼會反彈效果；假如是 NO，則到達最大或者最小的時候當即中止。

directionalLockEnabled

默認是 NO，能夠在垂直和水平方向同時運動。當值是 YES 時，假如一開始是垂直或者是水平運動，那麼接下來會鎖定另一個方向的滾動。假如一開始是對角方向滾動，則不會禁止某個方向

UIScrollView的使用過程當中有以下3個核心屬性：

contentSize：表示UIScrollView內容的尺寸,能夠滾動的範圍，通常會大於屏幕大小；（scrollView不只要設置自己的大小(frame), 還要設置一下所要顯示的內容的大小(contentSize)）
//scrollView的內容視圖的大小大於scrollView的frame的大小

//內容視圖的寬度大於scrollView的寬度，滾動視圖能夠左右滾動
//內容視圖的高度大於scrollView的高度，滾動視圖能夠上下滾動
contentInset：能夠在UIScrollView內容的四周增長額外的滾動區域，通常用來避免scrollView的內容被其它控件擋住。
contentOffset：內容左上角與scrollView左上角的間距值；
// 這個屬性是咱們之後最經常使用到的一個屬性, 修改scrollView裏面顯示的內容的位置的時候, 咱們就能夠經過修改這個屬性來實現
1.點語法設置內容的偏移量
sc.contentOffset = CGPointMake(100, 100);
2.setter方法設置內容的偏移量
- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; // animate at constant velocity to new offset

一張圖來呈現 UIScrollView的以上三個屬性

- `scrollView不能滾動的幾種狀況`

+ 沒有設置contentSize

+ scrollEnabled屬性 = NO; // 表明控件不可用

+ userInteractionEnabled屬性 = NO; // 表明控件不能和用戶交互

-UIScrollView圖片輪播器

- pagingEnabled實現分頁的本質,是按照UIScrollView的寬度或者高度來分頁的

3.協議方法

開始拖拽

滾動

結束拖拽

滾動

減速

滾動

結束滾動

@protocol UIScrollViewDelegate<NSObject>

@optional

// scrollView滾動中(這個方法, 會在滾動的過程當中一直調用, 儘可能避免在這個方法中作很複雜的處理)

- (void)scrollViewDidScroll:(UIScrollView *)scrollView; // any offset changes

// 即將開始拖動

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

// called on finger up if the user dragged. velocity is in points/millisecond. targetContentOffset may be changed to adjust where the scroll view comes to rest

// scrollView 即將結束拖動

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset NS_AVAILABLE_IOS(5_0);

// called on finger up if the user dragged. decelerate is true if it will continue moving afterwards

// 已經中止拖動

// decelerate 表示中止拖動後, 是否須要減速

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {

NSLog(@"已經中止拖動");

if (decelerate) {

NSLog(@"須要減速");

}

else {

NSLog(@"不須要減速, 中止");

}

// 即將開始減速 (中止拖動後, 慣性滑動)

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView; // called on finger up as we are moving

// 減速完成(停下來了)

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView; // called when scroll view grinds to a halt

//已經中止滾動動畫

//這個中止是經過[scrollView setContentOffset:animation]產生的動畫;

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView; // called when setContentOffset/scrollRectVisible:animated: finishes. not called if not animating

// 在scrollView上, 兩指捏合觸發, 返回一個須要縮放(放大或者縮小)顯示的視圖

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {

// 在這裏, 咱們返回想捏合的視圖

return [scrollView viewWithTag:img_tag];

}

// 開始放大或者縮小

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2); // called before the scroll view begins zooming its content

// 縮放結束時

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale; // scale between minimum and maximum. called after any 'bounce' animations

// 是否支持滑動至頂部

// 點擊了狀態欄是否須要滾動回頭部 ,默認是YES。用戶點擊狀態欄, 會觸發這個協議方法。以這個返回值爲準, 若是這裏返回YES, 那麼就回到頭部, 若是這裏返回NO, 依然不能返回頭部

// 這個協議方法的應用場景, 通常是一個界面中, 有多個scrollView的時候

- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView; // return a yes if you want to scroll to the top. if not defined, assumes YES

// 滑動到頂部時調用該方法

- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView; // called when scrolling animation finished. may be called immediately if already at top

@end

@property(nullable,nonatomic,weak) id<UIScrollViewDelegate> delegate;