Android Material Design 中的CorrdinatorLayout使用詳解

轉發(fā)請備注原文地址：https://www.niwoxuexi.com/blog/android/article/191.html
我在找了一些關于CoordinatorLayout
的教程，大部分文章都是講解把CoordinatorLayout, AppbarLayout ,CollapsingToolbarLayout以及Toolbar 等緩和一起使用，這很容易是大家混淆，不知道如何利用CoordinatorLayout使用到不同的場景中。其實CoordinatorLayout的功能并不是局限于與AppBarLayout一起使用，它的功能非常強大，本文將針對CoordinatorLayout的使用進行詳細介紹，在后面再介紹將AppBarLayout和CollapsingToolBarLayout整合CoordinatorLayout一起。那么到底CoordinatorLayout是如何使用的呢，那就聽我細細道來吧~
CoordinatorLayout 到底是什么，能干什么？
先看一下官方的描述吧：
CoordinatorLayout is a super-powered FrameLayout
.
CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views

簡單的說CoordinatorLayout是一個超級的FrameLayout 布局，它的作用是幫助我們協(xié)調它的個個子View的布局，我們先看一個案例動畫組：


稍微解釋一下這個動畫：小面的綠色小球是一個普通的View，上面的飛機是一個ImageView ，我們水平拖動小球，飛機向相反的方向運動；垂直方向拖動小球會跟著相
同的方向運動；
簡而言之：水平方向反向運動，垂直方向同向運動；
這個例子就是運用CoordinatorLayout實現(xiàn)的，當然讓你不用CoordinatorLayout
去實現(xiàn)，應該沒有任何問題，但是代碼的耦合度應該非常大，你的代碼必須要持有
2個View的引用，然后在onTouchEvent里面做各種判斷和邏輯處理，這耦合度未免太傷人傷力了~
而CoordinatorLayout既然號稱能幫我們協(xié)調子View的布局，我們接下來看看CoordinatorLayout如何實現(xiàn)~

<h2>CoordinatorLayout 的使用</h2>

CoordinatorLayout的使用核心是Behavior，Behavior就是執(zhí)行你定制的動作。
看先Behavior的官方解釋吧：
<pre>
Interaction behavior plugin for child views of CoordinatorLayout.
</pre>
翻譯：Behavior就是用來給CoordinatorLayout的子view們實現(xiàn)交互的。
在講Behavior之前必須先理解兩個概念：Child和Dependency，什么意思呢？Child當然是子View的意思了，是誰的子View呢，當然是CoordinatorLayout的子View；其
實Child是指要執(zhí)行動作的CoordinatorLayout的子View。而Dependency是指Child依賴的View。比如上面的gif圖中，綠色的小球的View就是Dependency，上面的小飛機的ImgeView就是Child，上面小飛機的動作是依賴下面的綠色的View。簡而言之，就是如過Dependency這個View發(fā)生了變化，那么Child這個View就要相應發(fā)生變化。發(fā)生變化是具體發(fā)生什么變化呢？這里就要引入Behavior，Child發(fā)生變化的具體執(zhí)行的代碼都是放在Behavior這個類里面。
怎么使用Behavior呢，首先，我們定義一個類，繼承CoordinatorLayout.Behavior<T>,其中，泛型參數(shù)T是我們要執(zhí)行動作的View類，也就是Child。然后就是去實現(xiàn)
Behavior的兩個方法：
<pre>
/**

  • 判斷child的布局是否依賴dependency
    /
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    //返回false表示child不依賴dependency，ture表示依賴
    return true;
    }
    /    *
  • 當dependency發(fā)生改變時（位置、寬高等），執(zhí)行這個函數(shù)
  • 返回true表示child的位置或者是寬高要發(fā)生改變，否則就返回false
    */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
    //根據(jù)dependency的位置，設置child的位置
    return true;
    }
    </pre>
    看了上面的概念后，我們看看具體怎么去實現(xiàn)吧~
    為了響應跟隨手指移動的操作，我們定義一個非常簡單的View，這個View只響應跟隨手指移動，將這個View作為Dependency。由于過于簡單，這個View源碼不粘貼，我們只需知道這個View的類名叫：DependentView。

<h5>先看一下：Behavior的實現(xiàn)：</h5>
<pre>
package com.niwoxuexi.coordinatelayout;
import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
/**

  • Created by zhuxiaocheng on 2017/7/6.
    /
    public class MyBehavior extends CoordinatorLayout.Behavior {
    private int screenWidth;
    public MyBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
    DisplayMetrics display = context.getResources().getDisplayMetrics();
    screenWidth = display.widthPixels;
    }
    /    *
    • 判斷child的布局是否依賴dependency
      /
      @Override
      public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
      //返回false表示child不依賴dependency，ture表示依賴
      return true;
      }
      /      *
    • 當dependency發(fā)生改變時（位置、寬高等），執(zhí)行這個函數(shù)
    • 返回true表示child的位置或者是寬高要發(fā)生改變，否則就返回false
      /
      @Override
      public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
      //根據(jù)dependency的位置，設置child的位置
      int top = dependency.getTop();
      int left = dependency.getLeft();
      int x = screenWidth - left - child.getWidth();
      int y = top - 800;
      setPosition(child, x, y);
      return true;
      }
      private void setPosition(View v, int x, int y) {
      CoordinatorLayout.MarginLayoutParams layoutParams = (CoordinatorLayout.MarginLayoutParams) v.getLayoutParams();
      layoutParams.leftMargin = x;
      layoutParams.topMargin = y;
      v.setLayoutParams(layoutParams);
      }
      }
      </pre>
      再看一下DependentView的實現(xiàn)：
      <pre>
      package com.niwoxuexi.coordinatelayout;
      import android.content.Context;
      import android.support.design.widget.CoordinatorLayout;
      import android.util.AttributeSet;
      import android.util.DisplayMetrics;
      import android.view.View;
      /      *
  • Created by zhuxiaocheng on 2017/7/6.
    /
    public class MyBehavior extends CoordinatorLayout.Behavior {
    private int screenWidth;
    public MyBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
    DisplayMetrics display = context.getResources().getDisplayMetrics();
    screenWidth = display.widthPixels;
    }
    /    *
    • 判斷child的布局是否依賴dependency
      /
      @Override
      public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
      //返回false表示child不依賴dependency，ture表示依賴
      return true;
      }
      /      *
    • 當dependency發(fā)生改變時（位置、寬高等），執(zhí)行這個函數(shù)
    • 返回true表示child的位置或者是寬高要發(fā)生改變，否則就返回false
      */
      @Override
      public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
      //根據(jù)dependency的位置，設置child的位置
      int top = dependency.getTop();
      int left = dependency.getLeft();
      int x = screenWidth - left - child.getWidth();
      int y = top - 800;
      setPosition(child, x, y);
      return true;
      }
      private void setPosition(View v, int x, int y) {
      CoordinatorLayout.MarginLayoutParams layoutParams = (CoordinatorLayout.MarginLayoutParams) v.getLayoutParams();
      layoutParams.leftMargin = x;
      layoutParams.topMargin = y;
      v.setLayoutParams(layoutParams);
      }
      }
      </pre>
      OK，現(xiàn)在我們有了Dependency 的控件DependentView，并且定義好了跟隨Dependency一直變化的動作（Behavior）MyBehavior，接下來我們就要指定好為哪個具體的ImageView實例來綁定這些。
      **方法灰常簡單，直接布局文件指定就好：******

app:layout_behavior="com.niwoxuexi.coordinatelayout.MyBehavior"
直接上代碼，大家自己體會吧
<pre>
<?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"
tools:context="com.niwoxuexi.coordinatelayout.MainActivity">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/plane"
android:scaleType="fitCenter"
android:layout_marginLeft="180dp"
android:layout_marginTop="100dp"
app:layout_behavior="com.niwoxuexi.coordinatelayout.MyBehavior"
/>
<com.niwoxuexi.coordinatelayout.DependentView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/button"
android:layout_marginLeft="180dp"
android:layout_marginTop="460dp" />
</android.support.design.widget.CoordinatorLayout>
</pre>
是不是很簡單呢？我們只需關注Behavior的編寫就好了，把Child和Dependency之間的在xml文件中設置就可以了~
最后是上代碼時間嘍：https://image.niwoxuexi.com/blog/downloadCoordinateLayout.zip

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容