# 1. 前言 `CoordinatorLayout`可以说是一个加强版的`FrameLayout`，由`AndroidX`库提供。它在普通情况下的作用和`FrameLayout`基本一致，但是它拥有一些额外的`Material`能力。 `CoordinatorLayout`可以监听其所有子控件的各种事件，并自动帮助我们做出最为合理的响应。 举个简单的例子，刚才弹出的`Snackbar`提示将悬浮按钮遮挡住了，而如果我们能让`CoordinatorLayout`监听到`Snackbar`的弹出事件，那么它会自动将内部的`FloatingActionButton`向上偏移，从而确保不会被`Snackbar`遮挡。 # 2. 使用 只需要将原来的`FrameLayout`替换一下就可以了，也可以理解为：`CoordinatorLayout`就是一个加强版的`FrameLayout`。比如前面我们使用过（在`FAB`中）： ~~~ <!--第一个部分：使用CoordinatorLayout，因为FAB需要使用CoordinatorLayout包裹起来--> <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 顶部导航栏 --> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar_main" android:layout_width="match_parent" android:layout_gravity="start|top" android:layout_height="?attr/actionBarSize" app:contentInsetStartWithNavigation="0dp" android:background="@color/white" > <!--圆角图片组件--> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/note_page_toolbar_icon" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerInParent="true" android:layout_marginRight="20dp" android:src="@drawable/icon"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/note_page_title" android:textColor="@color/black" android:textStyle="bold" android:textSize="20sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/note_page_summary" android:textColor="@color/gray" android:textSize="12sp" android:layout_marginStart="10dp" /> </LinearLayout> </androidx.appcompat.widget.Toolbar> <!--引入下拉刷新控件--> <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swiperefreshLayout_main" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="?attr/actionBarSize"> <!--下拉刷新的内容--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </FrameLayout> </LinearLayout> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> <!--底部Tab--> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:layout_gravity="bottom|start" android:orientation="vertical" > <include layout="@layout/bottom_nav" android:visibility="visible" /> </LinearLayout> <!--FAB悬浮按钮--> <com.google.android.material.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_marginEnd="16dp" android:layout_marginBottom="76dp" android:src="@drawable/ic_baseline_add_24" app:backgroundTint="@color/white" app:elevation="8dp" /> </androidx.coordinatorlayout.widget.CoordinatorLayout> ~~~ # 2.1 关于遮罩问题 对于帧布局我们知道，默认都会摆放在布局的左上角，从而产生了遮挡的现象。对于`FrameLayout`布局中我们需要设置控件其位置来做到元素的非重叠，在`CoordinatorLayout`中将有更加高级的做法。在`Material`库中提供的了`AppBarLayout`。`AppBarLayout`实际上是一个垂直方向的`LinearLayout`，它在内部做了很多滚动事件的封装，并应用了一些`Material Design`的设计理念。 但实践的时候感觉没有什么用，这里先不继续。