我的CSDN博客同步發(fā)布:CoordinatorLayout的使用如此簡單
曾在網(wǎng)上找了一些關(guān)于CoordinatorLayout
的教程斟湃,大部分文章都是把CoordinatorLayout
、AppbarLayout
、CollapsingToolbarLayout
以及Toolbar
等一起使用來介紹活尊,這讓我不知不覺在心中認(rèn)為把這幾個布局要一起使用,而且只是用于那種場景中陨闹。其實CoordinatorLayout
的功能并不是局限于與AppBarLayout
一起使用扑浸,它的功能強(qiáng)大著呢,本文主要對CoordinatorLayout
的使用進(jìn)行介紹梁丘,后面再寫一篇文章將AppBarLayout
和CollapsingToolBarLayout
整合CoordinatorLayout
一起侵浸。那么到底CoordinatorLayout有多好用,請往下感受吧~
CoordinatorLayout能做什么
在學(xué)習(xí)CoordinatorLayout
之前氛谜,很有必要了解CoordinatorLayout
能幫我們做什么掏觉,從名字上可以看出,就是幫我們協(xié)調(diào)子View
的值漫。怎么個協(xié)調(diào)法呢?就是它根據(jù)我們的定制澳腹,幫助我們協(xié)調(diào)各個子View
的布局。我們先看一組動畫圖~
稍微解釋一下這個動畫杨何,藍(lán)色的矩形是我們一個普通View
酱塔,黃色的Hello是一個Button
。我們水平拖動藍(lán)色矩形時危虱,黃色Button
沿著與藍(lán)色矩形相反方向移動羊娃;豎直移動藍(lán)色矩形時,黃色也跟著豎直槽地。簡而言之:它們在豎直方向同步移動迁沫,在水平方向相反。
這個效果如果讓你不用CoordinatorLayout
去實現(xiàn)捌蚊,應(yīng)該沒有任何問題集畅,但是代碼的耦合度應(yīng)該非常大,你的代碼必須要持有2個View
的引用缅糟,然后在onTouchEvent
里面做各種判斷挺智。如果我們想要實現(xiàn)的功能是,有更多的View
要根據(jù)藍(lán)色的View
的移動相應(yīng)作出響應(yīng)窗宦,那么那就得在藍(lán)色View
的onTounchEvent
里面針對其他的View處理各種邏輯赦颇。這耦合度未免太傷感了~
而CoordinatorLayout
既然號稱能幫我們協(xié)調(diào)子View的布局,我們接下來看看CoordinatorLayout
如何實現(xiàn)~
CoordinatorLayout使用
CoordinatorLayout
的使用核心是Behavior
赴涵,Behavior
就是執(zhí)行你定制的動作媒怯。在講Behavior
之前必須先理解兩個概念:Child
和Dependency
,什么意思呢髓窜?Child
當(dāng)然是子View
的意思了扇苞,是誰的子View
呢欺殿,當(dāng)然是CoordinatorLayout
的子View
;其實Child
是指要執(zhí)行動作的CoordinatorLayout
的子View
鳖敷。而Dependency
是指Child
依賴的View
脖苏。比如上面的gif圖中,藍(lán)色的View
就是Dependency
定踱,黃色的View
就是Child
棍潘,因為黃色的View的動作是依賴于藍(lán)色的View
。簡而言之崖媚,就是如過Dependency
這個View發(fā)生了變化亦歉,那么Child
這個View
就要相應(yīng)發(fā)生變化。發(fā)生變化是具體發(fā)生什么變化呢至扰?這里就要引入Behavior
鳍徽,Child
發(fā)生變化的具體執(zhí)行的代碼都是放在Behavior
這個類里面。
怎么使用Behavior
呢敢课,首先,我們定義一個類绷杜,繼承CoordinatorLayout.Behavior<T>
,其中直秆,泛型參數(shù)T是我們要執(zhí)行動作的View
類,也就是Child
鞭盟。然后就是去實現(xiàn)Behavior
的兩個方法:
/**
* 判斷child的布局是否依賴dependency
*/
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, T child, View dependency) {
boolean rs;
//根據(jù)邏輯判斷rs的取值
//返回false表示child不依賴dependency圾结,ture表示依賴
return rs;
}
/**
* 當(dāng)dependency發(fā)生改變時(位置、寬高等)齿诉,執(zhí)行這個函數(shù)
* 返回true表示child的位置或者是寬高要發(fā)生改變筝野,否則就返回false
*/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, T child, View dependency) {
//child要執(zhí)行的具體動作
return true;
}
有了上面的概念后,我們看看具體怎么去實現(xiàn)吧~
為了響應(yīng)跟隨手指移動的操作粤剧,我們定義一個非常簡單的View
歇竟,這個View
只響應(yīng)跟隨手指移動,將這個View
作為Dependency
抵恋。由于過于簡單焕议,這個View
源碼不粘貼,我們只需知道這個View
的類名叫:TempView
弧关。
我們看看Behavior的使用:
package com.hc.studycoordinatelayout;
import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.widget.Button;
/**
* Package com.hc.studycoordinatelayout
* Created by HuaChao on 2016/6/1.
*/
public class MyBehavior extends CoordinatorLayout.Behavior<Button> {
private int width;
public MyBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
DisplayMetrics display = context.getResources().getDisplayMetrics();
width = display.widthPixels;
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, Button child, View dependency) {
//如果dependency是TempView的實例盅安,說明它就是我們所需要的Dependency
return dependency instanceof TempView;
}
//每次dependency位置發(fā)生變化,都會執(zhí)行onDependentViewChanged方法
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, Button btn, View dependency) {
//根據(jù)dependency的位置世囊,設(shè)置Button的位置
int top = dependency.getTop();
int left = dependency.getLeft();
int x = width - left - btn.getWidth();
int y = top;
setPosition(btn, 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);
}
}
OK别瞭,現(xiàn)在我們?yōu)?code>Button類指定了Dependency
,并且定義好了跟隨Dependency
一直變化的動作(Behavior
)株憾,接下來我們就要指定好為哪個具體的Button
實例來綁定這些蝙寨。方法很簡單,直接在布局文件指定就好:
<?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.hc.studycoordinatelayout.MainActivity">
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="300dp"
android:layout_marginTop="300dp"
android:background="#FFCC00"
android:text="Hello"
app:layout_behavior="com.hc.studycoordinatelayout.MyBehavior" />
<com.hc.studycoordinatelayout.TempView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="300dp"
android:layout_marginTop="300dp"
android:background="#3366CC" />
</android.support.design.widget.CoordinatorLayout>
是不是很簡單呢?我們只需關(guān)注Behavior
的編寫就好了籽慢,把Child
和Dependency
之間的關(guān)系完全解耦了~