CoordinatorLayout+TabLayout + AppBarLayout + CollapsingToolbarLayout + ViewPager 实现悬停效果

当APP 运行起来这是效果，请看上面 .现在问题来了,我想让TabLayout悬停在顶部，同时让标题栏消失

fragment_home.xml布局如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBlack">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/homeAppBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:gravity="top"
                android:minHeight="40dp"
                app:layout_collapseMode="pin" />


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="420dp"
                android:background="@color/colorBlack"
                android:fitsSystemWindows="true"
                android:orientation="vertical"
                android:overScrollMode="never">

                <GridLayout
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:layout_marginTop="48dp"
                    android:background="@color/colorBlack"
                    android:columnCount="4"
                    android:baselineAligned="false"
                    android:rowCount="1">

                    <TextView
                        android:id="@+id/tvQuickBuying"
                        style="@style/HomeGridViewStyle"
                        android:drawableTop="@drawable/app_home_icon_quick_buying"
                        android:text="@string/app_home_quick_buying" />

                    <TextView
                        android:id="@+id/tvContractTrade"
                        style="@style/HomeGridViewStyle"
                        android:drawableTop="@drawable/app_home_icon_contract_trade"
                        android:text="@string/app_home_contract_trade" />

                    <TextView
                        android:id="@+id/tvContractData"
                        style="@style/HomeGridViewStyle"
                        android:drawableTop="@drawable/app_home_icon_contract_data"
                        android:text="@string/app_home_contract_data" />

                    <TextView
                        android:id="@+id/tvHelpCenter"
                        style="@style/HomeGridViewStyle"
                        android:drawableTop="@drawable/app_home_icon_help_center"
                        android:text="@string/app_home_help_center" />

                </GridLayout>

                <com.youth.banner.Banner
                    android:id="@+id/banner"
                    android:layout_width="match_parent"
                    android:baselineAligned="false"
                    android:layout_height="160dp" />

                <com.bbx.bmtc.views.PageIndicatorView
                    android:id="@+id/pageIndicator1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:orientation="horizontal"
                    android:baselineAligned="false"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="8dp"
                    android:layout_marginTop="6dp"
                    android:drawableRight="@drawable/app_icon_home_dropdown"
                    android:drawablePadding="6dp"
                    android:text="@string/app_home_ranking_list"
                    android:textColor="@color/colorWhite"
                    android:baselineAligned="false"
                    android:textSize="@dimen/text_size_h2" />
            </LinearLayout>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_gravity="bottom"
                android:layout_marginLeft="12dp"
                android:layout_marginRight="12dp"
                android:background="@drawable/bg_tablayout_grey">

                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/homeTabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:textAllCaps="false"
                    app:tabIndicator="@drawable/bg_tab_tab_indicator"
                    app:tabIndicatorColor="@color/bg_tablayout_glide"
                    app:tabIndicatorHeight="39dp"
                    app:tabSelectedTextColor="@color/colorWhite"
                    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                    app:tabTextColor="@color/colorWhite">

                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="38dp"
                        android:text="@string/app_home_up_ranking" />

                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="38dp"
                        android:text="@string/app_home_down_ranking" />

                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="38dp"
                        android:text="@string/app_home_24_deal_vol" />

                </com.google.android.material.tabs.TabLayout>
            </FrameLayout>

            <com.bbx.bmtc.views.HeadNavigationView
                android:id="@+id/homeHeadView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:backText="@string/app_home_title"
                app:backTextColor="@color/colorWhite"
                app:backTextSize="20"
                app:hasBack="false"
                app:layout_collapseMode="pin"
                app:rightIcon="@drawable/app_icon_home_msg" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

这时要注意几个问题:

1、CollapsingToolbarLayout上的app:layout_scrollFlags="scroll|exitUntilCollapsed"

2、Toolbar上的app:layout_collapseMode="pin" 这个主要用于占位，并且在原位置不动

3、ViewPager上的app:layout_behavior="@string/appbar_scrolling_view_behavior"

4、bg_tab_tab_indicator.xml 在drawable目录下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp" />
</shape>

5、bg_tablayout_glide.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#40FFFFFF" android:state_selected="true" />
    <item android:color="#646464" android:state_selected="false" />
</selector>

6、用于监听滑过的偏移量，方便做UI效果处理

homeAppBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { _, verticalOffset ->
    if (verticalOffset < -1000) {
        homeHeadView.visibility = View.GONE
    } else {
        homeHeadView.visibility = View.VISIBLE
    }
})

当滑动的时候，到顶部会出现下面的效果

这时候问题又来了,  viewPager里面添加的fragment内容，不能滑动，只好添加

NestedScrollView包裹内容

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorDefaultDark"
    android:fillViewport="true"
    android:overScrollMode="never">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.bbx.bmtc.views.NodataLayout
            android:id="@+id/noDataLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone" />

        <com.scwang.smartrefresh.layout.SmartRefreshLayout
            android:id="@+id/refreshLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srlEnableAutoLoadMore="false"
            app:srlEnableLoadMore="true"
            app:srlEnablePureScrollMode="true">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/pageList"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </com.scwang.smartrefresh.layout.SmartRefreshLayout>
    </LinearLayout>

</androidx.core.widget.NestedScrollView>

完美解决，哈哈