iOS UIScrollView 你可能不知道的奇技淫巧
iOS 的 UIScrollView
可以说是十分强大,巧妙地运用它可以得到一些意想不到的效果。本文将举几个 ScrollView 不常见运用的例子。
自带信息应用
这个界面既可以上下卷动,也可以左右滑动拉出发送时间。
P.S. 气死宝宝了,我做了一组精美的 gif,但是大小都超出简书限制.....无语,大家就脑补一下效果吧。
这个效果大体看一下就非常像一个很大的 ScrollView,可以四个方向都能滑动。但是 UITableView
只能上下滚动,硬要修改那就是大手术,不推荐这样做。因此我想到的方法是先创建一个 ScrollView,将其 contentSize
设置为 TableView 的 contentSize
,并将其宽度再设置大一个像素,这样左右方向也可以滑动了。然后监听 ScrollView 的滚动事件,将其 contentOffset.y
绑定到 TableView 的 contentOffset.y
上, 那么 contentOffset.x
就可以来设置每个 cell 的内部效果了。
下面我们看看代码:
前半部分很简单,就是一个 TableView 的初始化,下面是我们的重点,我创建了一个 UIScrollView
,让其 frame 与 TableView 的一致,Inset 也需要一致,然后设置代理来监听滚动事件。
那么最后一句是什么意思呢?
因为 ScrollView 会拦截其下面的 View 的触摸事件,这样我们的 Cell 就无法被选中了。因此我们必须让 ScrollView 的 userInteractionEnabled
属性为 false
,这样它就不响应并拦截触摸事件了,但是谁来让它滑动呢?好在 iOS 把它内部的一个 UIPanGestureRecognizer
开放了出来,我们就可以将其嫁接到 TableView 的身上,这样 TableView 就既可以响应点击,也可以响应滚动了。
紧接着,我们需要知道 TableView 的内容有多大,这个大小需要计算,那么什么时候这个大小会被计算完呢?就是在下面这个代理方法被调用时:
我们更新 ScrollView 的
contentSize
。
然后我们监听 ScrollView 的滚动事件:
这就应该很简单了,分别将 x、y 应用到响应的属性即可,y 轴就给 TableView,让其可以上下卷动,x 轴就给每个 cell,让其做自己的处理。
最终效果如下:(不动右键新标签打开)
主页面 Spotlight 效果
先看最终效果:(不动右键新标签打开)
实现和上面差不多,开头声明部分一致,代理方法如下:
这里为了实现吸附效果,我用到了 scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>)
这个方法,它的作用是通知代理用户已经松开手指,现在视图将会以一个速度卷动到一个目标位置,并且这个目标位置是可以用指针修改的。所以我只需判断一下视图将会滚动到什么位置,如果超过一个临界值,就让它完全滚动出来,否则就滚动回去。
本文通过这两个小例子希望能起到抛砖引玉的作用,其实许多效果的实现都可以牵扯到 ScrollView 的运用。最后还是推荐大家关注一下 WWDC,很多 Session 都很有启发性。
参考 Session:
WWDC 2014 - Session 235: Advanced Scrollviews and Touch Handling Techniques
WWDC 2013 - Session 217: Exploring Scroll Views on iOS 7
WWDC 2012 - Session 223: Enhancing User Experience with Scroll Views
WWDC 2011 - Session 104: Advanced ScrollView Techniques