代码改变世界

UIScrollView的滚屏

2011-06-02 09:45  cnb_mtime  阅读(659)  评论(0编辑  收藏  举报

当你需要一个能滚屏但不需要用表格来呈现的View时就需要UIScrollView,实际上UITableView继承自它。

注,有不少人想禁用UIWebView的滚屏,便想用scrollEnabled=NO来实现。实际上UIWebView不是继承自UIScrollView,而是实现了UIScrollViewDelegate协议的UIView

回到话题,UIScrollView的显示重要的有两部分,第一当然时本身的frame,第二则比较容易忽略:contentSize。前者是scrollView本身在屏幕上占的空间,而后者则代表了它能显示多大的空间,这点比较容易被忽略或者计算错误,本身没有多大的问题,但用起来感觉很不好。

Twitter的推的显示就是用了此View, 看如下的图:


这里作者用了障眼法,那个小箭头和发推人的信息实际上是一体的,而推本身的显示则用了一个frame高度等于(480-20-44-44)或更大的scrollView。只要让推的文字距离顶端留白(确定高度,约等于发推人信息栏的高度),当用户往下滚屏推时,一般只能看到箭头是一体的,效果很好,除非像上图一样滚屏过度-,-。

contentSize的默认值为CGRectZero,此时UIScrollView是不能滚屏的,但如果设置的值大于需要显示的内容的话,效果也很差。这里再拿QQ微博的客户端作反面教材:

上图中最下面的图片不能完全显示,当然你往上滚屏可以看到全部的图片,松手后就会回到图中的样子(另外还有一个页面连滚屏都不可以)。用户体验很不好。

上图是contentSize的高度设置过大,底下留了太多空白,当用户快速滚屏到最底下的时候结果得到了一片空白。更要命的是如果此时你用右上角的导航打开下一条,基本也是空白一片,这时需要重设contentOffset。

注:上面两种情况在单独打开时显示正常,只有使用本页的上下导航时有问题,可见是作者用了同一个scrollView来导航显示不同的内容,但切换内容的时候对contentSize的设定太过粗心了