CoordinatorLayout 學習(一) - CoordinatorLayout的基本使用

??最近忙完了學校的事情,終于又成功的跑去公司上班了(還好公司沒有嫌棄我菜????)。在學校廢了半年多,感覺好多東西都不太會了,所以覺得自己應該找點事情來做,于是選中學習CoordinatorLayout。其實在昨年,我就對CoordinatorLayout進行了簡單的學習,不過當時學習的重點放在了嵌套滑動,從而未對CoordinatorLayout進行深入和系統的學習,這個也算是昨年留下的一個遺憾。因此,我覺得還是應該彌補一下。
??樓主寫一個系列文章來詳細的介紹CoordinatorLayout,分別會介紹它的基本使用,Behavior的原理解析以及自定義,最后就是CoordinatorLayout的擴展,這部分的內容不固定,篇幅也不固定。
??本文參考文章

  1. CoordinatorLayout使用詳解: 打造折疊懸浮效果

1. 概述

??作為本系列文章第一篇文章,我覺得還是有必要簡單介紹一下CoordinatorLayout
??CoordinatorLayout顧名思義,協調者布局。所謂的協調者布局,它主要是協調誰,協調啥呢?我相信大家在學這個布局時,都會思考這兩個問題。其實說的簡單點,協調者布局主要協調child之間的聯動。請注意我的措辭,child之間的聯動。
??可能有的同學對聯動還是有點陌生,我簡單的舉一個例子,比如說,我們在滑動一個RecyclerView,存在一個View需要在RecyclerView滑動時做相應的動作,例如,位移變化,縮放變化等等。我相信這種場景還是非常常見的吧。這種場景就可以稱之為child之間聯動。
??而CoordinatorLayout是怎么進行協調呢?主要依靠一個插件--Behavior。在CoordinatorLayout內部,每個child都必須帶一個Behavior(其實不攜帶也行,不攜帶就不能被協調),CoordinatorLayout就根據每個child所攜帶的Behavior信息進行協調。
??這里還需要提一句的是,Behavior不僅僅協助聯動,而且還是接管了child的三大流程,有點類似于RecyclerViewLayoutManager
??而Behavior是怎么進行協助聯動呢?這就涉及到嵌套滑動的相關知識,總的來說,Behavior包括整個CoordinatorLayout體系就是對嵌套滑動的應用和實現。所以,我們便知道了,嵌套滑動到底有多么重要了。
??本文主要介紹CoordinatorLayout的基本使用,主要是介紹CoordinatorLayoutAppBarLayout的搭配使用。

2. AppBarLayout

??如果我們想要實現折疊的ActionBar效果,在CoordinatorLayout中,AppBarLayout絕對是作為首選的控件。
??在正式介紹AppBarLayout的使用時,我們先來看看幾個Flag,這幾個Flag在AppBarLayout里面非常的重要。

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

??這幾個Flag非常的簡單,我們來看看具體的使用,先來看看布局文件:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#5FF"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
        <View
            android:background="#FF00FF"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

??這里需要幾點,如下:

  1. 我在AppBarLayout里面放了兩個View,其中一個設置scrollFlags,一個沒有設置。沒有設置的是不會折疊的。
  2. 在這里,AppBarLayout并沒有設置Behavior,而RecyclerView卻設置了的。我統一的解釋一下,在CoordinatorLayout內部,理論上每個View必須攜帶一個Behavior,而這里AppBarLayout沒有攜帶是因為它本身就有,所以不需要申明(在后面,我們會看到幾種設置Behavior的方式,這里買一個關子。)

??然后,我們來看看效果:


??這里,我不再介紹其他Flag的效果,有興趣可以嘗試一下。

3. CollapsingToolbarLayout

??接下來,我們再來看一下CollapsingToolbarLayoutCollapsingToolbarLayout主要是實現折疊布局的,我們來看看是怎么使用的。首先,我們來看看CollapsingToolbarLayout的幾個Flag:

名稱 作用
COLLAPSE_MODE_OFF 0 默認值,表示View不會有任何屬性
COLLAPSE_MODE_PIN 1 CollapsingToolbarLayout完全收縮之后,設置該Flag的View會保留在屏幕當中。
COLLAPSE_MODE_PARALLAX 2 設置該Flag的View會跟內容滾動,可以通過setParallaxMultiplier方法來設置視圖差比率,其中0表示毫無視圖差,完全跟內容滾動同步;1表示View完全不動。默認的視圖差為0.5。

??接下來我們看一個Demo:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/demo"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#5FF"
                app:layout_collapseMode="pin" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

??使用CollapsingToolbarLayout時,我們需要注意的是:CollapsingToolbarLayout需要作為AppBarLayout子View。然后我們來看看相關的效果:

4. 總結

??本文主要介紹CoordinatorLayout的基本使用,還是非常簡單的,但是我們從上面的代碼看出,好像根本就沒有介紹它。CoordinatorLayout作為協調者,肯定是非常重要的,具體介紹在后續的文章會詳細的分析。在這里先對本文做一個簡單的總結。

  1. 使用AppBarLayout時,我們需要注意4種flag的不同點。
  2. CollapsingToolbarLayout需要作為AppBarLayout的子View才會有效,同時還需要注意它的3種flag。

??如果不出意外的話,下一篇文章我們將分析RecyclerViewAppBarLayout的聯動。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,791評論 6 545
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,795評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,943評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,057評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,773評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,106評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,082評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,282評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,793評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,507評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,741評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,220評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,929評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,325評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,661評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,482評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,702評論 2 380

推薦閱讀更多精彩內容