OCUI界面设计:滚动视图与分页控件初探
2018-02-15 18:37
239 查看
滚动视图(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界面设计:滚动视图与分页控件结合NSTimer实现图片自动循环与无限滚动展示
- Qt qml listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
- OCUI界面设计:UIPickerView 拾取视图
- UIScrollView(滚动视图)/UIPageControl(分页控件)
- iOS 6编程-UIScrollView滚动视图和UIPageControl分页控件实现图像分页显示
- 在滚动视图上添加的多张图片,清空数组但是还有图片存在界面上,是因为清空的是滚动父控件,子控件并没有销毁,按钮和按钮上的图片还是存在?
- UI 界面设计 滚动视图
- Qt qml listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
- 滚动视图与分页控件
- iOS 6编程-UIScrollView滚动视图和UIPageControl分页控件实现图像分页显示(2)
- iOS 6编程-UIScrollView滚动视图和UIPageControl分页控件的简单应用
- Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
- 网页设计:AspNetPager控件+repeater+Ajax+存储过程实现高效分页,还有漂亮控件样式
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(10)--关键点
- pyqt4解决界面设计时控件遮挡问题
- 源码推荐(4.23):多图无缝滚动控件,多视图控制器间切换
- Android 视图切换库的使用SwitchLayout(可实现控件点击动画,和界面切换时的各种动画)
- web developer tips (50):在 Visual Studio 的设计视图绝对定位控件
- Xpage中对定制控件在设计视图下外观的定制