作者:blue
v 信号: Mojitok8275
版权声明:本文图文为博主原创,转载请注明出处。
吸顶效果是各家 App 或多或少都会用的一个交互,这种交互也常见于 PC、H5,可以说是一种通用性很强的前端交互体验,相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个,因为在嵌套布局中滑动连贯性处理得非常好,今天我们就来实现同样的交互效果。
这篇文章我会讲些什么
- 对于吸附效果实现的思路
- 3 个版本的 NestedScrollingParent、NestedScrollingChild 简单介绍
- 嵌套组件滑动连贯性(一致性)的处理(事件分发、Fling 等)
- 交互的优化问题
首先,先看一下我们实现的效果图:
这里只介绍我们实现过程中的思路,以及部分代码,源码请查看 NestedCeilingEffect,欢迎建议、Issues、Star
1、实现滑动吸顶效果的简单分析
对于吸顶效果,首先我们要先创造出 “顶”
来,那么如何创造 “顶”
呢?常见的实现方式有很多,比如:
- 通过两个相同的顶部控件显示或隐藏来实现
- 通过动态 layout 顶部控件来实现
- 通过重写 ItemDecoration 来实现
- 通过 CoordinatorLayout 协调子布局来实现
这些方式或多或少在某些方面有一些场景上的限制,这次我们采用另外一种方式来实现 “顶”
的效果,这里先卖一个关子。