深入解读一下 `com.google.android.material.appbar.CollapsingToolbarLayout`

在这里插入图片描述

简介

在现代 Android 应用中，提供流畅且美观的用户体验是非常重要的。CollapsingToolbarLayout 是 AndroidX库中 Material Components 的一部分，它提供了一种易于实现的可折叠工具栏效果，常用于提供视觉吸引力的标题栏和动画效果。

本文将详细介绍 CollapsingToolbarLayout 的工作原理、使用方法、以及在实际开发中的一些高级技巧。

`CollapsingToolbarLayout` 的基本用法

布局结构

要使用 CollapsingToolbarLayout，需要在布局文件中定义一个包含 AppBarLayout和 CollapsingToolbarLayout 的结构。通常还会包含一个 Toolbar 以及一个背景视图（例如 ImageView）。

下面是一个基本的布局示例：


<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 android:layout_width="match_parent" android:layout_height="wrap_content"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><CollapsingToolbarLayout android:layout_width="match_parent"android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageView android:layout_width="match_parent" android:layout_height="match_parent"android:src="@drawable/header_image" android:scaleType="centerCrop"app:layout_collapseMode="parallax" /><Toolbar android:id="@+id/toolbar" android:layout_width="match_parent"android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /></CollapsingToolbarLayout></AppBarLayout><NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><!-- Your content here --></NestedScrollView>
</CoordinatorLayout>

在这个布局中：

CoordinatorLayout 是顶级布局，负责协调子视图的行为。
AppBarLayout 包含 CollapsingToolbarLayout 和 Toolbar。
CollapsingToolbarLayout 内包含一个 ImageView 作为背景，以及一个 Toolbar。
NestedScrollView 用于滚动内容。

关键属性

CollapsingToolbarLayout 提供了几个关键属性，用于控制其行为：

layout_scrollFlags: 定义滚动行为。常用值有 scroll、exitUntilCollapsed 等。
layout_collapseMode: 定义子视图的折叠模式。常用值有 parallax、pin。
contentScrim: 定义折叠时显示的背景。
collapsedTitleTextAppearance 和 expandedTitleTextAppearance: 定义折叠和展开状态下标题的样式。

深入理解 `CollapsingToolbarLayout`

工作原理

CollapsingToolbarLayout 是 CoordinatorLayout 的一个子类，它与 AppBarLayout紧密协作，通过监听滚动事件来调整自身的大小和位置。其内部实现了一个自定义的 Behavior，用于处理滚动和折叠逻辑。

当用户滚动 NestedScrollView 时，AppBarLayout 会根据设置的 scrollFlags属性调整自身高度，并触发 CollapsingToolbarLayout 内部视图的折叠和展开动画。

源码解析

我们可以深入看看 CollapsingToolbarLayout 的部分源码，了解其内部实现。

public class CollapsingToolbarLayout extends FrameLayout {// 定义了一些成员变量，包括最大和最小高度、滚动范围等private int           mCollapsingTitleEnabled;private int           mScrimAlpha;private long          mScrimAnimationDuration;private boolean       mScrimsAreShown;private ValueAnimator mScrimAnimator;public CollapsingToolbarLayout(Context context, AttributeSet attrs) {super(context, attrs);// 初始化属性和状态setWillNotDraw(false);ViewCompat.setOnApplyWindowInsetsListener(this,new OnApplyWindowInsetsListener() {@Overridepublic WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {return insets;}});// 初始化其他成员变量}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// 计算视图的测量尺寸super.onMeasure(widthMeasureSpec, heightMeasureSpec);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);// 布局子视图，调整位置和大小mCollapsingTextHelper.onLayout(changed, l, t, r, b);}@Overridepublic void draw(Canvas canvas) {super.draw(canvas);// 绘制折叠标题和背景if (mScrimAlpha > 0) {canvas.drawRect(0, 0, getWidth(), getHeight(), mScrimPaint);}mCollapsingTextHelper.draw(canvas);}
}

在这个简化的源码片段中，我们可以看到 CollapsingToolbarLayout 如何通过重写 onMeasure 和 onLayout方法来调整子视图的位置和大小，并在 draw 方法中绘制折叠效果。

`CollapsingToolbarLayout` 的应用场景

可折叠的工具栏

CollapsingToolbarLayout 最常见的应用场景之一是创建可折叠的工具栏。在这种情况下，可以根据滚动位置动态调整工具栏的大小和背景。

视觉吸引力的标题栏

通过使用 CollapsingToolbarLayout，可以实现视觉吸引力的标题栏，例如在应用启动时显示大的背景图片和标题，随着用户滚动内容，标题栏逐渐折叠成标准的工具栏。

动态背景变化

还可以利用 CollapsingToolbarLayout 实现动态背景变化，例如在用户滚动时改变工具栏的背景颜色或图片，从而提供更丰富的视觉效果。

高级技巧

自定义折叠效果

通过自定义 layout_collapseMode 属性，可以实现更复杂的折叠效果。例如，可以结合 parallax 和 pin模式，在滚动过程中同时实现视差滚动和固定工具栏的效果。

动画过渡

可以使用 ValueAnimator 或 ObjectAnimator 为 CollapsingToolbarLayout 添加平滑的动画过渡效果，使折叠和展开更加流畅。

ValueAnimator animator = ValueAnimator.ofInt(0, 255);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate (ValueAnimator animation){int alpha = (int) animation.getAnimatedValue();mScrimPaint.setAlpha(alpha);invalidate();}
});animator.setDuration(1000);
animator.start();

响应窗口插入

使用 WindowInsets 可以使 CollapsingToolbarLayout 更好地适应不同的屏幕和窗口布局，例如处理状态栏和导航栏的插入。

ViewCompat.setOnApplyWindowInsetsListener(collapsingToolbarLayout,new OnApplyWindowInsetsListener() {@Overridepublic WindowInsetsCompat onApplyWindowInsets (View v, WindowInsetsCompat insets){collapsingToolbarLayout.setPadding(0, insets.getSystemWindowInsetTop(), 0, 0);return insets;}
});