模仿 Clear 实现彩虹渐变的滚动列表

Clear 这款应用应该说堪称经典了，它的一个十分突出的特色就是那个渐变的列表 UI 设计，本文就将实现类似的效果，下面是最终效果图：

Figure 1. Figure 2.

是不是酷酷哒😄
随着手指卷动列表，每行的颜色就会发生变化，十分漂亮。

---

插一句题外话：从本文开始，笔者将不再直接粘贴文本代码，而采用截图的方式展现代码，一方面方便我的编辑，另一方面各位看官也不应该养成 copy-paste 的习惯。

我这里用简单的 UIViewController 来演示，首先声明一个数组来盛放需要渐变的起点颜色和终点颜色：

在viewDidLoad方法里初始化这些颜色并且对 table view 进行一些必要的设置：

这些就不用多说了，下面为了实现颜色渐变，我们需要写一个方法，传入一个位置因数，就可以计算出两个颜色之间的过渡色：

这里有个小的技巧，因为 UIColor 一旦创建，就不能从中获取 RGB 值了，所以我们曲线救国，通过 CoreGraphics 的函数来获取 RGB 值。这里用到了 CGColorGetComponents 这个函数，需要传入 CGColorRef 对象，得到的数组恰好包含了 RGB，我们直接用下标取出即可。

计算过渡色用到的公式是：

这里 progress 的取值是[0, 1]，这个值的计算我们就需要下面这个方法了：

这里传入的 view 就是每一行的 cell，我们拿到这个 cell 需要知道它相对于整个屏幕处于什么位置，所以我们用 convertRect:toView: 这个方法得到它的相对位置，取出 y 轴坐标，就能计算出上面需要的那个 progress 值。

好了，下面我们就需要构造一个 cell 了，这里为了方便，我直接在 ViewController 里构建了，没有新建新的类：

简单解释一下，前面就是设置 cell 没有选中效果，然后为了好看把 label 的字体加粗了，并且加了一个阴影。下面的两个 CAShapeLayer 主要是为了实现高光阴影的效果，也就是这个 cell 的上边有一条亮边，下边有层阴影，这些参数大家自己调教吧，我用我自己的审美已经调出了一个相对好看的效果了😂😂。

下面我们要监听 table view 滚动，每滚动一下就更新所有 cell 的颜色，需要注意的是，cell 刚创建完毕后滚动的代理方法是不会触发的，所以我们需要用到tableView:willDisplayCell:forRowAtIndexPath:这个代理方法来对每个新建的 cell 作相应设置。那么最后的代码就是这样了：

就是这样。