Android CoordinatorLayout

🧭 一、CoordinatorLayout 是什么

CoordinatorLayout 是 Android 设计支持库（androidx.coordinatorlayout.widget.CoordinatorLayout）中的一个强大的 布局容器， 它的主要特点是：

• 能协调子视图（Views）之间的 交互与动画行为。
• 与 AppBarLayout、CollapsingToolbarLayout、FloatingActionButton、Snackbar、BottomSheetBehavior 等配合使用。
• 是 Material Design 动画与交互的核心基础布局。

---

🧩 二、基本用法

最简单的使用：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 顶部可折叠 AppBar -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/header_image"
                app:layout_collapseMode="parallax"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </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">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/long_text"
            android:padding="16dp"/>
    </androidx.core.widget.NestedScrollView>

    <!-- 可交互的 FloatingActionButton -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/coordinatorLayout"
        app:layout_anchorGravity="bottom|end"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

---

⚙️ 三、CoordinatorLayout 的核心：Behavior

1️⃣ 概念

Behavior 是 CoordinatorLayout 的灵魂。 每个子 View 都可以通过 app:layout_behavior 绑定一个 Behavior 对象， 用于监听其他 View 的动作并作出响应。

2️⃣ 自定义 Behavior

例如，实现一个简单的 FAB 随 RecyclerView 滚动隐藏的 Behavior：

class ScrollAwareFABBehavior(context: Context, attrs: AttributeSet) :
    FloatingActionButton.Behavior(context, attrs) {

    override fun onStartNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: FloatingActionButton,
        directTargetChild: View,
        target: View,
        axes: Int,
        type: Int
    ): Boolean {
        // 监听垂直滚动
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL
    }

    override fun onNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: FloatingActionButton,
        target: View,
        dxConsumed: Int,
        dyConsumed: Int,
        dxUnconsumed: Int,
        dyUnconsumed: Int,
        type: Int
    ) {
        if (dyConsumed > 0 && child.visibility == View.VISIBLE) {
            child.hide()
        } else if (dyConsumed < 0 && child.visibility != View.VISIBLE) {
            child.show()
        }
    }
}

然后在 XML 中应用：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_behavior="com.example.ScrollAwareFABBehavior"
    ... />

---

🧠 四、CoordinatorLayout 常见组合场景

场景	关键组件	功能
Toolbar 折叠效果	AppBarLayout + CollapsingToolbarLayout + NestedScrollView	顶部图片折叠
FAB 与 Snackbar 协作	CoordinatorLayout + FloatingActionButton + Snackbar	Snackbar 弹出时自动上移 FAB
可拖拽底部弹层	CoordinatorLayout + BottomSheetBehavior	实现底部滑动面板
自定义联动动画	CoordinatorLayout + 自定义 Behavior	控制 View 联动

---

🎬 五、常见 Behavior 示例总结

行为	Behavior 类	功能描述
AppBarLayout 与内容滚动联动	AppBarLayout.ScrollingViewBehavior	内容滚动时 Toolbar 折叠
BottomSheet	BottomSheetBehavior	底部弹层
Snackbar 移动 FAB	内部内置行为，无需显式设置	自动上移
自定义滑动联动	自定义 CoordinatorLayout.Behavior	灵活控制动画交互

---

📘 六、实战建议

• CoordinatorLayout 必须是根布局（或者至少包含联动的两个视图）。
• 若要联动滚动视图，请确保使用 NestedScrollView、RecyclerView 等支持嵌套滚动的组件。
• 对于复杂动画，可以结合 MotionLayout 使用。
• Behavior 尽量轻量，不要做耗时操作。

---

🧾 七、推荐学习资源

1. 📘 官方文档： CoordinatorLayout

2. 📚 Material Design 指南： Material Design

---

🌰 八、实际案例

1. Jump APP的发现页，里面的游戏列表

2. Keep APP的个人中心页