Android中關于CoordinatorLayout的一些實用布局技巧

2019-10-23 18:27:05

字體：大中小

來源：轉載

供稿：網友

介紹

CoordinatorLayout是一個“加強版”的 FrameLayout，它主要有兩個用途：

（1）用作應用的頂層布局管理器

（2）通過為子View指定 behavior 實現自定義的交互行為。

在我們做 Material Design 風格的app時通常都使用 CoordinatorLayout 作為布局的根節點，以便實現特定的UI交互行為。
那么現在我們來看看如何用已有的一些控件實現一些常見的布局。

Toolbar + TabLayout 實現 TabLayout 置頂效果

很常見的一種模式是 TabLayout 放在 ToolBar 布局中與其一起置頂在界面上方，而現在的效果是將ToolBar 隱藏而 TabLayout一直置頂在界面上方。

android,布局技巧,coordinatorlayout,android界面布局技巧
tablayout

如何實現呢？首先所在的 Activity 要使用 AppTheme.NoActionBar 風格主題，之后再編寫布局文件。

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar  android:id="@+id/toolbar"  android:layout_width="match_parent"  android:layout_height="?attr/actionBarSize"  android:background="?attr/colorPrimary"  app:layout_scrollFlags="scroll|enterAlways|snap"  app:popupTheme="@style/AppTheme.PopupOverlay">  <!-- toolbar內部布局文件 --> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout  android:id="@+id/tab_layout"  android:layout_width="match_parent"  android:layout_height="@dimen/tab_height"  app:tabIndicatorColor="@color/white"  app:tabTextColor="@color/white_normal"> </android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> <!-- 主界面布局文件 --></android.support.design.widget.CoordinatorLayout>

很重要的兩點：

設置 Toolbar 的 layout_scrollFlags="scroll|enterAlways|snap" 保證 Toolbar 能隨界面滑動向上隱藏。
TabLayout 與 Toolbar 同級，父節點為 AppBarLayout ，保證 TabLayout 能夠能夠顯示在 Toolbar 外面而不隨其一起隱藏。

浸入式 + CollapsingToolbarLayout

CollapsingToolbarLayout 可以包裹 Toolbar , 當其顯示完收縮動畫時使 Toolbar 顯示在頂端。而我們可以再加入浸入式的效果讓 CollapsingToolbarLayout 的背景圖突破系統的狀態欄使界面更加美觀同時也不影響 Toolbar 的顯示效果。

android,布局技巧,coordinatorlayout,android界面布局技巧
浸入式布局

在實現布局文件前要賦予當前的Activity主題為AppTheme.Immersive。

其樣式要在 v19 與 v21 分別處理，至于v19之前的 android 版本那就無能為力了。

v19

<style name="AppTheme.Immersive" parent="AppTheme.NoActionBar"> <item name="android:windowTranslucentStatus">true</item></style>

v21

<style name="AppTheme.Immersive" parent="AppTheme.NoActionBar"> <!--透明導航欄--> <item name="android:statusBarColor">@android:color/transparent</item> <item name="android:windowDrawsSystemBarBackgrounds">true</item></style>

之后再來看布局文件，包括了 AppBarLayout，CollapsingToolbarLayout 和 Toolbar 這些控件。

同樣也是要分為 v19 和 v21 兩種布局

v19

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout  android:id="@+id/app_bar"  android:layout_width="match_parent"  android:layout_height="220dp"  android:theme="@style/AppTheme.AppBarOverlay">  <android.support.design.widget.CollapsingToolbarLayout   android:id="@+id/collapsing_layout"   android:layout_width="match_parent"   android:layout_height="match_parent"   app:contentScrim="?attr/colorPrimary"   app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"   app:statusBarScrim="@android:color/transparent"   app:titleEnabled="false">   <RelativeLayout    android:id="@+id/anime_root"    android:layout_width="match_parent"    android:layout_height="220dp"    app:layout_collapseMode="parallax"    app:layout_collapseParallaxMultiplier="0.7">    <!-- 可伸縮背景圖布局文件 -->   </RelativeLayout>   <android.support.v7.widget.Toolbar    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"    android:layout_marginTop="25dp"    app:layout_collapseMode="pin"    app:popupTheme="@style/AppTheme.PopupOverlay"    app:titleMarginTop="15dp" />  </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- 界面布局文件 --></android.support.design.widget.CoordinatorLayout>

v21

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout  android:id="@+id/app_bar"  android:layout_width="match_parent"  android:layout_height="220dp"  android:fitsSystemWindows="true"  android:theme="@style/AppTheme.AppBarOverlay">  <android.support.design.widget.CollapsingToolbarLayout   android:id="@+id/collapsing_layout"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:fitsSystemWindows="true"   app:contentScrim="?attr/colorPrimary"   app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"   app:statusBarScrim="@android:color/transparent"   app:titleEnabled="false">   <RelativeLayout    android:id="@+id/anime_root"    android:layout_width="match_parent"    android:layout_height="220dp"    android:fitsSystemWindows="true"    app:layout_collapseMode="parallax"    app:layout_collapseParallaxMultiplier="0.7">    <!-- 可伸縮背景圖布局文件 -->   </RelativeLayout>   <android.support.v7.widget.Toolbar    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"    app:layout_collapseMode="pin"    app:popupTheme="@style/AppTheme.PopupOverlay"    app:titleMarginTop="15dp" />  </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- 界面布局文件 --></android.support.design.widget.CoordinatorLayout>

那么重點在哪里呢？

設置你當前的 Activity 的狀態欄為透明，4.4之前的機型則無法適配。
注意每個控件下的 fitsSystemWindows 屬性，使系統能夠調整 view 的 padding 值使其適配。
設置 CollapsingToolbarLayout 為可滾動（scroll）,滾動結束后可以設置 statusBarScrim 作為覆蓋色。
背景布局與 Toolbar 同級，布局文件上可以設置滾動的模式，如視差滾動及相應的值。
注意到 v19 的布局文件上的 Toolbar ，給它賦予了一個 android:layout_marginTop="25dp"的屬性，以便在Android 4.4上時防止被系統的狀態欄所覆蓋。當然這個值可以在代碼中獲取到系統狀態欄高度再進行設置。

fitsSystemWindows詳解：這個一個boolean值的內部屬性，讓view可以根據系統窗口(如status bar)來調整自己的布局，如果值為true,就會調整view的paingding屬性來給system windows留出空間。

Fragment + 不同風格布局

有時候產品要求在一個 Activity 上顯示不同的 Fragment 界面，且 Fragment 上的每一個頭部樣式都不一樣，比如說一個是普通情況下的 Toolbar，另一個卻是浸入式的可伸縮頭部，像簡書app的首頁

android,布局技巧,coordinatorlayout,android界面布局技巧

額，我們先不提圖中的那個bug，圖中的界面主要是兩種效果，一個為普通的標題欄+正文，另一個則是浸入式的圖片背景+正文。我們也可以利用浸入式的主題來仿照出簡書的效果。

android,布局技巧,coordinatorlayout,android界面布局技巧
各個頁面不同樣式

第一步要做的是給 Fragment 所在的 Activity 套上 AppTheme.Immersive 浸入式主題樣式，之后為 Activity 加上布局

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.ashokvarma.bottomnavigation.BottomNavigationBar  android:id="@+id/bottom_navigation_bar"  android:layout_width="match_parent"  android:layout_height="56dp"  android:layout_gravity="bottom"  android:fitsSystemWindows="true"> </com.ashokvarma.bottomnavigation.BottomNavigationBar> <android.support.v4.view.ViewPager  android:id="@+id/viewpager"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:layout_marginBottom="56dp" /></android.support.design.widget.CoordinatorLayout>

無他，就是一個 ViewPager 容器用來加載 Fragment。

書城所在的 Fragment 布局如下：

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout  android:id="@+id/app_bar"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:fitsSystemWindows="true"  android:theme="@style/AppTheme.AppBarOverlay">  <android.support.design.widget.CollapsingToolbarLayout   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:fitsSystemWindows="true"   app:contentScrim="?attr/colorPrimary"   app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"   app:statusBarScrim="@android:color/transparent"   app:titleEnabled="false">   <!-- 背景布局 -->   <android.support.v7.widget.Toolbar    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="36dp"    android:minHeight="36dp"    app:layout_collapseMode="pin"    app:popupTheme="@style/AppTheme.PopupOverlay">    <!-- 搜索框布局 -->   </android.support.v7.widget.Toolbar>  </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- 界面主布局 --></android.support.design.widget.CoordinatorLayout>

布局跟之前的浸入式布局相同，但單單這樣布局是有問題的，此時的 Toolbar 會顯示在系統的狀態欄下。所以我們要修正 Toolbar 的擺放位置，即人為的為其設置 MarginTop 距離。

/** * 修正 Toolbar 的位置 * 在 Android 4.4 版本下無法顯示內容在 StatusBar 下，所以無需修正 Toolbar 的位置 * * @param toolbar */protected void fixToolbar(Toolbar toolbar) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  int statusHeight = getStatusBarHeight(getActivity());  ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) toolbar.getLayoutParams();  layoutParams.setMargins(0, statusHeight, 0, 0); }}/** * 獲取系統狀態欄高度 * * @param context * @return */public int getStatusBarHeight(Context context) { Class<?> c = null; Object obj = null; Field field = null; int x = 0, statusBarHeight = 0; try {  c = Class.forName("com.android.internal.R$dimen");  obj = c.newInstance();  field = c.getField("status_bar_height");  x = Integer.parseInt(field.get(obj).toString());  statusBarHeight = context.getResources().getDimensionPixelSize(x); } catch (Exception e1) {  e1.printStackTrace(); } return statusBarHeight;}

在每個 Fragment 初始化 Toolbar 時都需要調用這個方法來修正位置。

重點又來了：

修改為浸入式樣式主題，要點見上一個案例。
人為修正 Toolbar 的距離，保證位置擺放正確。
注意 Fragment 切換時偶爾出現的一些 Toolbar 問題。

Fragment 與 Toolbar 的選項菜單問題

在 Fragment 之間切換的時候很容易遇到 Toolbar 上的菜單無法正確的顯示的問題，解決方法也很簡單，在 Fragment 的 onCreateView() 方法中添加一行代碼：

toolbar.setTitle("title");((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);fixToolbar(toolbar);setHasOptionsMenu(true); //重要的一行代碼，防止選項菜單錯亂

總結

自從 Google 出了 com.android.support:design 包之后，其多樣化的定制給 App 應用帶來更加酷炫的效果，布局的變化只不過是其中的一部分而已。文章的開頭也說了， CoordinatorLayout 不止是帶來了布局的變化，也帶給了控件更多的UI交互動作。

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VEVB武林網的支持。

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android 實時監測（監聽）網絡連接狀態變化

下一篇：Android實現計時與倒計時的方法匯總