OCUI界面设计:滚动视图与分页控件初探

Posted zhchoutai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了OCUI界面设计:滚动视图与分页控件初探相关的知识,希望对你有一定的参考价值。

滚动视图(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界面设计:滚动视图与分页控件初探的主要内容,如果未能解决你的问题,请参考以下文章

UIScrollView 的灵敏度/滚动速度与分页

mybatis动态sql片段与分页,排序,传参的使用

自动分页滚动视图

Qt qml中listview 列表视图控件(下拉刷新上拉分页滚动轴)

如何显示IList 与分页

带有分页 iphone sdk 的 ScrollView