前言
在上篇文章中,我们介绍了CoordainatorLayout下的Behavior机制,为了帮助大家更好的理解并运用Behavior,现在我们通过一个Demo,来巩固我们之前学习的知识点。
该博客中涉及到的示例,在NestedScrollingDemo项目中都有实现,大家可以按需自取。
效果展示
先看一下我们需要实现的效果吧,如下图所示:
友情提示:Demo中涉及到的控件为CoordinatorLayout、TextView、RecyclerView。文章都会围绕这三个控件进行讲解。
从Demo效果来看,这是非常简单的嵌套滑动。如果采用我们之前所学的NestedScrollingParent2
与NestedScrollingChild2
实现接口的方式。我们能非常迅速的解决问题。但是如果采用自定义Behavior的话,那么就稍微有点难度了。不过不用担心,只要一步一步慢慢分析,就总能解决问题的。
RecyclerView布局与测量的分析
在Demo中,RecyclerView与TextView开始的布局关系如下图所示:
根据在文章自定义View事件篇进阶篇(三)-CoordinatorLayout与Behavior中我们所学的知识点,我们知道CoordinatorLayout对子控件的布局是类似于FrameLayout的,所以为了保证RecyclerView在TextView的下方显示,我们需要创建属于RecyclerView的Behavior,并在该Behavior的onLayoutChild
方法中处理RecyclerView与TextView的位置关系。
除了解决RecyclerView的位置关系以外,在该Demo中,我们还可以看出,RecyclerView与TextView之间有着一个联动的关系(这里指的是RecyclerView与TextView之间的位置关系,而不是RecyclerView中的内容)。随着TextView逐渐上移的时候,下方的RecyclerView也跟着往上移动。那么我们可以确定的是RecyclerView必然是依赖TextView的。也就是说我们需要重写Behavior的layoutDependsOn
与onDependentViewChanged
方法。
确定一个控件(childView1)依赖另外一个控件(childView2)的时候,是通过
layoutDependsOn(CoordinatorLayout parent, V child, View dependency)
这个方法。其中child是依赖对象(childView1),而dependency是被依赖对象(childView2),该方法的返回值是判断是否依赖对应view。如果返回true。那么表示依赖。反之不依赖。一般情况下,在我们自定义Behavior时,我们需要重写该方法。当layoutDependsOn
方法返回true时,后面的onDependentViewChanged
与onDependentViewRemoved
方法才会调用。
除了考虑以上因数以外,我们还需要考虑RecyclerView的高度。观察Demo,我们可以看出,RecylerView在移动前后,始终都是填充整个屏幕的。为了保证RecylerView在移动过程中,屏幕中不会出现空白(如下图所示)。我们也需要在CoordinatorLayout测量该控件的高度之前,让控件自主的去测量高度。也就是重写RecylerView对应Behavior中的onMeasureChild
方法。
RecyclerView的Behavior代码实现
分析了RecyclerView的Behavior需要重写的内容后,我们来看看具体的Behavior实现类HeaderScrollingViewBehavior
。为了帮助大家理解,我将RecyclerView的Behavior拆成了几个部分,代码如下所示:
查看该Behavior完整代码,请点击—>HeaderScrollingViewBehavior
1 | public class HeaderScrollingViewBehavior extends CoordinatorLayout.Behavior<View> { |
注意:在xml引用自定义Behavior时,一定要声明构造函数。不然在程序的编译过程中,会提示知道不到相应的Behavior。
layoutDependsOn
方法的逻辑非常简单。就是判断依赖的对象是否是TextView。我们继续查看该类中的onMeasureChild
方法。代码如下所示:
1 |
|
测量逻辑的基本步骤:
- 获取当前控件的测量模式,判断是否采用的
match_parent
或者wrap_content
。(对于精准模式,我们不用考虑,控件是否填充屏幕) - 当满足条件1,获取当前RecyclerView所依赖的header(TextView),根据当前TextView的高度,计算出控件A的实际高度(RecyclerView的父控件可用的高度
-
TextView的高度+
TextView的滚动范围)
在onMeasureChild
方法中,我省略了部分方法的介绍,如findFirstDependency
、getScrollRange
方法。这些方法在NestedScrollingDemo项目中都有实现。大家可以按需自取。
我们继续查看HeaderScrollingViewBehavior
类中的onLayoutChild
方法,代码如下所示:
1 |
|
onLayoutChild
方法逻辑也不算复杂,根据当前所依赖的header(TextView)的位置,将RecyclerView设置在TextView下方。我们继续查看RecyclerView与TextView的联动处理。也就是onDependentViewChanged
方法。代码如下所示:
1 |
|
在该方法中,我们需要通过TextView的Behavior(NestedHeaderBehavior
),并获得TextView的实际偏移量(上述代码中的getOffset()
)。通过该偏移量我们可以重新设置RecyclerView的位置。当然,改变控件位置的方式有很多种,我们可以使用setTransationY
或View.offsetTopAndBottom
及其他方式,大家可以采用自己喜欢的方式。因为涉及到TextView中Behavior的偏移量。那下面我们就来看看TextView对应Behavior的分析与实现吧。
TextView嵌套滑动的分析
在整个Demo中,TextView的嵌套滑动效果并不复杂。这里我们就从向上与向下两个方向来介绍。
- 向上滑动:
只有当TextView滑动至屏幕外时,RecyclerView才能处理内部内容的滚动。 - 向下滑动:
当TextView已经被划出屏幕且RecylerView中的内容不能继续向下滑动时,那么就将TextView滑动至显示。否则RecyclerView单独处理内部内容的滚动。
TextView的Behavior代码实现
在讲解TextView的Behavior的代码实现之前,我们需要回顾一下在CooordinatoLayout下嵌套方法的传递过程,如下图所示:
通过回顾流程,在结合本文例子中展示的效果,我们需要重写Behavior中的onStartNestedScroll
与onNestedPreScroll
和onNestedScroll
三个方法。来看TextView的NestedHeaderBehavior
实现。代码如下所示:
查看该Behavior完整代码,请点击—>NestedHeaderBehavior
1 | public class NestedHeaderBehavior extends CoordinatorLayout.Behavior<View> { |
TextView中NestedHeaderBehavior类的声明与RecyclerView中的Behavior基本一样。因为我们需要将偏移量传递给RecyclerView,所以在NestedHeaderBehavior
的onLayoutChild方法中,我们去创建了关于RecyclerView的弱引用,并设置了mOffset
变量来记录TextViwe每次滑动的偏移量。如何获取RecyclerView,可以查看项目中源码的实现。接下来,我们继续查看相关嵌套方法实现。
1 |
|
在onStartNestedScroll
方法中,我们设置了当前控件,只能拦截竖直方向上的嵌套滑动事件。继续查看onNestedPreScroll
方法。代码如下所示:
1 |
|
onNestedPreScroll
方法中的逻辑较为复杂。不急我们慢慢分析:
- 首先我们得到当前TextView的Top高度(
currentTop
)。然后根据当前偏移距离dy
,计算出TextView新的Top高度(newTop
)。 - 如果
dy>0
,也就是向上滑动。我们判断偏移后的Top(newTop
)高度是否大于负
的TextView的测量的高度。
因为是向上滑动,当TextView移出屏幕后,通过调用getTop方法获取的高度肯定为负数。这里判断是否大于等于
-child.getHeight
,表示的是当前TextView没有超过它的滚动范围(-child.getHeight到0)。
- 如果
newTop >= -child.getHeight()
,则TextView消耗掉dy
,通过ViewCompat.offsetTopAndBottom(child, -dy)
来移动当前TextView,接着记录TextView位置的偏移量(mOffest
),最后通过调用CoordinatorLayout下的dispatchDependentViewsChanged
方法,通知控件RecyclerView所依赖的TextView发生了改变。那么RecyclerView收到通知后,就可以拿着这个偏移量和TextView一起联动了。 - 如果
newTop< - child.getHeight()
,表示在当前偏移距离dy
下,如果TextView会超过它的滚动范围。那么我们就不能使用当前dy
来移动TextView。我们只能滚动剩下的范围,也就是child.getHeight()+
currentTop,(这里使用加号,是因为滚动范围为-child.getHeight
到0
)。
- 如果
dy<0
,表示向下滑动,只有在target(RecyclerView)不能向下滑动且TextView已经部分移出屏幕时,我们的TextView才能向下滑动。这里的处理方式基本和上滑一样,这里就不再进行介绍了。我们继续查看最后的方法onNestedScroll
方法。
1 |
|
onNestedScroll
方法中,我们需要处理RecyclerView向下方向上未消耗的距离(dyUnconsumed
)。同样根据当前偏移记录计算出TextVie新的Top高度,计算出是否超出其滚功范围范围。如果没有超过,则TextView向下偏移距离为-dyUnconsumed
,同时记录偏移量(mOffset=-dyUnconsumed
),最后通知RecyclerView,TextView的位置发生了改变。反之,当前TextView的top的值是多少,那么TextView就向下偏移多少。
最后
在该文章中,我着重讲解了相应Behavior中比较重要的一些方法。一些不是那么重要的辅助方法,我并没有做过多的介绍。建议大家配合NestedScrollingDemo项目中的源码理解该篇文章,我相信肯定是事半功倍的。
最最后
关于嵌套滑动、CoordinatorLayout、Behavior的知识点基本介绍完毕了。我相信大家以后再遇见一些嵌套滑动的问题。都能够轻松的解决了。可能很多小伙伴会好奇,为什么没有接着讲AppBarLayout与CollapsingTollbarLayout的原理及使用。其实原因非常简单,因为上述的两个控件的实现原理,其实是依托于CoordinatorLayout与自定义Behavior罢了。授人以鱼,不如授人以渔。AppBarLayout与CollapsingTollbarLayout的使用及原理。就算给大家留的课后思考题吧。谢谢大家对这系列的关注。Thanks。