仿汽车之家首页的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来判断方向和滑动的距离从而控制划线的方向和线的渐变长度。

滑动的逻辑代码为:

滑动逻辑代码


划线的逻辑代码为:

划线逻辑代码
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容