模仿 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 作相应设置。那么最后的代码就是这样了:

就是这样。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,067评论 4 62
  • 她于1986年出生,2005年参加一档综艺节目《超级女声》,荣获成都赛区季军,从此红遍大半个中国,没错,她就是笑面...
    玉儿说阅读 443评论 0 0
  • 出处:嘿店卖家后台 亮点:编辑内容时操作功能隐藏,减少主任务无关元素的干扰;导航使用深色背景,与主内容深度区分,利...
    黑白_3a69阅读 113评论 0 0
  • 原创知乎http://www.zhihu.com/question/35943017/answer/6576770...
    葉億阅读 972评论 0 2
  • 五爷没的那天是八月十五。所有人都去了,白茗带着丢丢,顾萧带着张梦辰。下午的时候,苏荷突然做了个决定,于是硬拽着二饼...
    佳期未阑阅读 320评论 0 0