一、概述

AppBarLayout 是 Android Material Components 库中的一个重要视图组件，作为布局的一部分，通常用于实现可滚动的应用栏。它通过与其他布局控件（如 Toolbar、CollapsingToolbarLayout）结合使用，支持一些常见的交互效果，比如折叠和展开的动画效果。AppBarLayout 主要用来创建符合 Material Design 风格的顶部区域，它为复杂的应用栏交互提供了强大的支持，尤其是在多层滚动视图中。

主要特性：

  • 滚动行为：支持和子视图（如 RecyclerView）的滚动交互，可以折叠和展开应用栏。
  • 折叠与展开：通过 CollapsingToolbarLayout 支持应用栏的折叠与展开动画。
  • Material Design 支持：内置 Material Design 风格，符合现代 Android 应用的设计规范。

二、依赖与导入

AppBarLayout 是 Android Material Components 库的一部分，在使用时需要确保已经在项目的 build.gradle 文件中添加了 Material Components 的依赖：

1
2
3
dependencies {
    implementation 'com.google.android.material:material:1.4.0'
}

三、AppBarLayout 基本用法

AppBarLayout 通常与 Toolbar、CollapsingToolbarLayout 等组件一起使用。通过这些组件，你可以实现应用栏的动态折叠效果和其他交互动画。

1. 在布局文件中使用 AppBarLayout

AppBarLayout 是一个容器布局，可以包含 Toolbar 和其他视图控件。以下是一个简单的例子，展示如何在 XML 布局文件中使用 AppBarLayout 来实现顶部可折叠的应用栏：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|enterAlways">

    <!-- CollapsingToolbarLayout 用于实现折叠和展开效果 -->
    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <!-- Toolbar 作为应用栏的工具栏 -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:title="AppBarLayout Example"
            android:theme="@style/ThemeOverlay.MaterialComponents.ActionBar"/>
    </com.google.android.material.appbar.CollapsingToolbarLayout>

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

在这个例子中：

  • AppBarLayout 是应用栏的父容器，包含 CollapsingToolbarLayout 和 Toolbar。
  • CollapsingToolbarLayout 提供折叠效果，允许 Toolbar 在滚动时折叠或展开。
  • layout_scrollFlags 用于指定 AppBarLayout 的滚动行为，如“scroll”、“enterAlways”、“exitUntilCollapsed”等。

2. 配置滚动行为

AppBarLayout 支持与子视图（如 RecyclerView）的滚动行为交互，通常通过 layout_behavior 属性来指定子视图的滚动效果。例如，可以使 RecyclerView 在滚动时与 AppBarLayout 协同滚动：

1
2
3
4
5
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

通过设置 layout_behavior="@string/appbar_scrolling_view_behavior"，RecyclerView 会根据 AppBarLayout 的滚动来控制自身的显示和滚动。

四、AppBarLayout 特性

1. layout_scrollFlags 属性

layout_scrollFlags 属性用于控制 AppBarLayout 中各个子视图的滚动行为。常见的滚动标志有：

  • scroll：表示该视图可以随着滚动视图的滚动而滚动。
  • enterAlways：当滚动发生时，该视图将始终出现在屏幕上。
  • exitUntilCollapsed：当滚动时，该视图将被折叠，直到完全消失。

通过组合这些标志，可以创建非常灵活的应用栏行为。例如：

1
app:layout_scrollFlags="scroll|enterAlways"

表示该视图在滚动时可以显示，并在需要时返回。

2. AppBarLayout 与 CollapsingToolbarLayout 配合

CollapsingToolbarLayout 是 AppBarLayout 的常用子布局，用于实现更复杂的折叠效果。例如，使用 CollapsingToolbarLayout 可以实现动态缩小的 Toolbar 和背景图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:title="Collapsing Toolbar"
            android:theme="@style/ThemeOverlay.MaterialComponents.ActionBar"/>
    </com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
  • app:contentScrim 设置折叠时的背景颜色。
  • app:layout_scrollFlags="scroll|exitUntilCollapsed" 使得 Toolbar 可以随着滚动而折叠，直到完全消失。

3. setExpanded() 与 setCollapsed() 方法

AppBarLayout 还提供了 setExpanded() 和 setCollapsed() 方法，可以动态控制应用栏的展开或折叠状态。例如：

1
2
3
val appBarLayout: AppBarLayout = findViewById(R.id.app_bar_layout)
appBarLayout.setExpanded(true)  // 展开应用栏
appBarLayout.setExpanded(false) // 折叠应用栏

这些方法可以结合动画效果来动态控制应用栏的展开或折叠状态。

4. 动态监听滚动状态

你可以通过 AppBarLayout.OnOffsetChangedListener 来监听 AppBarLayout 的滚动偏移量，从而执行特定操作：

1
2
3
4
5
6
7
8
9
10
val appBarLayout = findViewById<AppBarLayout>(R.id.app_bar_layout)
appBarLayout.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
    override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {
        if (verticalOffset == 0) {
            // 展开
        } else if (Math.abs(verticalOffset) >= appBarLayout.totalScrollRange) {
            // 折叠
        }
    }
})

通过监听 verticalOffset，可以在应用栏完全展开或完全折叠时执行相应的操作。

五、使用场景

AppBarLayout 的主要作用是处理可滚动应用栏的交互行为，特别适用于以下场景：

  1. 社交应用：用于展示用户头像、个人资料或状态，支持滚动时的折叠和展开效果。
  2. 新闻或内容浏览应用：用于展示页面标题、背景图等内容，支持和滚动视图的协同滚动。
  3. 电子商务应用：用于展示商品信息或产品展示，提供更加吸引眼球的顶部应用栏。

六、总结

AppBarLayout 是 Android Material Design 中一个重要的布局组件，它提供了应用栏的高度自定义、折叠和展开动画、以及与滚动视图的交互。结合 CollapsingToolbarLayout 和其他控件，开发者可以实现复杂且富有动感的顶部区域，提升用户体验。

主要优点：

  • 提供灵活的滚动行为，支持与其他视图的协同滚动。
  • 内置支持 Material Design 风格，符合现代 Android 应用设计规范。
  • 支持与 CollapsingToolbarLayout 配合使用，实现更加丰富的交互效果。

AppBarLayout 是构建现代化、互动性强的 Android 应用中不可或缺的布局组件，它帮助开发者轻松实现折叠式应用栏以及其他复杂的动画效果。