CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout 和 Toolbar

原创已于 2025-10-18 09:41:13 修改 · 880 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#android #Toolbar

于 2025-10-17 23:05:56 首次发布

Android 专栏收录该内容

36 篇文章

订阅专栏

以下是 CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout 和 Toolbar 的组合使用详解，结合 Material Design 的最佳实践和常见问题解决方案：

一、组件作用与层级关系

1. 核心组件

组件	作用	必要层级关系
CoordinatorLayout	顶级布局，协调子视图的手势交互（如滚动、折叠）	根布局
AppBarLayout	包裹可折叠的 AppBar 内容（如 CollapsingToolbarLayout），响应滚动事件	CoordinatorLayout 的直接子布局
CollapsingToolbarLayout	实现 Toolbar 的折叠/展开动画，支持背景图片和标题动态变化	AppBarLayout 的直接子布局
Toolbar	标准操作栏，需作为 CollapsingToolbarLayout 的子视图	CollapsingToolbarLayout 的子布局

2. 正确层级结构

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <ImageView/>  <!-- 背景图，支持视差滚动 -->
            <Toolbar/>    <!-- 标准操作栏，需固定或视差模式 -->
        </CollapsingToolbarLayout>
        <TabLayout/>    <!-- 可选：底部标签栏 -->
    </AppBarLayout>
    <RecyclerView/>   <!-- 滚动内容，需绑定 AppBarLayout 行为 -->
</CoordinatorLayout>

二、关键属性与配置

1. AppBarLayout

app:layout_scrollFlags

控制子视图的滚动行为，常用值：
- scroll：随内容滚动隐藏/显示。
- enterAlways：向下滑动时立即显示。
- snap：未完全隐藏时自动切换显示状态。
```
<AppBarLayout
    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
```

2. CollapsingToolbarLayout

app:layout_scrollFlags

必须设置，控制整体折叠行为（如 scroll|exitUntilCollapsed）。
app:contentScrim

折叠时背景颜色（如 ?attr/colorPrimary）。
app:title

设置折叠后的标题（需在代码中动态绑定）。
app:expandedTitleMarginStart

展开状态下标题的左边距。
app:layout_collapseParallaxMultiplier

视差滚动速度（0~1，值越小滚动越慢）。

3. Toolbar

app:layout_collapseMode

控制 Toolbar 的折叠模式：
- pin：固定在顶部。
- parallax：视差滚动（需配合背景图使用）。
app:titleTextAppearance

标题文本样式（如 @style/TextAppearance.Widget.AppCompat.Toolbar.Title）。

三、完整布局示例

<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:layout_width="match_parent"
        android:layout_height="250dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:title="可折叠标题">

            <!-- 背景图（视差滚动） -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/header_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

            <!-- 固定 Toolbar -->
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:titleTextColor="@android:color/white"/>

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

        <!-- 底部标签栏（可选） -->
        <com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll"/>

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

    <!-- 滚动内容 -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!-- 内容区域 -->
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

四、常见问题与解决方案

1. 标题显示异常

问题：标题未居中或与 Logo 重叠。
解决：
- 在代码中动态设置标题：
```
collapsingToolbar.title = "标题"
```
- 确保 Toolbar的 layout_collapseMode设置为 pin。

2. 背景图拉伸变形

问题：背景图比例失调。

解决：

使用 centerCrop或 fitXY缩放类型：

<ImageView
    android:scaleType="centerCrop"
    .../>

3. 沉浸式状态栏失效

问题：状态栏与标题栏重叠。

解决：

在主题中启用透明状态栏：

<item name="android:statusBarColor">@android:color/transparent</item>

布局中添加 fitsSystemWindows="true"：

<CoordinatorLayout
    android:fitsSystemWindows="true"
    ...>

4. 滚动不触发折叠

问题：滑动时无动画效果。

解决：

确保滚动容器（如 RecyclerView）设置 layout_behavior：

<RecyclerView
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    .../>

五、高级技巧

1. 动态修改标题

collapsingToolbar.title = if (isExpanded) "展开标题" else "折叠标题"

2. 自定义折叠动画

通过 AppBarLayout.OnOffsetChangedListener监听偏移量，实现渐变效果：

appBarLayout.addOnOffsetChangedListener { layout, verticalOffset ->
    val alpha = 1 - (Math.abs(verticalOffset) / layout.totalScrollRange.toFloat())
    toolbar.setBackgroundColor(Color.argb(alpha.toInt() * 255, 255, 0, 0))
}

3. 多层嵌套优化

避免过度嵌套：减少 CoordinatorLayout的层级，提升性能。
使用 ConstraintLayout：简化复杂布局。

六、版本兼容性

组件	最低支持版本	注意事项
`CoordinatorLayout`	API 11+	需添加 `com.google.android.material:coordinatorlayout`依赖
`AppBarLayout`	API 11+	使用 Material Components 库时需同步版本
`CollapsingToolbarLayout`	API 11+	确保与 `androidx.appcompat`版本一致