Android AppbarLayout用法详解

GoshenC

于 2025-04-07 11:48:58 发布

阅读量948

点赞数 39

文章标签： android Kotlin 前端 gitee 开发语言

本文链接：https://blog.csdn.net/XHRK1/article/details/147040674

版权

一、概述

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

主要特性：

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

二、依赖与导入

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

plaintext

1
2
3

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

三、AppBarLayout 基本用法

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

1. 在布局文件中使用 `AppBarLayout`

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

plaintext

<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 协同滚动：

plaintext

<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：当滚动时，该视图将被折叠，直到完全消失。

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

plaintext

1	app:layout_scrollFlags="scroll\|enterAlways"

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

2. `AppBarLayout` 与 `CollapsingToolbarLayout` 配合

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

plaintext

<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() 方法，可以动态控制应用栏的展开或折叠状态。例如：

plaintext

1
2
3

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

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

4. 动态监听滚动状态

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

plaintext

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，可以在应用栏完全展开或完全折叠时执行相应的操作。