test.gif

依賴

implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0" //協(xié)調(diào)布局

//最外層使用 CoordinatorLayout 
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity3">

        <com.google.android.material.appbar.AppBarLayout   //頭部部分需要使用 AppBarLayout   容器
            android:id="@+id/appbar"
            android:background="@color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            
            <com.google.android.material.appbar.CollapsingToolbarLayout    //折疊 Toolbar 控件
                android:id="@+id/main.collapsing"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                app:collapsedTitleGravity="left"   //titlebar 對齊方式
                app:contentScrim="#ECB2B2"   //titlebar 背景顏色
                app:expandedTitleMarginStart="60dp"   //展開的時候title的位置
                app:expandedTitleMarginBottom="60dp"
                app:title="tttt"    //title
                app:layout_scrollFlags="scroll|exitUntilCollapsed"   //詳見下面
            >  

                <ImageView
                    android:id="@+id/main.backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/icon"
                    app:layout_collapseMode="parallax"   //詳見下面
                    />

                <androidx.appcompat.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    />


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

        </com.google.android.material.appbar.AppBarLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rec"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"    //設(shè)置在appbar的下面
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </androidx.recyclerview.widget.RecyclerView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        app:layout_anchor="@id/appbar"   //設(shè)置錨點
        android:layout_margin="10dp"
        android:backgroundTint="#D10F0F"  
        android:src="@mipmap/ic_launcher"
        app:layout_anchorGravity="right|bottom|end"   //根據(jù)錨點定位位置
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

layout_scrollFlags 屬性

1、scroll：影響向下滾動（默認不設(shè)置的值）
Child View 伴隨著滾動事件而滾出或滾進屏幕。
注意兩點：
第一點，如果使用了其他值，必定要使用這個值才能起作用；
第二點：如果在這個child View前面的任何其他Child View沒有設(shè)置這個值，那么這個Child View的設(shè)置將失去作用
發(fā)生向下滾動是，優(yōu)先滾動Scrolling View，當優(yōu)先滾動的一方已經(jīng)全部滾進屏幕之后，另一方才開始滾動

2、enterAlways ： 影響向下滾動
對比scroll和scroll | enterAlways設(shè)置，發(fā)生向下滾動事件時，前者優(yōu)先滾動Scrolling View，后者優(yōu)先滾動Child View，
效果：當優(yōu)先滾動的一方已經(jīng)全部滾進屏幕之后，另一方才開始滾動

3、enterAlwaysCollapsed：影響向下滾動
一般：scroll|enterAlways|enterAlwaysCollapsed
child View需設(shè)定最小值，即minHeight。
效果：向下滾動時，Child View先向下滾動最小高度值，然后Scrolling View開始滾動，到達邊界時，Child View再向下滾動，直至顯示完全

4、exitUntilCollapsed：影響向上滾動
這里也有最小高度，即有沒有設(shè)置minHeight，一般不設(shè)置
效果：發(fā)生向上滾動時，Child View向上滾動退出直到最小高度，然后Scrolling View開始滾動。一般minHeight不設(shè)置，所以它就會完全滾出屏幕

5、snap
Child View滾動比例的一個吸附效果。也就是說，
效果：Child View不會存在局部顯示的情況，滾動Child View的部分高度，當我們松開手指時，Child View要么向上全部滾出屏幕，要么向下全部滾進屏幕，有點類似ViewPager的左右滑動

layout_collapseMode 屬性

1.parallax:視差模式，在折疊的時候會有折疊視差效果。一般搭配layout_collapseParallaxMultiplier=“0.5”視差的明顯程度be between 0.0 and 1.0.

2.none:沒有任何效果，往上滑動的時候toolbar會首先被固定并推出去。

3.pin:固定模式，在折疊的時候最后固定在頂端。