仿京东、淘宝首页，经过两层嵌套的RecyclerView实现tab的吸顶效果

为何会有这篇文章

以前写过一篇文章使用CoordinatorLayout过程当中遇到的两个问题以及浅析CoordinatorLayout工做机制，这篇文章上主要讲了经过CoordinatorLayout实现tab吸顶的效果时遇到的问题，效果跟京东、淘宝首页相似，只不过实现方法不一样而已，可是使用CoordinatorLayout来实现是会有很多细节问题是很难处理好的，下面会详细介绍。

首先咱们能够简单看下京东首页的效果gif，来看看咱们究竟是要实现什么样的效果：

京东首页的tab筛选区将feed分为两个部分，上面是各类不一样item，tab的下半部分能够左右横滑，而且下拉能够加剧更多，只要网络有数据的状况下理论上是能够无限下拉的。

其实用CoordinatorLayout来实现tab吸顶，若是能将一些细节问题处理好的话，其实大体能够实现相似京东首页的这个效果，具体细节问题能够参考文章开头说的以前的文章，文章里讲了下使用CoordinatorLayout来实现相似效果遇到的动画抖动问题以及页面回弹问题以及对应的解决方法。

那么为何会不采用CoordinatorLayout来实现，转而采用嵌套RecyclerView的方式呢？

首先咱们来看下CoordinatorLayout实现的大体布局：

一个问题是从AppBarLayout滑动效果是不能传递到下面的ViewPager里去的，我尝试了各类方式都没能解决掉这个问题，能够简单看下Demo效果图：

从gif图大体能够看到AppBarLayout滑上去以后惯性消失了，tab下面的区域是不能接着滚动的。

这个惯性消失的问题，我在网上找到了一个一篇解决惯性消失的文章以下支付宝首页交互三部曲3实现支付宝首页交互,实现方式大体是本身把CoordinatorLayout这套机制再实现了一遍，由于是本身实现的，里面的一些机制是比较方便改动的，它处理惯性这个问题的逻辑大体是将AppBarLayout中未消费的y轴偏移量拿出来再交由RecyclerView去滑动，代码以下：

mHeaderView.setOnHeaderFlingUnConsumedListener(new APHeaderView.OnHeaderFlingUnConsumedListener() {
    @Override
    public int onFlingUnConsumed(APHeaderView header, int targetOffset, int unconsumed) {
        APHeaderView.Behavior behavior = mHeaderView.getBehavior();
        int dy = -unconsumed;
        if (behavior != null) {
            mRecyclerView.scrollBy(0, dy);
        }
        return dy;
    }
});
复制代码

这里因为篇幅缘由，就不展开详细介绍了，感兴趣地同窗能够点开上面的连接去研究研究，文章中也贴出了GitHub地址。

咱们从新回到咱们一开始的问题，为何想替换掉CoordinatorLayout，另一个问题是CoordinatorLayout这种实现相对比较简单，可是会致使页面的嵌套层级很深，咱们从上面贴出来的布局来看，view嵌套的层级特别深，并且若是咱们要实现相似京东或者淘宝首页这样的效果，在TabLayout上面的区域，也就是下图箭头标注的地方必需要采用RecyclerView的来实现，由于tab上半部分的内容和个数都是不肯定的，使用RecyclerView才比较方便，可是这样页面的层级就更深了，加载速度也变得更慢了。

如何实现

要抛弃CoordinatorLayout，那么如何实现呢？

咱们用Android Studio中的Layout Inspector工具看了下京东首页的布局，发现的确是采用两层RecyclerView嵌套来实现的，展现的布局大体以下所示：

那么接下来是怎么去实现这个效果了。其实一开始我觉得要采用嵌套滚动这套机制来实现，后来发现不采用嵌套滚动机制也是能够实现的。

如今咱们能够大体构造这样一个布局：

咱们把ViewPager以及TabLayout这一块做为外部RecyclerView的一个item，ViewPager可能会有个多个内部RecyclerView，只要咱们能让外部RecyclerView和内部RecyclerView的滑动事件正确分发基本就能够解决这个问题了。

若是只是构造出这个布局出来，咱们发现内部的RecyclerView都不会显示出来，由于滑动彻底由外部RecyclerView接管了。

那么重点来了，这种状况如何处理？

其实RecyclerView的LayoutManager中有这两个方法用于判断RecyclerView在水平方向上和竖直方向上是否能够滚动的。

public boolean canScrollHorizontally() {
    return false;
}

public boolean canScrollVertically() {
    return false;
}
复制代码

而后LayoutManager有各类不一样的实现LinearLayoutManager，StaggeredGridLayoutManager等

这个LayoutManager中的canScrollVertically和canScrollHorizontally在RecyclerView的onInterceptTouchEvent中是会拿来做判断，判断当前RecyclerView是否须要处理滑动事件的。

还有一点须要注意：咱们处理内外两层RecyclerView的滑动冲突问题，主要是想解决下面两种场景：1、手指上滑时，当外部RecyclerView滑动底部的时候，内部的RecyclerView能继续去响应用户的滑动，由于内部的RecyclerView理论上是能够无限滚动的；2、手指下滑时，当内部的RecyclerView滑动到顶部的时候，外部的RecyclerView可以继续响应用户的下滑事件。

其实上面已经说出了如何处理嵌套RecyclerView的最重要的点，其余的部分至关于都是一些细节的处理了。

在外部RecyclerView(下面成ParentRecyclerView)中的重写LayoutManager的canScrollVertically方法以下：

fun initLayoutManager() {
    val linearLayoutManager = object :LinearLayoutManager(context) {

        override fun canScrollVertically():Boolean {
            //找到当前的childRecyclerView
            val childRecyclerView = findNestedScrollingChildRecyclerView()
            //只有当前childRecyclerView滑动到顶部才认为ParentRecyclerView是能够竖直方向是能够滚动的
            return childRecyclerView == null || childRecyclerView.isScrollTop()
        }

    }
    linearLayoutManager.orientation = LinearLayoutManager.VERTICAL
    layoutManager = linearLayoutManager
}
复制代码

在内部RecyclerView(如下称ChildRecyclerView)中定义了isScrollTop()，用于判断ChildRecyclerView是否滚动到顶部。

fun isScrollTop(): Boolean {
    //RecyclerView.canScrollVertically(-1)的值表示是否能向下滚动，false表示已经滚动到顶部
    return !canScrollVertically(-1)
}
复制代码

另外，在ParentRecyclerView的onTouchEvent方法中：

override fun onTouchEvent(e: MotionEvent): Boolean {
        if(lastY == 0f) {
            lastY = e.y
        }
        if(isScrollEnd()) {
            //若是父RecyclerView已经滑动到底部，须要让子RecyclerView滑动剩余的距离
            val childRecyclerView = findNestedScrollingChildRecyclerView()
            childRecyclerView?.run {
                val deltaY = (lastY - e.y).toInt()
                if(deltaY != 0) {
                    scrollBy(0,deltaY)
                }
            }
        }
        lastY = e.y
        return try {
            super.onTouchEvent(e)
        } catch (e: Exception) {
            e.printStackTrace()
            false
        }
    }
复制代码

关于滑动事件主要代码就是上面这些，具体能够能够看看项目代码NestedRecyclerView。

还有关于RecyclerView的fling部分，在RecyclerView的onScrollStateChanged回调中监听y轴的总的偏移量totalDy，而后在RecyclerView不滚动的时候交由内部或者外部RecyclerView去fling，这里就不赘述了，具体能够看项目的代码。

最后贴上项目的运行gif图展现：

最后

写做不易，欢迎你们点赞，若是有问题，欢迎提出一块儿讨论，您的点赞是我写做的最大动力，感谢！