Android支持库CollapsingToolbarLayout

介绍

        CollapsingToolbarLayout 用于美化 Toolbar 的运行效果， 它是由Design Support 库 提 供 的。CollapsingToolbarLayout 被设计用于 AppBarLayout 的子布局，AppBarLayout 是一个垂直的 LinearLayout，只是为了实现交互动画效果它增加了一些滚动特性。AppBarLayout 只有作为 CoordinatorLayout 的直接子布局才可以正常的工作，如果 CoordinatorLayout 包含了一个不同的 ViewGroup，滚动功能将无法实现。通过 CollapsingToolbarLayout 与它的兄弟们就可以实现折叠式工具栏的运行效果了，例如，哔哩哔哩App的视频详情界面就可以通过该技术来实现，如图7.11所示，手指在屏幕中向上滑动将显示如图7.12所示的工具栏折叠效果。

XML属性

CollapsingToolbarLayout 支持的常用属性

XML属性	描述
app:collapsedTitleGravity	工具栏折叠后标题文字显示在指定位置，默认值为 left
app:expandedTitleGravity	具栏完全展开后标题文字显示在指定位置，默认值为 left+bottom
app:contentScrim	工具栏折叠后 Toolbar 显示的背景颜色
app:layout_scrollFlags	设置滚动的方式，需要滚动必须设置 scroll 值、exitUntilCollapsed 值向上滚动实现折叠效果、 enterAlways 值向下滚动时立即显示 View、enterAlwaysCollapsed值当 View 设置最小高度时该 View 以最小高度限定进入

例子

折叠式工具栏的实现

编写布局文件

• ImageView组件中的app:layout_collapseMode="parallax"属性表示在折叠的过程中图片产生错位偏移的视觉效果。
• 要设置为无标题栏的主题
• 而ToolBar组件中app:layout_collapseMode="pin"属性表示在折叠的过程中该组件位置始终保持不变。
• NestedScrollView组件不仅像ScrollView那样使用滚动的方式查看屏幕以外的数据，还增加了响应滚动事件的功能。由于CoordinatorLayout已经可以响应滚动事件了，所以该布局中需要使用NestedScrollView或者是RecyclerView这样的滚动组件与折叠工具栏进行联动。
• 该组件中的app:layout_behavior="@string/appbar_scrolling_view_behavior"属性这里是指NestedScrollView组件时刻保持在AppBarLayout的下面，改变AppBarLayout内容位置时NestedScrollView组件可以一起滚动，起到联动的作用。

<?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">

    <!--设置AppBarLayout-->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.AppCompat">

        <!--设置CollapsingToolbarLayout-->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <!--展开工具栏后显示的图片-->
            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/img01"
                app:layout_collapseMode="parallax" />
            <!--工具栏Toolbar-->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar2"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </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:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/text"
            android:textSize="20sp" />
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

编写CollapsingToolbarLayoutActivity

在 onCreate() 方法中首先设置界面中的工具栏为ToolBar，然后获取折叠工具栏布局并设置标题文字与颜色。

public class CollapsingToolbarLayoutActivity extends AppCompatActivity {

    private CollapsingToolbarLayout collapsingToolbarLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_toolbar_layout);
        //隐藏标题栏
        ActionBar actionBar = getSupportActionBar();
        actionBar.hide();
        
        Toolbar toolbar = findViewById(R.id.toolbar2);//获取工具栏（Toolbar）
        setSupportActionBar(toolbar); //设置工具栏为Toolbar

        collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
        //设置标题文字
        collapsingToolbarLayout.setTitle("Android 200例");
        //设置未折叠时标题文字的颜色
        collapsingToolbarLayout.setExpandedTitleColor(
                Color.RED);
        //设置折叠后的标题文字颜色
        collapsingToolbarLayout.setCollapsedTitleTextColor(
                Color.WHITE);
        //设置折叠后工具栏的背景颜色
        collapsingToolbarLayout.setContentScrimColor(
                getResources().getColor(R.color.white));
    }
}

效果