仿汽车之家首页的Scrollview的联动效果

大家好,本人是一名普通iOS程序猿,但是最近项目暂时没有什么大的变动,比较闲。总想做点什么可是又不知道从何做起,想来想去注册简书已经很长时间了但是从来没写过文章,觉得是时候做点一点点的改变了。于是。。。。。

不瞎扯了,进入正题,今天看到汽车之家app的首页导航下部有个标题模块的滑动效果做的看着挺有意思的,所以就想着自己也实现一个。顺便巩固一下自己的知识,先看代码实现的效果:

运行效果图

                                                                   github源码链接

下面来分析一下实现此效果的知识重点,便于以后自己理解和复习:

1.选中某个标题时,标题的scrollview容器自动滑动到中间位置,切当是最左边后者最右边的标题时不滑动。

中间临界点的判断就是顶部容器宽度的中心位置,而决定标题控件标题控件是否滑动是有:标题控件的中心点的x坐标、容器的内容宽度(即scroview的contentSize.width)和容器的宽度的中心位置共同决定的,一共分为三种情况:

(1)  选中标题控件的中心X - 容器scroview的宽度/2 > 0 且 容器scroview的内容宽度 -   标题控件的中心X >0  此时容器scroview进行滑动,且scroview上的选中标题控件滑动到中心位置。

(2) 选中标题控件的中心X <  容器scroview的宽度/2    此时容器scroview进行滑动,且容器scroview的偏移量X为0。

(3)选中标题控件的中心X >容器的宽度/2 且 容器的内容宽度 -   标题控件的中心X <0,此时容器scroview进行滑动,且容器scroview的偏移量X为: 容器scroview内容宽度 - 容器scroview的宽度/2,即 容器scroview滑动到最右端。

实际的示例代码:

处理逻辑代码


2.滑动底部的内容容器的scrollview时,标题scrollview容器底部的线条跟着滑动的方向做动画。

由于需要知道底部内容scroview的滑动方向,这里放弃使用scroview的代理方法,而是利用scroview上面自带的滑动手势添加target,利用CGPoint来判断方向和滑动的距离从而控制划线的方向和线的渐变长度。

滑动的逻辑代码为:

滑动逻辑代码


划线的逻辑代码为:

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,266评论 25 707
  • -引用 >初次 斜体 粗体 不知道 应用初期 这是干嘛 这又是干嘛 然后呢 再然后
    流浪如归阅读 629评论 0 0
  • 1、 上周末去老闺蜜娜娜家,看她教育孩子,觉得特别有趣。 我和娜娜在沙发上聊天,她家娃在家里四处乱窜。 我俩聊到兴...
    老苹果2阅读 353评论 1 8
  • 只有我才能听见,那 心花上翩飞的旋律, 以及你年少时记忆的鼓点。 我苦苦的询问, 像投进深谷的卵石, 久久没有回答...
    pinkpen能小勇阅读 184评论 0 1
  • 刚刚住院时候,因为医院没有VE和叶酸,暂时缺货,所以我一直吃自己买的叶酸。连续吃了15天医院还是没有货,我问了好几...
    玲玲A阅读 145评论 0 0