1. 程式人生 > >OCUI界面設計:滾動視圖與分頁控件初探

OCUI界面設計:滾動視圖與分頁控件初探

ews hid 底層 tab gin 返回頂部 信息展示 proc 整合

滾動視圖(UIScrollView)

簡單介紹

1、UIScrollView滾動視圖能夠排列並顯示超出自身顯示範圍的內容。

2、UIScrollView內部整合了多種手勢來達到豐富的界面展示效果。

3、UITableView、UITextView都繼承於UIScrollView。

UIScrollView例子

1、上下滾動:如信息界面或者設置界面。

技術分享圖片

技術分享圖片

2、左右滾動:如音樂播放器裏面的專輯信息展示。

技術分享圖片

UIScrollView實現機制

1、視圖被加入到父視圖上進行顯示。超出父視圖邊界的部分將被隱藏。

技術分享圖片

2、子視圖在滾動視圖中的實際位置滿足公式:

CompositedPosition.x = View.frame.origin.x - Superview.bounds.origin.x;

CompositedPosition.y = View.frame.origin.y - Superview.bounds.origin.y;

技術分享圖片

UIScrollView初始化及使用

初始化

- (id)initWithFrame:(CGRect)frame;

經常使用屬性

  • contentOffset:設置當前可見內容偏移位置

  • contentSize:設置當前內容空間大小

  • contentInset:設置內容空間偏移量

  • pagingEnabled:設置是否進行分頁

  • scrollEnabled:設置能否夠滾動

  • showsHorizontalScrollIndicator:設置是否顯示橫向位置指示器

  • showsVerticalScrollIndicator:設置是否現實縱向位置指示器

  • delegate:設置代理

  • directionalLockEnabled:設置是否鎖定朝向

  • bounces:設置是否回彈

  • indicatorStyle:設置朝向指示器樣式

  • minimumZoomScale:設置最小縮放

  • maximumZoomScale:設置最大縮放

ContentOffset(偏移量)、ContentSize(文本內容)示意圖

技術分享圖片

UIScrollViewDelegate

1、通過實現UIScrollViewDelegate協議方法能夠對UIScrollView內部大量事件進行監聽。在方法內部運行自己定義操作

// 滾動中
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

// 開始拖動
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

// 結束拖動
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

// 停止滾動
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;

// 開始減速
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView; 

// 停止減速
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView; 

// 滾動視圖是否同意點擊狀態欄自己主動返回至頂部
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;

// 滾動視圖點擊狀態欄自己主動返回至頂部
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;  

UIScrollVieweasy被忽略的小技巧

scrollsToTop屬性

1、相信細心的開發人員都會發現scrollView自帶一個功能,當用戶點擊頂部的狀態欄時,scrollView的ContentOffset.y軸會自己主動滾動到初始位置返回頂部,通過scrollsToTop屬性可進行配置,默認YES。

解決點擊狀態欄時ScrollView自己主動滾動到初始位置失效辦法

1、返回功能對用戶來說非常有用,尤其是在scrollView(TableView、WebView、CollectionView一切繼承scrollView的控件)展示的內容非常多,當用戶翻看非常久以後。想回到最頂部時,僅僅需單擊一下頂部的狀態欄位置就能夠輕松返回到頂部(這裏吐槽下,貌似非常多用戶都不知道有這個功能)。而不用使勁用手滑動到頂部,但是功能在當前控制器有多個scrollView(TableView, WebView, CollectionView一切繼承scrollView的控件)的時候就會失效。解決的方法就是將不須要的滾動視圖的scrollsToTop屬性置為NO就可以,僅僅保留最底層的滾動視圖scrollsToTop屬性為YES。

分頁控件(UIPageControl)

1、UIPageControl稱為分頁控件,通常和UIScrollView配合使用,用於指示頁面總數及當前頁指示

UIPageControl例子

技術分享圖片

UIPageControl初始化方法

- (id)initWithFrame:(CGRect)frame;

UIPageControl經常使用屬性

  • numberOfPages:設置顯示總頁數

  • currentPage:設置當前頁數顯示

  • pageIndicatorTintColor:設置總頁數指示色

  • currentPageIndicatorTintColor:設置當前頁指示色

  • hidesForSinglePage:設置當僅僅有一個界面的時候是否因此指示器,默覺得NO

OCUI界面設計:滾動視圖與分頁控件初探