Coordinator Layout使用

  15年的Google I/O大會上，Google發佈了一個新的Material Design支持庫。在它的UI組件中，你能夠看到一些新的***ViewGroups***，例如：AppbarLayout， CollapsingToolbarLayout***和***CoordinatorLayout。恰當地組合和配置這些***ViewGroups*** 能夠很是強大，所以我決定寫一篇如何使用它的文章，並介紹一些相關的***tips***。

掘金不支持動圖，因此我發佈到公衆號上了，點擊連接

CoordinatorLayout

顧名思義，這個***ViewGroup***的功能是協調其中的子***View***。 請看下面的圖片：

圖1

在這個例子中，你能夠直觀地看到View之間是如何相互協調的，某些***View***是如何依賴其它***View***的。***CoordinatorLayout***是這些View結構中最簡單的一個。

<?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:background="@android:color/background_light"
    android:fitsSystemWindows="true"
    >

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            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/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/material_flat"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/main.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"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:lineSpacingExtra="8dp"
            android:text="@string/lorem"
            android:padding="@dimen/activity_horizontal_margin"
            />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:src="@drawable/ic_comment_24dp"
        app:layout_anchor="@id/main.appbar"
        app:layout_anchorGravity="bottom|right|end"
        />
</android.support.design.widget.CoordinatorLayout>

複製代碼

考慮該佈局的骨架，在***CoordinatorLayout*** 只有三個子***View***：一個 AppbarLayout，一個***scrolleable*** 視圖和一個錨定 FloatingActionButton。

AppBarLayout

AppBarLayout 繼承自***LinearLayout***，子***View*** 垂直放置。添加某些參數，子***View***能夠在滾動內容時管理它們的行爲。 一開始可能聽起來很混亂，因此若是我認爲一張圖片賽過千言萬語，那麼.gif就更好了：

圖2

該圖中AppBarLayout是藍色***View***，collapsing image下面是***Toolbar***和***LinearLayout***，該***LinearLayout***包含一個標題和副標題，它下面還有一個***TabLayout***。

咱們能夠經過 AppbarLayout 的參數：layout_scrollFlags 來管理子***View***（不包括子***View***的子***View***）的行爲。值：scroll , 在這個UI例子中，它幾乎存在於全部的***View*** 中。若是未在任何子***View***中設定值，則***AppbarLayout*** 的子***View***會保持靜態，容許可滑動的內容在其後面滑動。

使用值：snap ，咱們避免陷入mid-animation-states，這意味着動畫將始終隱藏或擴展其視圖的全部高度。

用戶滾動的時候，LinearLayout 中的標題和副標題將始終顯示(enterAlways 值)，而TabLayout將永遠可見的，由於它沒有設置任何標誌（值）。

正如你說看到的，***AppbarLayout***真正的威力在於設置它的子***View***的滾動值能夠管理它們的行爲。

<AppBarLayout>
    <CollapsingToolbarLayout
        app:layout_scrollFlags="scroll|snap"
        />

    <Toolbar
        app:layout_scrollFlags="scroll|snap"
        />

    <LinearLayout
        android:id="+id/title_container"
        app:layout_scrollFlags="scroll|enterAlways"
        />

    <TabLayout /> <!-- no flags -->
</AppBarLayout>
複製代碼

這些都是根據Google Developers docs提供的參數。不管如何，個人建議是老是寫個Demo驗證。本文末尾有這些實現的Github庫。

AppbarLayout flags

SCROLL_FLAG_ENTER_ALWAYS：當進入（在屏幕上滾動）時，不管滾動視圖是否也在滾動，視圖都將滾動任何向下滾動事件。

SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED：'enterAlways '的另外一個標誌，它修改返回的視圖，最初只回滾到它的摺疊高度。

SCROLL_FLAG_EXIT_UNTIL_COLLAPSED：當退出（滾動屏幕）時，視圖將滾動直到「摺疊」。

SCROLL_FLAG_SCROLL：視圖將滾動與滾動事件直接相關。

SCROLL_FLAG_SNAP：滾動結束時，若是視圖僅部分可見，則它將被捕捉並滾動到其最近的邊緣。

CoordinatorLayout Behaviors

讓咱們作一點測試，轉到Android Studio（> = 1.4）並使用模板建立一個項目：Scrolling Activity，不觸及任何內容，咱們編譯它，這就是咱們發現的：

圖3

若是咱們檢查生成的代碼，會發現沒有佈局和java類涉及到滾動時 FloatingActionButton 的縮放動畫。爲何？

答案在於FloatingActionButton源代碼，由於Android Studio v1.2中包含了一個java**反編譯器，ctrl/cmd + click 咱們能夠檢查源代碼並查看會發生什麼：

/*
 * Copyright (C) 2015 The Android Open Source Project
 *
 *  Floating action buttons are used for a
 *  special type of promoted action. 
 *  They are distinguished by a circled icon 
 *  floating above the UI and have special motion behaviors 
 *  related to morphing, launching, and the transferring anchor point.
 * 
 *  blah.. blah.. 
 */
@CoordinatorLayout.DefaultBehavior(
    FloatingActionButton.Behavior.class)
public class FloatingActionButton extends ImageButton {
    ...

    public static class Behavior 
        extends CoordinatorLayout.Behavior<FloatingActionButton> {

        private boolean updateFabVisibility(
           CoordinatorLayout parent, AppBarLayout appBarLayout, 
           FloatingActionButton child {

           if (a long condition) {
                // If the anchor's bottom is below the seam, // we'll animate our FAB out
                child.hide();
            } else {
                // Else, we'll animate our FAB back in child.show(); } } } ... } 複製代碼

負責該縮放動畫的是 design library 引入的新元素***Behavior***，這裏是：***CoordinatorLayout.Behavior***，根據包括滑動在內一些因素，FAB 顯示與否，有趣，對嗎？

SwipeDismissBehavior

繼續深刻研究代碼，若是查看design support library的 widget 包，咱們能找到一個公共類：SwipeDismissBehavior，有了這個新的***Behavior***，在咱們的***CoordinatorLayout***佈局中，咱們很容易實現***swipe to dismiss***功能。

圖4

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_swipe_behavior);
    mCardView = (CardView) findViewById(R.id.swype_card);

    final SwipeDismissBehavior<CardView> swipe 
        = new SwipeDismissBehavior();

        swipe.setSwipeDirection(
            SwipeDismissBehavior.SWIPE_DIRECTION_ANY);

        swipe.setListener(
            new SwipeDismissBehavior.OnDismissListener() {
            @Override public void onDismiss(View view) {
                Toast.makeText(SwipeBehaviorExampleActivity.this,
                    "Card swiped !!", Toast.LENGTH_SHORT).show();
            }

            @Override 
            public void onDragStateChanged(int state) {}
        });

        LayoutParams coordinatorParams = 
            (LayoutParams) mCardView.getLayoutParams();

        coordinatorParams.setBehavior(swipe);
    }
複製代碼

Custom Behaviors

建立一個自定義的 Behavior，它並不像看起來那麼困難。首先咱們必須考慮兩個核心因素：child 和 dependency

圖5

Childs and dependencies

child***是加強行爲的***View，dependency***做爲一個觸發器（trigger）和***child***交互。以下示例，child***將是***ImageView，依賴將是***Toolbar。這樣，若是***Toolbar***移動，***ImageView***也會移動。

圖6

如今咱們來實現咱們已經定義好的概念。第一步是繼承CoordinatorLayout.Behavior，泛型***T*** 是咱們感興趣協調的***View***，這裏是***ImageView***，接着咱們須要重寫着些方法：

• layoutDependsOn
• onDependentViewChanged

方法 layoutDependsOn：每當佈局中發生某些事情的時候都會調用，一旦咱們識別出了依賴關係，方法必須返回***True***，在這個例子中，當用戶滾動時（由於***Toolbar*** 會移動），這個方法會自動觸發，就這樣咱們能使咱們的子***View***看到相應的反應。

@Override
   public boolean layoutDependsOn(
      
      CoordinatorLayout parent, 
      CircleImageView, child, 
      View dependency) {

      return dependency instanceof Toolbar; 
  } 
複製代碼

每當 layoutDependsOn 返回 ***true***時，第二個方法 onDependentViewChanged 將會被調用。這裏，咱們必須實現和假定的依賴相關的動畫，平移或移動。

public boolean onDependentViewChanged(

      CoordinatorLayout parent, 
      CircleImageView avatar, 
      View dependency) {


      modifyAvatarDependingDependencyState(avatar, dependency);
   }

   private void modifyAvatarDependingDependencyState(
    CircleImageView avatar, View dependency) {
        //  avatar.setY(dependency.getY());
        //  avatar.setBlahBlat(dependency.blah / blah);
    } 
複製代碼

完整代碼：

public static class AvatarImageBehavior 
   extends 
CoordinatorLayout.Behavior<CircleImageView> {

   @Override
   public boolean layoutDependsOn(

    CoordinatorLayout parent, 
    CircleImageView, child, 
    View dependency) {

       return dependency instanceof Toolbar; 
  } 

   

  public boolean onDependentViewChanged(
      
    CoordinatorLayout parent, 
    CircleImageView avatar, 
    View dependency) {

      modifyAvatarDependingDependencyState(avatar, dependency);
   }

  private void modifyAvatarDependingDependencyState(
    CircleImageView avatar, View dependency) {
        //  avatar.setY(dependency.getY());
        //  avatar.setBlahBlah(dependency.blah / blah);
    }    
}
複製代碼

參考資料

• Coordinator Behavior Example
• Coordinator Examples
• Introduction to coordinator layout on Android - Grzesiek Gajewski