Android CoordinatorLayout詳解及實例代碼

更新時間：2016年12月16日 10:46:24 作者：xyz_lmn

這篇文章主要介紹了Android CoordinatorLayout詳解及實例代碼的相關資料,CoordinatorLayout基本實現(xiàn)兩個功能：作為頂層布局和調(diào)度協(xié)調(diào)子布局，這里詳細介紹此部分知識，需要的朋友可以參考下

Android CoordinatorLayout詳解

一、CoordinatorLayout有什么作用

CoordinatorLayout作為“super-powered FrameLayout”基本實現(xiàn)兩個功能：
1、作為頂層布局
2、調(diào)度協(xié)調(diào)子布局

CoordinatorLayout使用新的思路通過協(xié)調(diào)調(diào)度子布局的形式實現(xiàn)觸摸影響布局的形式產(chǎn)生動畫效果。CoordinatorLayout通過設置子View的 Behaviors來調(diào)度子View。系統(tǒng)（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。

使用CoordinatorLayout需要在Gradle加入Support Design Library：

compile 'com.android.support:design:22.2.1'

二、CoordinatorLayout與FloatingActionButton

定義布局文件：

<?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.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:src="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout作為“super-powered FrameLayout”，設置子視圖的android:layout_gravity屬性控制位置。

Activity:

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {

        Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG)
            .setAction("cancel", new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                //這里的單擊事件代表點擊消除Action后的響應事件

              }
            })
            .show();
      }
    });
  }
}

效果：

FloatingActionButton是最簡單的使用CoordinatorLayout的例子，F(xiàn)loatingActionButton默認使用FloatingActionButton.Behavior。

三、CoordinatorLayout與AppBarLayout3.1 AppBarLayout嵌套TabLayout

布局文件代碼：

<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/main_content"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
      app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />

  </android.support.design.widget.AppBarLayout>

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout>

效果：

效果顯示，視圖滾動時，Toolbar會隱藏，這個效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout實現(xiàn)的。通過AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子布局，Toobar有app:layout_scrollFlags屬性，這就是控制滑動時視圖效果的屬性。app:layout_scrollFlags有四個值：

1.scroll: 所有想滾動出屏幕的view都需要設置這個flag，沒有設置這個flag的view將被固定在屏幕頂部。例如，TabLayout 沒有設置這個值，將會停留在屏幕頂部。

2.enterAlways: 設置這個flag時，向下的滾動都會導致該view變?yōu)榭梢?，啟用快速“返回模式”?/p>

3.enterAlwaysCollapsed: 當你的視圖已經(jīng)設置minHeight屬性又使用此標志時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。

4.exitUntilCollapsed: 滾動退出屏幕，最后折疊在頂端。

為了ToolBar可以滾動，CoordinatorLayout里面,放一個帶有可滾動的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滾動的View。CoordinatorLayout包含的子視圖中帶有滾動屬性的View需要設置app:layout_behavior屬性。例如，示例中Viewpager設置了此屬性。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

為了使得Toolbar有滑動效果，必須做到如下三點:
1. CoordinatorLayout作為布局的父布局容器。
2. 給需要滑動的組件設置 app:layout_scrollFlags=”scroll|enterAlways” 屬性。
3. 給滑動的組件設置app:layout_behavior屬性

3.2 AppBarLayout嵌套CollapsingToolbarLayout

<?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:id="@+id/main_content"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">

  <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
      android:id="@+id/collapsing_toolbar"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_scrollFlags="scroll|exitUntilCollapsed"
      android:fitsSystemWindows="true"
      app:contentScrim="?attr/colorPrimary"
      app:expandedTitleMarginStart="48dp"
      app:expandedTitleMarginEnd="64dp">

      <ImageView
        android:id="@+id/backdrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:fitsSystemWindows="true"
        android:src="@drawable/header"
        app:layout_collapseMode="parallax"
        />

      <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>

  </android.support.design.widget.AppBarLayout>

  <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:paddingTop="24dp">

      <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp">

        <LinearLayout
          style="@style/Widget.CardContent"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

          <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="CardView"
            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

          <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/card_string" />

        </LinearLayout>

      </android.support.v7.widget.CardView>
     ……
    </LinearLayout>

  </android.support.v4.widget.NestedScrollView>

  <android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_done"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

</android.support.design.widget.CoordinatorLayout>

效果：

這種效果在詳情頁面用的較多，展示個性化內(nèi)容，圖像有強烈的吸引力。這個效果重點使用了CollapsingToolbarLayout 。
CollapsingToolbarLayout可實現(xiàn)Toolbar的折疊效果。CollapsingToolbarLayout的子視圖類似與LinearLayout垂直方向排放。

CollapsingToolbarLayout 提供以下屬性和方法是用：
1. Collapsing title：ToolBar的標題，當CollapsingToolbarLayout全屏沒有折疊時，title顯示的是大字體，在折疊的過程中，title不斷變小到一定大小的效果。你可以調(diào)用setTitle(CharSequence)方法設置title。
2. Content scrim：ToolBar被折疊到頂部固定時候的背景，你可以調(diào)用setContentScrim(Drawable)方法改變背景或者在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
3. Status bar scrim：狀態(tài)欄的背景，調(diào)用方法setStatusBarScrim(Drawable)。還沒研究明白，不過這個只能在Android5.0以上系統(tǒng)有效果。
4. Parallax scrolling children：CollapsingToolbarLayout滑動時，子視圖的視覺差，可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變。值de的范圍[0.0,1.0]，值越大視察越大。
5. CollapseMode ：子視圖的折疊模式，在子視圖設置，有兩種“pin”：固定模式，在折疊的時候最后固定在頂端；“parallax”：視差模式，在折疊的時候會有個視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變。

CoordinatorLayout 還提供了一個 layout_anchor 的屬性，連同 layout_anchorGravity 一起，可以用來放置與其他視圖關聯(lián)在一起的懸浮視圖（如 FloatingActionButton）。本例中使用FloatingActionButton。

通過下面的參數(shù)設置了FloatingActionButton的位置，兩個屬性共同作用使得FAB 浮動按鈕也能折疊消失，展現(xiàn)。

app:layout_anchor="@id/appbar"

app:layout_anchorGravity="bottom|right|end"

使用CollapsingToolbarLayout實現(xiàn)折疊效果，需要注意3點
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子視圖設置layout_collapseMode屬性
3. 關聯(lián)懸浮視圖設置app:layout_anchor，app:layout_anchorGravity屬性

四、自定義behavior

CoordinatorLayout功能如此強大，而他的神奇之處在于Behavior對象，CoordinatorLayout自己并不控制View，所有的控制權(quán)都在Behavior。前面寫到了FloatingActionButton.Behavior，AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior。 AppBarLayout中有兩個Behavior，一個是拿來給它自己用的，另一個是拿來給它的兄弟結(jié)點用的。這些Behavior實現(xiàn)了復雜的控制功能。系統(tǒng)的Behavior畢竟有限，我們可以通過自定義的方式來實現(xiàn)自己的Behavior。

通過 CoordinatorLayout.Behavior(YourView.Behavior.class) 來定義自己的Behavior，并在layout 文件中設置 app:layout_behavior=”com.example.app.YourView$Behavior” 來達到效果。

自定義Behavior 需要重寫兩個方法：

public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) 

public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)

如下面的例子，實現(xiàn)了點擊FloatingActionButton點擊旋轉(zhuǎn)90度，并適配Snackbar。

public class RotateBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
  private static final String TAG = RotateBehavior.class.getSimpleName();

  public RotateBehavior() {
  }

  public RotateBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  @Override
  public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    return dependency instanceof Snackbar.SnackbarLayout;
  }

  @Override
  public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    float translationY = getFabTranslationYForSnackbar(parent, child);
    float percentComplete = -translationY / dependency.getHeight();
    child.setRotation(-90 * percentComplete);
    child.setTranslationY(translationY);
    return false;
  }

  private float getFabTranslationYForSnackbar(CoordinatorLayout parent,
                        FloatingActionButton fab) {
    float minOffset = 0;
    final List<View> dependencies = parent.getDependencies(fab);
    for (int i = 0, z = dependencies.size(); i < z; i++) {
      final View view = dependencies.get(i);
      if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {
        minOffset = Math.min(minOffset,
            ViewCompat.getTranslationY(view) - view.getHeight());
      }
    }

    return minOffset;
  }
}

<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/main_content"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_done"
    app:layout_behavior="com.meizu.coordinatorlayoutdemo.RotateBehavior"/>
</android.support.design.widget.CoordinatorLayout>

效果：