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 你可能不知道的奇技淫巧的更多相关文章

  1. [iOS翻译]《iOS 7 Programming Pushing the Limits》系列:你可能不知道的Objective-C技巧

    简介: 如果你阅读这本书,你可能已经牢牢掌握iOS开发的基础,但这里有一些小特点和实践是许多开发者并不熟悉的,甚至有数年经验的开发者也是.在这一章里,你会学到一些很重要的开发技巧,但这仍远远不够,你还 ...

  2. iOS开发——swift——swift与OC之间不得不知道的21点

    swift与OC之间不得不知道的21点   自6月的WWDC大会上由苹果的大神Chris Lattner向我们首次展示swift至今已经大半年时间了,虽然绝大部分软件公司代码里还都见不到一丁点swif ...

  3. [转载]或许您还不知道的八款Android开源游戏引擎

    或许您还不知道的八款Android开源游戏引擎         分类:             技术文章              2010-08-04 20:27     17430人阅读     ...

  4. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  5. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  6. 【CSS】346- 你所不知道的 CSS 阴影技巧与细节

    偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...

  7. 你所不知道的setInterval

    在你所不知道的setTimeout记载了下setTimeout相关,此篇则整理了下setInterval:作为拥有广泛应用场景(定时器,轮播图,动画效果,自动滚动等等),而又充满各种不确定性的这set ...

  8. 你所不知道的setTimeout

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...

  9. 你可能不知道的陷阱, IEnumerable接口

    1.  IEnumerable 与  IEnumerator IEnumerable枚举器接口的重要性,说一万句话都不过分.几乎所有集合都实现了这个接口,Linq的核心也依赖于这个万能的接口.C语言的 ...

随机推荐

  1. C语言学习总结(四) 剩余内容

    第六章.剩余内容 (预处理指令,宏定义,条件编译,文件操作) 预处理指令 简单的来说就是在程序编译之前需要做的事情 1.宏定义 概念: 是一个替换代码的预处理指令,可以在编译之前进行代码替换(宏展开, ...

  2. POJ 3041 Asteroids 最小点覆盖 == 二分图的最大匹配

    Description Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape o ...

  3. python获取本地ip地址的方法

    #_*_coding:utf8_*_ #以下两种方法可以在ubuntu下或者windows下获得本地的IP地址 import socket # 方法一 localIP = socket.gethost ...

  4. Let's go home

    hdu1824:http://acm.hdu.edu.cn/showproblem.php?pid=1824 题意:中文题. 题解:这一题建边要考虑两个限制条件,一个是队伍内部的,就是假如说 a,b, ...

  5. 几个字符串的误区,以及setlocale函数的使用

    转自 http://www.blogjava.net/baicker/archive/2007/08/09/135642.html 转自 http://witmax.cn/character-enco ...

  6. Qt 窗体的模态与非模态(setWindowFlags(Qt::WindowStaysOnTopHint);比较有用,还有Qt::WA_DeleteOnClose)

    概念 模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等. 1. 模态窗体 ...

  7. iframe详细用法

    <iframe>是框架的一种形式,也比较常用到. 例子1.<iframe width=420 height=330 frameborder=0 scrolling=auto src= ...

  8. Unity Kajiya Hair Shader Mod by Normals

    Shader "HairShader" { Properties { _MainTex ("Diffuse (RGB) Alpha (A)", 2D) = &q ...

  9. HTML---网页编程(2)

    前言 接着前面的HTML-网络编程1)来学习吧~~~ 色彩的表示 在计算机显示器中,使用红(red).绿(green).蓝(blue)3种颜色来构成各种各样的颜色.颜色的种类有16,256及65536 ...

  10. Android定义的路径全局变量

    Android定义的路径全局变量 ifeq (,$(strip $(OUT_DIR))) OUT_DIR := $(TOPDIR)out endif DEBUG_OUT_DIR := $(OUT_DI ...