Android 协调布局

test.gif

依赖

implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0" //协调布局

//最外层使用 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"    //设置在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"   //设置锚点
        android:layout_margin="10dp"
        android:backgroundTint="#D10F0F"  
        android:src="@mipmap/ic_launcher"
        app:layout_anchorGravity="right|bottom|end"   //根据锚点定位位置
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

layout_scrollFlags 属性

1、scroll：影响向下滚动（默认不设置的值）
Child View 伴随着滚动事件而滚出或滚进屏幕。
注意两点：
第一点，如果使用了其他值，必定要使用这个值才能起作用；
第二点：如果在这个child View前面的任何其他Child View没有设置这个值，那么这个Child View的设置将失去作用
发生向下滚动是，优先滚动Scrolling View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动

2、enterAlways ： 影响向下滚动
对比scroll和scroll | enterAlways设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，
效果：当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动

3、enterAlwaysCollapsed：影响向下滚动
一般：scroll|enterAlways|enterAlwaysCollapsed
child View需设定最小值，即minHeight。
效果：向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全

4、exitUntilCollapsed：影响向上滚动
这里也有最小高度，即有没有设置minHeight，一般不设置
效果：发生向上滚动时，Child View向上滚动退出直到最小高度，然后Scrolling View开始滚动。一般minHeight不设置，所以它就会完全滚出屏幕

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:固定模式，在折叠的时候最后固定在顶端。