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

news2024/10/5 14:27:27

在这里插入图片描述

简介

在现代 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() {
                    @Override
                    public WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {
                        return insets;
                    }
                });
        // 初始化其他成员变量
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 计算视图的测量尺寸
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected 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);
    }

    @Override
    public 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() {


    @Override
    public 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() {
    @Override
    public WindowInsetsCompat onApplyWindowInsets (View v, WindowInsetsCompat insets){
        collapsingToolbarLayout.setPadding(0, insets.getSystemWindowInsetTop(), 0, 0);
        return insets;
    }
});