轉(zhuǎn)發(fā)請(qǐng)備注原文地址：https://www.niwoxuexi.com/blog/android/article/191.html
我在找了一些關(guān)于CoordinatorLayout
的教程篓吁，大部分文章都是講解把CoordinatorLayout, AppbarLayout ,CollapsingToolbarLayout以及Toolbar 等緩和一起使用，這很容易是大家混淆抛腕，不知道如何利用CoordinatorLayout使用到不同的場(chǎng)景中服赎。其實(shí)CoordinatorLayout的功能并不是局限于與AppBarLayout一起使用，它的功能非常強(qiáng)大梁沧，本文將針對(duì)CoordinatorLayout的使用進(jìn)行詳細(xì)介紹檀何，在后面再介紹將AppBarLayout和CollapsingToolBarLayout整合CoordinatorLayout一起。那么到底CoordinatorLayout是如何使用的呢，那就聽我細(xì)細(xì)道來(lái)吧~
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
簡(jiǎn)單的說(shuō)CoordinatorLayout是一個(gè)超級(jí)的FrameLayout 布局，它的作用是幫助我們協(xié)調(diào)它的個(gè)個(gè)子View的布局垛孔，我們先看一個(gè)案例動(dòng)畫組：
稍微解釋一下這個(gè)動(dòng)畫：小面的綠色小球是一個(gè)普通的View藕甩，上面的飛機(jī)是一個(gè)ImageView ，我們水平拖動(dòng)小球周荐，飛機(jī)向相反的方向運(yùn)動(dòng)狭莱；垂直方向拖動(dòng)小球會(huì)跟著相
同的方向運(yùn)動(dòng)；
簡(jiǎn)而言之：水平方向反向運(yùn)動(dòng)概作，垂直方向同向運(yùn)動(dòng)腋妙；
這個(gè)例子就是運(yùn)用CoordinatorLayout實(shí)現(xiàn)的，當(dāng)然讓你不用CoordinatorLayout
去實(shí)現(xiàn)讯榕，應(yīng)該沒有任何問(wèn)題骤素，但是代碼的耦合度應(yīng)該非常大，你的代碼必須要持有
2個(gè)View的引用愚屁，然后在onTouchEvent里面做各種判斷和邏輯處理济竹，這耦合度未免太傷人傷力了~
而CoordinatorLayout既然號(hào)稱能幫我們協(xié)調(diào)子View的布局，我們接下來(lái)看看CoordinatorLayout如何實(shí)現(xiàn)~
<h2>CoordinatorLayout 的使用</h2>
CoordinatorLayout的使用核心是Behavior集绰，Behavior就是執(zhí)行你定制的動(dòng)作规辱。
看先Behavior的官方解釋吧：
<pre>
Interaction behavior plugin for child views of CoordinatorLayout.
</pre>
翻譯：Behavior就是用來(lái)給CoordinatorLayout的子view們實(shí)現(xiàn)交互的。
在講Behavior之前必須先理解兩個(gè)概念：Child和Dependency栽燕，什么意思呢罕袋？Child當(dāng)然是子View的意思了，是誰(shuí)的子View呢碍岔，當(dāng)然是CoordinatorLayout的子View浴讯；其
實(shí)Child是指要執(zhí)行動(dòng)作的CoordinatorLayout的子View。而Dependency是指Child依賴的View蔼啦。比如上面的gif圖中榆纽，綠色的小球的View就是Dependency，上面的小飛機(jī)的ImgeView就是Child捏肢，上面小飛機(jī)的動(dòng)作是依賴下面的綠色的View奈籽。簡(jiǎn)而言之，就是如過(guò)Dependency這個(gè)View發(fā)生了變化鸵赫，那么Child這個(gè)View就要相應(yīng)發(fā)生變化衣屏。發(fā)生變化是具體發(fā)生什么變化呢？這里就要引入Behavior辩棒，Child發(fā)生變化的具體執(zhí)行的代碼都是放在Behavior這個(gè)類里面狼忱。
怎么使用Behavior呢膨疏，首先，我們定義一個(gè)類钻弄，繼承CoordinatorLayout.Behavior<T>,其中佃却，泛型參數(shù)T是我們要執(zhí)行動(dòng)作的View類，也就是Child窘俺。然后就是去實(shí)現(xiàn)
Behavior的兩個(gè)方法：
<pre>
/**
- 判斷child的布局是否依賴dependency
/
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
//返回false表示child不依賴dependency饲帅，ture表示依賴
return true;
}
/* - 當(dāng)dependency發(fā)生改變時(shí)（位置、寬高等）批销，執(zhí)行這個(gè)函數(shù)
- 返回true表示child的位置或者是寬高要發(fā)生改變洒闸，否則就返回false
*/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
//根據(jù)dependency的位置，設(shè)置child的位置
return true;
}
</pre>
看了上面的概念后均芽，我們看看具體怎么去實(shí)現(xiàn)吧~
為了響應(yīng)跟隨手指移動(dòng)的操作，我們定義一個(gè)非常簡(jiǎn)單的View单鹿，這個(gè)View只響應(yīng)跟隨手指移動(dòng)掀宋，將這個(gè)View作為Dependency。由于過(guò)于簡(jiǎn)單仲锄，這個(gè)View源碼不粘貼劲妙，我們只需知道這個(gè)View的類名叫：DependentView。
<h5>先看一下：Behavior的實(shí)現(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;
}
/* - 當(dāng)dependency發(fā)生改變時(shí)（位置镣奋、寬高等），執(zhí)行這個(gè)函數(shù)
- 返回true表示child的位置或者是寬高要發(fā)生改變怀愧，否則就返回false
/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
//根據(jù)dependency的位置侨颈，設(shè)置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的實(shí)現(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;
/*
- 判斷child的布局是否依賴dependency
- 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;
}
/* - 當(dāng)dependency發(fā)生改變時(shí)（位置芯义、寬高等）哈垢，執(zhí)行這個(gè)函數(shù)
- 返回true表示child的位置或者是寬高要發(fā)生改變，否則就返回false
*/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
//根據(jù)dependency的位置扛拨，設(shè)置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一直變化的動(dòng)作（Behavior）MyBehavior绑警，接下來(lái)我們就要指定好為哪個(gè)具體的ImageView實(shí)例來(lái)綁定這些求泰。
**方法灰常簡(jiǎn)單，直接布局文件指定就好：******
- 判斷child的布局是否依賴dependency
app:layout_behavior="com.niwoxuexi.coordinatelayout.MyBehavior"
直接上代碼计盒，大家自己體會(huì)吧
<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>
是不是很簡(jiǎn)單呢渴频？我們只需關(guān)注Behavior的編寫就好了，把Child和Dependency之間的在xml文件中設(shè)置就可以了~
最后是上代碼時(shí)間嘍：https://image.niwoxuexi.com/blog/downloadCoordinateLayout.zip
