Android CoordinatorLayout的簡介與使用

參考文章
CoordinatorLayout 學(xué)習(xí)(一) - CoordinatorLayout的基本使用
CoordinatorLayout使用詳解: 打造折疊懸浮效果

一、概述

CoordinatorLayout顧名思義,協(xié)調(diào)者布局,它遵循Material風(fēng)格,包含在 support Library中。這里所謂的協(xié)調(diào)主要是只協(xié)調(diào)其子布局(child)之間的聯(lián)動,就那簡書App為例,當(dāng)我們下拉文章的時候,上面的ActionBar會自動隱藏,而這里就是上面所說的聯(lián)動。下面將會通過一個簡單的例子來實(shí)現(xiàn)類似的效果,當(dāng)然簡書實(shí)際是怎么實(shí)現(xiàn)的我是不知道的 = =,這里只是舉個例子。

那么CoordinatorLayout是如何實(shí)現(xiàn)child聯(lián)動的呢,答案是Behavier。在CoordinatorLayout內(nèi)部,每個child都必須帶一個Behavior(其實(shí)不攜帶也行,不攜帶就不能被協(xié)調(diào)),CoordinatorLayout就根據(jù)每個child所攜帶的Behavior信息進(jìn)行協(xié)調(diào)。
??這里還需要提一句的是,Behavior不僅僅協(xié)助聯(lián)動,而且還接管了child的三大流程,有點(diǎn)類似于RecyclerViewLayoutManager。

二、AppBarLayout

AppBarLayout繼承于LinearLayout的,默認(rèn)的方向 是Vertical.如果我們想要實(shí)現(xiàn)折疊的ActionBar效果,在CoordinatorLayout中,AppBarLayout絕對是作為首選的控件。
下面先來看一下AppBarLayout的滑動flag

Flag 作用
SCROLL_FLAG_NO_SCROLL 表示該View不能被滑動。也就是說不參與聯(lián)動。
SCROLL_FLAG_SCROLL 表示該View參與聯(lián)動。具體效果需要跟其他Flag組合。
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED 表示當(dāng)View被推出屏幕時,會跟著滑動,直到折疊到View的最小高度;同時只有在其他View(比如說RecyclerView)滑動到頂部才會展開。
SCROLL_FLAG_ENTER_ALWAYS 不管是View是滑出屏幕還是滑進(jìn)屏幕,該View都能立即響應(yīng)滑動事件,跟隨滑動。比如說,如果該View是折疊的,當(dāng)RecyclerView向下滑動時,該View隨時都能跟隨展開;反之亦然。
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED SCROLL_FLAG_ENTER_ALWAYS的基礎(chǔ)上,增加了折疊到固定高度的限制。在View下拉過程中,首先會將該View顯示minHeight的高度,RecyclerView在繼續(xù)下拉(這里以RecyclerView為例)。注意,FlagSCROLL_FLAG_ENTER_ALWAYS前提下生效。
SCROLL_FLAG_SNAP 表示View擁有吸附功能。比如說,當(dāng)前滑動停止,View離底部更近,那么就會折疊;反之則會展開。

注意:上面的這些flag是設(shè)置在其子view上的,例如下面的TextView

<android.support.design.widget.AppBarLayout
        android:id="@+id/bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#FF0000"
            android:gravity="center"
            android:text="Title1"
            android:textSize="16sp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />

    </android.support.design.widget.AppBarLayout>

AppBarLayout必須作為CoordinatorLayout的直接子View,否則它的大部分功能將不會生效,如layout_scrollFlags等。
另外,這個flag是可以使用|來拼接的。

三,使用

首先需要在appbuild.gradle中添加如下依賴:

implementation 'com.android.support:design:28.0.0'

然后是布局文件:

<?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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#FF0000"
            android:gravity="center"
            android:text="Title1"
            android:textSize="16sp"
            app:layout_scrollFlags="enterAlways|exitUntilCollapsed|snap|scroll|enterAlwaysCollapsed" />

        <TextView
            
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#00FF00"
            android:gravity="center"
            android:text="Title2"
            android:textSize="16sp" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

注意這里RecyclerView設(shè)置了一個屬性:app:layout_behavior="@string/appbar_scrolling_view_behavior",也就是前面所說的Behavior了,如果不設(shè)置這個屬性那么RecyclerViewAppBarLayout是不會聯(lián)動的。關(guān)于Behavior后面我會單獨(dú)寫一篇文章進(jìn)行介紹。
由于RecyclerView中只需要填充一下數(shù)據(jù)即可,所以這里就不附上代碼了,下面直接根據(jù)不同的flag附上相應(yīng)的效果圖:

  • SCROLL_FLAG_NO_SCROLL
    不設(shè)置layout_scrollFlags即可:
    省略...
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="no_scroll"
        android:textSize="16sp"/>
    省略...
    

    效果圖:


    noscroll.gif
  • SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
    設(shè)置layout_scrollFlagsexitUntilCollapsed
    省略...
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="exitUntilCollapsed"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:textSize="16sp"/>
    省略...
    

    效果圖:


    exitUntilCollapsed.gif
  • SCROLL_FLAG_ENTER_ALWAYS
    設(shè)置layout_scrollFlagsenterAlways——立即響應(yīng)滑動事件:
    省略...
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="enterAlways"
        app:layout_scrollFlags="scroll|enterAlways"
        android:textSize="16sp"/>
    省略...
    

    效果圖:


    enterAlaways.gif
  • SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED

設(shè)置layout_scrollFlagsscroll|enterAlways|enterAlwaysCollapsed——立即響應(yīng)滑動事件且先顯示最小高度。注意需要同時設(shè)置enterAlwaysenterAlwaysCollapsed兩個標(biāo)記位才能實(shí)現(xiàn)效果:

省略...
<TextView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:minHeight="20dp"
    android:background="#FF0000"
    android:gravity="center"
    android:text="enterAlwaysCollapsed"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
    android:textSize="16sp"/>
省略...

效果圖:


enterAlwaysCollapsed.gif
  • SCROLL_FLAG_SNAP

設(shè)置layout_scrollFlagssnap——吸附效果:

省略...
<TextView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:minHeight="20dp"
    android:background="#FF0000"
    android:gravity="center"
    android:text="snap"
    app:layout_scrollFlags="scroll|snap"
    android:textSize="16sp"/>
省略...

效果圖:


snap.gif

四、總結(jié)

  1. AppBarLayout必須作為CoordinatorLayout的直接子View,否則它的大部分功能將不會生效。
  2. AppBarLayout聯(lián)動的View需要設(shè)置layout_behavior屬性
  3. 想要實(shí)現(xiàn)聯(lián)動效果,其實(shí)只有exitUntilCollapsedenterAlways、enterAlwaysCollapsedsnap四種效果,且都需要與scroll配合使用才會生效。
  4. enterAlwaysCollapsed還需要和enterAlways同時使用才會生效,否則只會有exitUntilCollapsed的效果。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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