控件多层嵌套完成上滑隐藏下拉刷新功能，TabLayout+ViewPager2+CoordinatorLayout+AppBarLayout+SmartRefreshLayout

记录一下这次项目需求做的效果，

本来只做个标签和页面的联动，用TabLayout+RecycleView，RecycleView加载几十条数据。

后来要求页面能滑动，就改成了TabLayout+ViewPager+fragment。

再后来也就是现在，需要下拉刷新和上滑隐藏头像，下拉刷新用了github上的SmartRefreshLayout，挺好用的。

上滑隐藏，昨天尝试了好几个Demo，才掌握了CoordinatorLayout+AppbarLayout的用法和想要的滑动效果，

这才把最终效果做了出来，用到的控件按照布局最外层顺序依次为 SmartRefreshLayout+CoordinatorLayout+AppbarLayout+TabLayout+ViewPager2

先上xml代码，控件加对了，效果就出来了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/gradient_bg_news"
    android:orientation="vertical">   

    <androidx.appcompat.widget.Toolbar
       android:layout_width="match_parent"
       android:layout_height="48dp"
       android:layout_marginTop="@dimen/dp_10"
       android:background="#af65ff"
     />

    <com.scwang.smart.refresh.layout.SmartRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/refreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

            <com.scwang.smart.refresh.header.ClassicsHeader
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="@color/color_f8f8f8"
            />

            <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:minHeight="?attr/actionBarSize"
                android:fitsSystemWindows="false"
                tools:context=".NewsActivity">

                <com.google.android.material.appbar.AppBarLayout
                    android:id="@+id/appbarlayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:elevation="0dp"
                    android:background="#00000000">

                    <LinearLayout
                        app:layout_scrollFlags="scroll|exitUntilCollapsed"
                        android:visibility="visible"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/dp_20"
                        android:gravity="center_vertical"     
                        android:orientation="horizontal"
                        >

                            <ImageView
                                android:id="@+id/head"
                                android:layout_width="@dimen/dp_46"
                                android:layout_height="@dimen/dp_46"
                                android:scaleType="centerCrop"
                                android:layout_gravity="center_vertical"
                                android:src="@drawable/ic_left_head" />


                        <TextView
                            android:id="@+id/tv_username"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="XX"
                            android:textSize="@dimen/dp_20"
                            android:textColor="@color/color_f8f8f8"
                            android:layout_marginLeft="@dimen/dp_10" />
                    </LinearLayout>

                    <com.google.android.material.tabs.TabLayout
                        android:id="@+id/tablayout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:tabGravity="fill"
                        app:tabMaxWidth="0dp"
                        app:tabIndicatorColor="@color/color_f8f8f8"
                        app:tabSelectedTextColor="@color/color_ffffff"
                        app:tabTextColor="@color/color_f8f8f8"
                        app:tabIndicatorFullWidth="false"
                        android:paddingBottom="@dimen/dp_5">
                    </com.google.android.material.tabs.TabLayout>
                </com.google.android.material.appbar.AppBarLayout>

                <androidx.viewpager2.widget.ViewPager2
                    android:id="@+id/viewpager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior"
                    android:background="@color/color_ffffff">
                </androidx.viewpager2.widget.ViewPager2>

            </androidx.coordinatorlayout.widget.CoordinatorLayout>
     </com.scwang.smart.refresh.layout.SmartRefreshLayout>
</LinearLayout>

这个UI主要在布局，项目需求最上面的toolbar不动，在bar以下的部分下拉刷新和上拉隐藏头像，

所以SmartRefreshLayout包含除了ToolBar外的其他所有控件。

CoordinatorLayout包含所有需要滑动的控件(即AppBarLayout和ViewPager)，

AppBarLayout包含需要隐藏的内容(如上xml隐藏的是LinearLayout里面的内容)和TabLayout。

总结需要注意的几点：

1，想要上滑隐藏，必须把AppBarLayout内想要滑上去的控件写上app:layout_scrollFlags，否则默认为不可隐藏的view。如TabLayout就不要加这个属性，滑到顶端就停了。

AppBarLayout中可加各种view,textview,imageview，需要上滑隐藏的都要写上app:layout_scrollFlags。

2，app:layout_scrollFlags="scroll|exitUntilCollapsed"，滑动隐藏效果是：向上滑动时先隐藏上方需要隐藏的内容，tab滑到顶部停下才能滑动下面显示的数据；向下滑动时，先把数据滑下来完到初始位置，才把上方隐藏的内容滑下来。scrollFlags还有几种效果 如scroll|enterAlways这个就是隐藏上方内容后下滑时，先滑下隐藏的内容才下滑数据到初始位置。其他属性自行百度，这里没用到就不废话了。

3，ViewPager必须设置app:layout_behavior="@string/appbar_scrolling_view_behavior"，否则没有效果，整个AppBarLayout中的内容好像都不显示。

4，ClassicsHeader是SmartRefreshLayout的经典下拉刷新样式，可以改变，包里有各种好看的刷新样式。

5，ViewPager中适配加载的布局必须用RecycleView或其子view，否则没效果。ViewPager中用Fragment的，就在Fragment布局中用RecycleView。

暂时想到这么多，其他想到了再补充吧。