# 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`的設計理念。 但實踐的時候感覺沒有什么用，這里先不繼續。