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，让其做自己的处理。

 

最终效果如下：（不动右键新标签打开）

 

（囧，图超过了微信的最大限制 2 MB，贴不了，请大家脑补吧 ）

 

实现和上面差不多，开头声明部分一致，代理方法如下：

 

 

这里为了实现吸附效果，我用到了 scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer) 这个方法，它的作用是通知代理用户已经松开手指，现在视图将会以一个速度卷动到一个目标位置，并且这个目标位置是可以用指针修改的。所以我只需判断一下视图将会滚动到什么位置，如果超过一个临界值，就让它完全滚动出来，否则就滚动回去。

 

---

 

本文通过这两个小例子希望能起到抛砖引玉的作用，其实许多效果的实现都可以牵扯到 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