zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    react-native中使用mobox数据共享
    vue cli3项目的pc自适应布局_vw
    webpack配置多页面和提取css
    react-native报错Encountered two children with the same key, `%s`.
    __proto__和prototype
    json-server配置模拟数据
    全局判断登录是否过期代码
    react-native环境搭建
    css的垂直居中常用几种方法
    进程和线程
  • 原文地址:https://www.cnblogs.com/fengmin/p/5525848.html
Copyright © 2011-2022 走看看