Android第一行代码——快速入门 Kotlin 编程（12.7 可折叠式标题栏）_com.google.android.material.appbar.appbarlayout-CSDN博客

本文链接：https://blog.csdn.net/fhbxts/article/details/137169170

12.7 可折叠式标题栏

虽说我们现在的标题栏是使用 Toolbar 来编写的，不过它看上去和传统的ActionBar 没什么两样，只不过可以响应 RecyclerView 的滚动事件来进行隐藏和显示。而 Material Design 中并没有限定标题栏必须是长这个样子的，事实上，我们可以根据自己的喜好随意定制标题栏的样式。那么本节中我们就来实现一个可折叠式标题栏的效果，这需要借助 CollapsingToolbarLayout 这个工具。

12.7.1 CollapsingToolbarLayout

顾名思义，CollapsingToolbarLayout 是一个作用于 Toolbar 基础之上的布局，它也是由 Material 库提供的。CollapsingToolbarLayout 可以让 Toolbar 的效果变得更加丰富，不仅仅是展示一个标题栏，而且能够实现非常华丽的效果。

不过，CollapsingToolbarLayout 是不能独立存在的，它在设计的时候就被限定只能作为 AppBarLayout 的直接子布局来使用。而 AppBarLayout 又必须是 CoordinatorLayout 的子布局，因此本节中我们要实现的功能其实需要综合运用前面所学的各种知识。那么话不多说，这就开始吧。

首先我们需要一个额外的 Activity 作为水果的详情展示界面，右击 com.example.materialtest 包→New→Activity→EmptyActivity ，创建一个 FruitActivity ，并将布局名指定成 activity_fruit.xml ，然后我们开始编写水果详情展示界面的布局。

由于整个布局文件比较复杂，这里我准备采用分段编写的方式。activity_fruit.xml 中的内容主要分为两部分，一个是水果标题栏，一个是水果内容详情，我们来一步步实现。

首先实现标题栏部分，这里使用 CoordinatorLayout 作为最外层布局，如下所示：

<!--
    CoordinatorLayout 可以说是一个加强版的FrameLayout
        可以监听其所有子控件的各种事件，并自动帮助我们做出最为合理的响应。
-->
<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=".FruitActivity">

</androidx.coordinatorlayout.widget.CoordinatorLayout>

一开始的代码还是比较简单的，相信没有什么需要解释的地方。注意要始终记得定义一个 xmlns:app的命名空间，在Material Design 的开发中会经常用到它。

接着我们在 CoordinatorLayout 中嵌套一个 AppBarLayout ，如下所示：

<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=".FruitActivity">

    <!--
        AppBarLayout 主要用于配合 CoordinatorLayout
                实现 Material Design 风格的 App Bar（应用栏）效果。
                    可以与滚动内容进行联动，例如随着内容滚动逐渐隐藏或显示。
    -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

目前为止也没有什么难理解的地方，我们给 AppBarLayout 定义了一个id，将它的宽度指定为 match_parent，高度指定为250 dp 。当然这里的高度值你可以随意指定，不过我尝试之后发现250 dp 的视觉效果比较好。

接下来我们在 AppBarLayout 中再嵌套一个 CollapsingToolbarLayout ，如下所示：

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/purple_200"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

从现在开始就稍微有点难理解了，这里我们使用了新的布局 CollapsingToolbarLayout 。其中，id、layout_width 和 layout_height 这几个属性比较简单，我就不解释了。 android:theme属性指定了一个ThemeOverlay .AppCompat.Dark.A ctionBar 的主题，其实对于这部分我们也并不陌生，因为之前在 activity_main.xml 中给 Toolbar 指定的也是这个主题，只不过这里要实现更加高级的 Toolbar 效果，因此需要将这个主题的指定提到上一层来。 app:contentScrim 属性用于指定 CollapsingToolbarLayout 在趋于折叠状态以及折叠之后的背景色，其实CollapsingToolbarLayout 在折叠之后就是一个普通的 Toolbar ，那么背景色肯定应该是colorPrimary 了，具体的效果我们待会儿就能看到。app:layout_scrollFlags 属性我们也是见过的，只不过之前是给 Toolbar 指定的，现在也移到外面来了。其中，scroll 表示CollapsingToolbarLayout 会随着水果内容详情的滚动一起滚动，exitUntilCollapsed 表示当CollapsingToolbarLayout 随着滚动完成折叠之后就保留在界面上，不再移出屏幕。

接下来，我们在 CollapsingToolbarLayout 中定义标题栏的具体内容，如下所示：

    <com.google.android.material.appbar.AppBarLayout
        an