說(shuō)清楚協(xié)調(diào)布局CoordinatorLayout

提起協(xié)調(diào)布局CoordinatorLayout,與之常一起使用的AppbarLayout、CollapsingToolbarLayout 以及Toolbar免不了也要爭(zhēng)先恐后的出鏡。
這不由得讓我們產(chǎn)生一種錯(cuò)覺(jué),好像使用CoordinatorLayout,一定
捎帶著AppbarLayout、CollapsingToolbarLayout和Toolbar。
如果你真的這么想,可見(jiàn)你并不了解協(xié)調(diào)布局CoordinatorLayout的本質(zhì),
So 我們先說(shuō)說(shuō)它的本質(zhì):

CoordinatorLayout:協(xié)調(diào)子View的布局

看見(jiàn)這句是不是更糊涂了,沒(méi)關(guān)系,我們來(lái)看一組動(dòng)畫(huà)


GIF1.gif

描述下此動(dòng)畫(huà):一個(gè)button隨著手勢(shì)移動(dòng),而另一個(gè)圖片,會(huì)跟隨這個(gè)button而動(dòng)。 由于圖片隨著button動(dòng),我們說(shuō),圖片依賴于button的運(yùn)動(dòng)而動(dòng)。那么二者的關(guān)系我們就了解了。

在協(xié)調(diào)布局中,我們把如動(dòng)畫(huà)中ImageView(需要依賴其他view而運(yùn)行的view)稱之為CoordinatorLayout
的Child ,而button稱為Dependency。 
Child:是指要執(zhí)行動(dòng)作的CoordinatorLayout的子View
Dependency:Dependency是指Child依賴的View。 
Dependenc與child的關(guān)系: Child依賴Dependency。

簡(jiǎn)而言之, Dependency 發(fā)生了變化,那么Child 就要相應(yīng)發(fā)生變化
而CoordinatorLayout的核心,就是協(xié)調(diào)二者的運(yùn)動(dòng)。協(xié)調(diào)二者的運(yùn)動(dòng)這件事,主要依靠Behavior。

Behavior就是執(zhí)行你定制的動(dòng)作: Child如何根據(jù)Dependency的變化而變化,具體邏輯都是存放于Behavior里。
Behavior的使用:
首先,我們定義一個(gè)類,繼承CoordinatorLayout。Behavior<T>,其中,泛型參數(shù)T是我們要執(zhí)行動(dòng)作的
View類,也就是Child。然后就是去實(shí)現(xiàn)Behavior的兩個(gè)方法:
Behavior有兩個(gè)關(guān)鍵方法:
/**
 * 判斷child的布局是否依賴dependency
 * @param parent
 * @param child
 * @param dependency
 * @return true 表示依賴 false表示不依賴
 */
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    //如果dependency是MoveView的實(shí)例,說(shuō)明它就是我們所需要的Dependency
    return dependency instanceof MoveView;
}

/**
 * 每當(dāng)dependency位置發(fā)生變化,都會(huì)執(zhí)行onDependentView的Changed方法
 * 當(dāng)dependency發(fā)生變化時(shí),(位置,寬高),執(zhí)行這個(gè)函數(shù)
 * @param parent
 * @param child
 * @param dependency
 * @return 返回true表示child的位置或者寬高會(huì)隨著改變,否則返回false
 */
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        //TODO
    return true;
}

了解了以上概念,我們來(lái)看代碼吧:

  1. 自定義一個(gè)MoveView,讓它繼承Button,重寫(xiě)onTouchEvent方法
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float rawX = event.getRawX();
        float rawY = event.getRawY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                this.setX(this.getX() + rawX - mLastX);
                this.setY(this.getY() + rawY - mLastY);
                break;
        }
        mLastX = event.getRawX();
        mLastY = event.getRawY();
        return true;
    }

控件跟隨手勢(shì)移動(dòng)的代碼,別告訴我你看不懂...

  1. 繼承Behavior并實(shí)現(xiàn)layoutDependsOn和onDependentViewChanged方法:
public class MyBehavior extends CoordinatorLayout.Behavior<ImageView>{

    public MyBehavior(Context context, AttributeSet attrs) {
        super(context,attrs);
    }

    /**
     * 判斷child的布局是否依賴dependency
     * @param parent
     * @param child
     * @param dependency
     * @return true 表示依賴 false表示不依賴
     */
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) {
        //如果dependency是MoveView的實(shí)例,說(shuō)明它就是我們所需要的Dependency
        return dependency instanceof MoveView;
    }

    /**
     * 每當(dāng)dependency位置發(fā)生變化,都會(huì)執(zhí)行onDependentView的Changed方法
     * 當(dāng)dependency發(fā)生變化時(shí),(位置,寬高),執(zhí)行這個(gè)函數(shù)
     * @param parent
     * @param child
     * @param dependency
     * @return 返回true表示child的位置或者寬高會(huì)隨著改變,否則返回false
     */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) {
        child.setX(dependency.getX() + 100);
        child.setY(dependency.getY()-20);
        return true;
    }
}

現(xiàn)在我們?yōu)镮mageView指定了Dependency,并且定義好了跟隨Dependency一直變化的動(dòng)作(Behavior),接下來(lái)我們就要指定二者是怎樣關(guān)聯(lián)在一起的。
方法很簡(jiǎn)單,直接在布局文件指定:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.study.coodinatorlayout.MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shb"
        app:layout_behavior="com.study.coodinatorlayout.MyBehavior" />

    <com.study.coodinatorlayout.MoveView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#FF00F7"
        android:text="Hello"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:textStyle="bold"/>
</android.support.design.widget.CoordinatorLayout>
關(guān)鍵一句在這里
app:layout_behavior="com.study.coodinatorlayout.MyBehavior"

由此我們也可以看出,Behavior將Child和Dependency之間的關(guān)系完全解耦了。

有個(gè)坑要注意:

在CoordinatorLayout布局中,只有在CroodinatorLayout的根布局下的View(用其他RelativeLayout或者LinearLayout這樣的ViewGroup嵌套無(wú)用),才能為其設(shè)置依賴關(guān)系:
app:layout_behavior(此時(shí)才有自動(dòng)提示哦,沒(méi)有自動(dòng)提示的也別費(fèi)勁敲了,因?yàn)槟銓?xiě)錯(cuò)地方了)

最后再總結(jié)下
CoordinatorLayout:是協(xié)調(diào)布局,協(xié)調(diào)其child View與dependencyView的運(yùn)動(dòng)
核心就兩塊:
1. childview和dependencyview:其中child的動(dòng)作依賴與dependency的動(dòng)作
2. 依賴關(guān)系我們通過(guò)繼承Behavior來(lái)實(shí)現(xiàn),關(guān)鍵要重寫(xiě)B(tài)ehavior的兩個(gè)方法
3. 二者關(guān)聯(lián)通過(guò)布局文件屬性app:layout_behavior

獻(xiàn)上代碼,github地址:https://github.com/Shmily701/CoordinatorLayout
此篇簡(jiǎn)單介紹什么是CoordinatorLayout,下一篇算是進(jìn)階版的,敬請(qǐng)期待...

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容