Toolbar、CollapsingToolbarLayout、AppBarlayout、CoordinatorLayout的总结

本文参考了
https://www.jianshu.com/p/bbc703a0015e
https://blog.csdn.net/mffandxx/article/details/69223021

一、只使用Toolbar、AppBarlayout、CoordinatorLayout的情况下

先贴上代码：

<?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:fitsSystemWindows="true">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:minHeight="20dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|snap"
            app:title="test"/>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:id="@+id/text"
            android:textSize="20sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

CoordinatorLayout放在最外层，AppBarLayout放在Coordinator之下，在AppBarLayout下的子view，通过添加app:layout_scrollFlags属性并设置不同的值，可以让子view实现不同的动作。

对AppBarLayout的介绍：AppBarLayout继承自LinearLayout，布局方向为垂直方向，可以当作是orientation=”vertical”的LinearLayout。

AppBarLayout可以根据滚动手势的变化控制其内部的子View进行某些动作。
这里，AppBarLayout和NestedScrollView一起放在父布局CooridinatorLayout之下。NestedScrollView必须设置layout_behavior属性，如下所示。

app:layout_behavior="@string/appbar_scrolling_view_behavior”,

举个最简单的例子，在AppbarLayout下只有一个Toolbar.这时可以设置Toolbar的属性为：

<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:minHeight="20dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:title="test"/>

如上所示，重点观察app:layout_scrollFlags。这个属性必须至少设置scroll值。常用的属性值有如下几个
1、 enterAlways。这个值表示只要（当手指）向下滑动时，toolbar就会显示出来。
2、 enterAlwaysCollapsed。这个值表示向下滑动到顶端时，toolbar才会显示出来。这个属性一般和enterAlways一起使用，效果为：当向下滑动时，会首先显示minHeight的toolbar，然后滑到顶端时，toolbar才会完全显示出来。
3、 exitUntilCollapsed。这个值表示当向上滑动时，toolbar的高度会逐渐变小，直到高度等于minHeight，然后高度不变。

二、使用CollapsingToolbarLayout的情况

使用CollapsingToolbarLayout，我们需要把CollapsingToolbarLayout添加到AppBarLayout之下，然后把Toolbar移到CollapsingToolbarLayout之下。
代码如下：

<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:fitsSystemWindows="true">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:fitsSystemWindows="true"
        >
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="pin"
                android:scaleType="centerCrop"
                android:src="@drawable/timg"
                android:fitsSystemWindows="true"/>
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:title="ttttttttt"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:id="@+id/text"
            android:textSize="20sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这里有几个要注意的地方：
1、我们把原来属于Toolbar的两条属性移动到了CollapsingToolbarLayout之下，

app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

这是因为CollapsingToolbarLayout处于AppBarLayout之下，是它的子View，上文说过AppBarLayout可以根据滚动手势的变化控制子View的动作。

2、CollapsingToolbarLayout之下可以设置app:layout_collapseMode，表示折叠模式，
pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开
parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果
（感觉一般都是用pin就ok了）

3、这里在Toolbar之前添加了一个ImageView，ScaleType设置为centerCrop，使得这张图成了CollapisingToolbarLayout的背景图。效果如下图：

5、还可以设置，使得CollapsingToolbarLayout的背景图与状态栏融为一体。
在style.xml进行设置，

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

效果如图：