Android使用CoordinatorLayout解决列表跳动

开发中我们经常会遇到这样一件事情，比如我的这个界面有3个Tab，三个Tab对应着不同的列表，同时共享一个header。

常规的做法就是设计一个recyclerview或者listview将header添加进去。

但这样存在一个问题就是如果切换不同的数据源，这个recyclerview或者listview在数据量少的情况下会发生界面的跳动，可以看到当点击第三个按钮由于数据量少，界面跳动到了头部位置，这种情况会造成不好的用户体验。

unstable_list.gif

更好的做法是将header布局和list分开，这样切换list的时候就不会造成这种问题。但是要解决嵌套滑动的问题，自己写事件分发非常麻烦。

接下来介绍一种google官方的方法来解决嵌套滑动的问题。

首先我们要引入Coordinatorlayout和AppBarLayout

在app的build.gradle中添加

implementation 'com.android.support:design:28.0.0'

另外值得注意的是，AppBarLayout实际上现在已经从google.support.design包中移除了，放到了Google2018年推出的com.google.android.material:material:1.0.0包中，但是在引入这个包的时候，会存在与AndroidX的编译冲突，我无法解决。

google的推荐做法是引入com.android.support:design:28.0.0这个包，注意你的编译sdk也要选择28

If you don't want to switch over to the newandroidxandcom.google.android.material packages yet, you can use Material Components via the com.android.support:design:28.0.0dependency.

下面是主要的布局文件
你的头布局文件一定要放在AppBarLayout中，这里有一个问题如果直接使用include标签使用layout属性加入头布局并设置app:layout_scrollFlags="scroll"属性会存在无效的问题，原因不明，可以使用在外层包裹一个Framlayout并设置app:layout_scrollFlags="scroll"属性的做法解决
同时在recyclerview中添加属性app:layout_behavior="@string/appbar_scrolling_view_behavior"即可

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <FrameLayout
                app:layout_scrollFlags="scroll"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <include layout="@layout/header" />
            </FrameLayout>

        </android.support.design.widget.AppBarLayout>


        <android.support.v7.widget.RecyclerView
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </android.support.design.widget.CoordinatorLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/btn_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/btn_3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
    </LinearLayout>
</FrameLayout>

最终效果

stable_list.gif