码迷,mamicode.com
首页 > 移动开发 > 详细

iOS UIScrollView 你可能不知道的奇技淫巧

时间:2016-05-25 10:40:52      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:

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

iOS UIScrollView 你可能不知道的奇技淫巧

标签:

原文地址:http://www.cnblogs.com/fengmin/p/5525848.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!