Coordinator Layout使用

houziershi發表於2018-12-10

  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);
    }    
}
複製程式碼

參考資料

相關文章