Android開發筆記（一百三十四）協調布局CoordinatorLayout

標籤：post   工程   err   位置   find   popup   near   固定   float   

協調布局CoordinatorLayoutAndroid自5.0之後對UI做了較大的提升，一個重大的改進是推出了MaterialDesign庫，而該庫的基礎即為協調布局CoordinatorLayout，幾乎所有的design控制項都依賴於該布局。協調布局的含義，指的是內部控制項互相之前的動作關聯，比如在A視圖的位置發生變化之時，B視圖的位置也按照某種規則來變化，彷彿彈鋼琴有了協奏曲一般。

使用CoordinatorLayout時，要注意以下幾點：
1、匯入design庫；
2、根布局採用android.support.design.widget.CoordinatorLayout；
3、CoordinatorLayout節點要添加命名空間聲明xmlns:app="http://schemas.android.com/apk/res-auto"；

CoordinatorLayout繼承自ViewGroup，實現效果類似於RelativeLayout，若要指定子視圖在整個頁面中的位置，有以下幾個辦法：
1、使用layout_gravity屬性，指定子視圖在CoordinatorLayout內部的對齊。
2、使用app:layout_anchor和app:layout_anchorGravity屬性，指定子視圖相對於其它子視圖的位置。其中app:layout_anchor表示當前以哪個視圖做為參照物，app:layout_anchorGravity表示本視圖相對於參照物的對齊。
3、使用app:layout_behavior屬性，指定子視圖相對於其它視圖的行為，當對方的位置發生變化時，本視圖的位置也要隨之相應變化。

下面是使用anchor方式定義子視圖方位的，其中紅色方塊位於整個頁面的右上方：


下面是示範anchor方式的布局檔案例子：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/cl_main"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:id="@+id/ll_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#00ffff"        android:orientation="vertical" >    </LinearLayout>    <TextView        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_margin="50dp"        app:layout_anchor="@id/ll_main"        app:layout_anchorGravity="top|right"        android:background="#ff0000" />    </android.support.design.widget.CoordinatorLayout>

懸浮按鈕FloatingActionButtonFloatingActionButton是design庫提供的一個酷炫按鈕，它繼承自ImageButton，，除了映像按鈕的所有功能之外，還提供了以下的其它功能：
1、FloatingActionButton會懸浮在其他視圖之上，即使別的視圖在布局檔案中位於FloatingActionButton後面；
2、在隱藏、顯示按鈕上時會播放動畫；其中隱藏操作是調用hide方法，顯示操作是調用show方法；
3、FloatingActionButton預設會隨著Snackbar的出現或消失而動態調整位置，有關Snackbar的說明參見《Android開發筆記（一百二十七）活用提示窗Toast和Snackbar》；

下面是懸浮按鈕自隱藏和顯示時的動畫效果：


下面是懸浮按鈕跟隨提示條上移和下移的效果：


下面是示範懸浮按鈕的布局檔案例子：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/cl_main"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:id="@+id/ll_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <Button            android:id="@+id/btn_snackbar"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_marginTop="30dp"            android:text="顯示簡單提示條"            android:textColor="@color/black"            android:textSize="17sp" />        <Button            android:id="@+id/btn_floating"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_marginTop="30dp"            android:text="隱藏懸浮按鈕"            android:textColor="@color/black"            android:textSize="17sp" />    </LinearLayout>    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab_btn"        android:layout_width="80dp"        android:layout_height="80dp"        android:layout_margin="20dp"        app:layout_anchor="@id/ll_main"        app:layout_anchorGravity="bottom|right"        android:background="@drawable/float_btn" /></android.support.design.widget.CoordinatorLayout>

底部彈窗BottomSheetBehaviordesign庫提供了Snackbar在頁面底部彈出提示條，可是Snackbar著實簡單，如果我們想在底部彈出一組菜單，Snackbar就無能為力了。因此，Android又提供了BottomSheetBehavior用來自訂底部彈窗，不過它並非一種新控制項，而是給現有視圖加上幾個新屬性，即可實現彈窗與關閉的效果。

這幾個新增屬性的說明如下：
app:behavior_hideable : 指定彈窗是否允許隱藏。
app:behavior_peekHeight : 指定彈窗的預覽高度。
app:elevation : 指定彈窗的高程。
app:layout_behavior : 指定彈窗的行為，像底部彈窗固定取值"@string/bottom_sheet_behavior"。

BottomSheetBehavior在代碼中使用的方法如下所示：
from : 從指定視圖擷取底部彈窗行為。
getState : 擷取該行為的狀態。
setState : 設定該行為的狀態。取值STATE_EXPANDED表示完全展開；取值STATE_COLLAPSED表示摺疊；取值STATE_HIDDEN表示隱藏。
setPeekHeight : 設定彈窗的預覽高度，即setState取值STATE_COLLAPSED時設定的摺疊高度。
setHideable : 設定彈窗是否允許隱藏。

下面是底部彈窗的示範：


下面是使用底部彈窗的布局例子：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/cl_main"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:id="@+id/ll_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <Button            android:id="@+id/btn_bottomsheet"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_marginTop="30dp"            android:text="顯示底部彈窗"            android:textColor="@color/black"            android:textSize="17sp" />    </LinearLayout>    <LinearLayout        android:id="@+id/ll_bottom"        android:layout_width="match_parent"        android:layout_height="200dp"        android:background="#ffaaaa"        app:behavior_hideable="true"        app:behavior_peekHeight="50dp"        app:elevation="5dp"        app:layout_behavior="@string/bottom_sheet_behavior">        <TextView            android:id="@+id/tv_popup"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:text="底部彈窗菜單"            android:textColor="#000000"            android:textSize="17sp"/>    </LinearLayout></android.support.design.widget.CoordinatorLayout>

下面是使用底部彈窗的代碼例子：

public class BottomSheetActivity extends AppCompatActivity implements OnClickListener {private Button btn_bottomsheet;private BottomSheetBehavior behavior;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_bottomsheet);btn_bottomsheet = (Button) findViewById(R.id.btn_bottomsheet);btn_bottomsheet.setOnClickListener(this);View ll_bottom = (View) findViewById(R.id.ll_bottom);behavior = BottomSheetBehavior.from(ll_bottom);//如果立即setState，會報錯java.lang.NullPointerExceptionmHandler.postDelayed(mState, 50);}@Overridepublic void onClick(View v) {if (v.getId() == R.id.btn_bottomsheet) {if (behavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);btn_bottomsheet.setText("隱藏底部彈窗");} else {behavior.setState(BottomSheetBehavior.STATE_HIDDEN);btn_bottomsheet.setText("顯示底部彈窗");}}}private Handler mHandler = new Handler();private Runnable mState = new Runnable() {@Overridepublic void run() {behavior.setState(BottomSheetBehavior.STATE_HIDDEN);}};}

點擊下載本文用到的協調布局的工程代碼


點此查看Android開發筆記的完整目錄

Android開發筆記（一百三十四）協調布局CoordinatorLayout