Android中可折叠工具栏布局CollapsingToolbarLayout的使用

1.使用CollapsingToolbarLayout的几点注意事项

• 在build.gradle中添加几个库的编译支持，包括appcompat-v7库(Toolbar需要)、design库(CollapsingToolbarLayout需要)、recyclerview库(主页面的RecyclerView需要)。
• 布局文件的根布局采用CoordinatorLayout，因为design库的动态效果都依赖该控件；并且该节点要添加命名空间声明xmlns:app="http://schemas.android.com/apk/res-auto"
• 使用AppBarLayout节点包裹CollapsingToolbarLayout节点，再在CollapsingToolbarLayout节点下添加Toolbar节点。
• 给Toolbar节点添加滚动属性app:layout_scrollFlags="scroll|enterAlways"，声明工具栏的滚动行为标志。
• 演示界面的页面主体使用RecyclerView控件或者NestedScrollView控件，并给该控件节点添加行为属性即app:layout_behavior="@string/appbar_scrolling_view_behavior"，表示通知AppBarLayout捕捉RecyclerView的滚动操作

2.CollapsingToolbarLayout属性

• 折叠模式属性

该属性的名称为app:layout_collapseMode，它指定了子视图(通常是Toolbar)的折叠模式，折叠模式的取值如下

折叠模式取值	说明
pin	固定模式。Toolbar固定不动，不受CollapsingToolbarLayout的折叠影响。
parallax	视差模式。随着CollapsingToolbarLayout的收缩与展开，Toolbar也跟着收缩与展开。折叠系数可以通过属性app:layout_collapseParallaxMultiplier配置，该属性为1.0时，折叠效果同pin模式即固定不动；该属性为0.0时，折叠效果等同于none模式，即也跟着移动相同距离。
none	默认值。CollapsingToolbarLayout折叠多少距离，则Toolbar也随着移动多少距离，通俗地说，就是夫唱妇随。

• 折叠距离系数属性

该属性名称为app:layout_collapseParallaxMultiplier，它指定了视差模式时的折叠距离系数，取值在0.0到1.0之间。如不明确指定，则该属性值则默认为0.5。

3.折叠布局示例--固定模式

代码基于Android中应用栏布局AppBarLayout相关知识点进行变更

修改activity_main.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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abl_title"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="#FF0000">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:title="欢乐中国年"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="#0000FF"
            app:expandedTitleMarginStart="40dp">

            <!-- 注意属性layout_collapseMode作用于Toolbar控件 -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tl_title"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#00FF00"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

4.折叠布局示例--视差模式

代码基于Android中应用栏布局AppBarLayout相关知识点进行变更

修改activity_main.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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abl_title"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="#FF0000">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:title="欢乐中国年"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="#0000FF"
            app:expandedTitleMarginStart="40dp">

            <!-- 注意属性layout_collapseMode作用于Toolbar控件 -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tl_title"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#00FF00"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>