Android CoordinatorLayout用法详解

GoshenC

于 2025-04-06 11:44:03 发布

阅读量1k

点赞数 17

文章标签： gitee Android 安卓 Kotlin 前端设计

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

版权

一、概述

CoordinatorLayout 是 Android 支持库（Support Library）提供的一个高级布局容器，它继承自 FrameLayout，是一个强大的布局容器，能够协调并支持更复杂的交互设计，尤其是在 Material Design 中。它提供了一种灵活的方式来协作处理子视图之间的行为，如与 AppBarLayout、FloatingActionButton、Snackbar 等组件的交互效果。

CoordinatorLayout 主要目的是提供一种“协调”各个视图行为的机制，可以通过自定义或现成的行为（Behavior）来控制子视图的滑动、动画和响应。

二、CoordinatorLayout 特性

CoordinatorLayout 提供了以下几个重要特性：

响应滚动和手势：CoordinatorLayout 能够捕捉子视图的滚动和手势事件，并根据需要调整布局位置。
子视图行为协调：可以让不同的视图（如 AppBarLayout 和 FloatingActionButton）之间协调运动，确保界面一致性和流畅的过渡效果。
支持自定义行为：通过自定义 Behavior 类，可以非常灵活地控制视图之间的交互方式。
Material Design 支持：协调 AppBarLayout、Toolbar、FloatingActionButton 等 Material Design 组件的行为。

三、CoordinatorLayout 的基本使用

1. 依赖

首先，需要在 build.gradle 文件中加入依赖（如果还没有加入的话）：

plaintext

1
2
3

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

2. CoordinatorLayout 结构

CoordinatorLayout 是一个容器布局，所有其他子视图都可以放置在其内。通常，CoordinatorLayout 中的子视图会涉及到一些协调行为，例如与 AppBarLayout 一起滚动。

plaintext

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- AppBarLayout 用于实现可滚动的 Toolbar 和其他组件 -->
    <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">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:title="CoordinatorLayout Example"
                android:theme="@style/ThemeOverlay.MaterialComponents.ActionBar"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 主体内容区域 -->
    <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"/>

    <!-- 悬浮的 FloatingActionButton -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_add"
        app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 关键组件

AppBarLayout：用于实现可滚动的应用栏，通常与 Toolbar 和 CollapsingToolbarLayout 一起使用，以实现折叠效果。
FloatingActionButton：通常会放置在屏幕的右下角，CoordinatorLayout 可以协调其在滚动视图中的行为。
RecyclerView：可以与 AppBarLayout 协作，配合 layout_behavior 属性实现滚动监听和交互。

四、CoordinatorLayout 的关键属性和方法

1. `app:layout_behavior`

app:layout_behavior 属性用于指定该视图与 CoordinatorLayout 中其他视图的行为。常见的行为类包括：

com.google.android.material.behavior.HideBottomViewOnScrollBehavior：使底部视图（如 FloatingActionButton）在滚动时隐藏。
com.google.android.material.appbar.AppBarLayout.ScrollingViewBehavior：使 RecyclerView 或其他滚动视图与 AppBarLayout 协同滚动。

2. `setBehavior()`

可以通过 CoordinatorLayout 提供的 setBehavior() 方法为子视图设置行为：

plaintext

val coordinatorLayout: CoordinatorLayout = findViewById(R.id.coordinator_layout)
val fab: FloatingActionButton = findViewById(R.id.fab)
val params = fab.layoutParams as CoordinatorLayout.LayoutParams
params.behavior = HideBottomViewOnScrollBehavior()
fab.layoutParams = params

3. 自定义 Behavior

通过继承 CoordinatorLayout.Behavior 类，可以创建自己的视图行为。行为类主要重写以下方法：

onNestedScroll()
onInterceptTouchEvent()
onLayoutChild()

例如，下面的代码实现了一个 Behavior，它让 FloatingActionButton 在滚动时隐藏：

plaintext

class MyFloatingActionButtonBehavior(context: Context, attrs: AttributeSet) :
    CoordinatorLayout.Behavior<FloatingActionButton>(context, attrs) {

    override fun onNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: FloatingActionButton,
        target: View,
        dx: Int,
        dy: Int,
        consumed: IntArray
    ) {
        if (dy > 0) {
            child.hide() // 向下滚动时隐藏 FloatingActionButton
        } else {
            child.show() // 向上滚动时显示 FloatingActionButton
        }
    }
}

五、CoordinatorLayout 常见用法

1. 与 `AppBarLayout` 配合使用

AppBarLayout 是与 CoordinatorLayout 配合使用的一个关键组件。它能够实现 Toolbar 和其他视图的折叠效果。以下是一个简单的例子：

plaintext

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|enterAlways">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:title="CoordinatorLayout Example"
        android:theme="@style/ThemeOverlay.MaterialComponents.ActionBar"/>
</com.google.android.material.appbar.AppBarLayout>

2. 与 `FloatingActionButton` 配合使用

FloatingActionButton 可以与 CoordinatorLayout 配合，通过设置行为来实现更丰富的交互。例如，使用 HideBottomViewOnScrollBehavior 来在列表滚动时隐藏 FloatingActionButton：

plaintext

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@drawable/ic_add"
    app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"/>

六、总结

CoordinatorLayout 是一个功能强大的布局容器，它能够协调多个视图之间的交互行为，尤其适用于 Material Design 风格的 UI 设计。通过与 AppBarLayout、FloatingActionButton 等组件的结合，开发者能够创建出极具交互感的界面效果。你可以通过内置的 Behavior 类或者自定义行为来实现复杂的布局和动画效果，极大地增强用户体验。