??最近忙完了學校的事情,終于又成功的跑去公司上班了(還好公司沒有嫌棄我菜????)。在學校廢了半年多,感覺好多東西都不太會了,所以覺得自己應該找點事情來做,于是選中學習CoordinatorLayout
。其實在昨年,我就對CoordinatorLayout
進行了簡單的學習,不過當時學習的重點放在了嵌套滑動,從而未對CoordinatorLayout
進行深入和系統的學習,這個也算是昨年留下的一個遺憾。因此,我覺得還是應該彌補一下。
??樓主寫一個系列文章來詳細的介紹CoordinatorLayout
,分別會介紹它的基本使用,Behavior
的原理解析以及自定義,最后就是CoordinatorLayout
的擴展,這部分的內容不固定,篇幅也不固定。
??本文參考文章
1. 概述
??作為本系列文章第一篇文章,我覺得還是有必要簡單介紹一下CoordinatorLayout
。
??CoordinatorLayout
顧名思義,協調者布局。所謂的協調者布局,它主要是協調誰,協調啥呢?我相信大家在學這個布局時,都會思考這兩個問題。其實說的簡單點,協調者布局主要協調child之間的聯動。請注意我的措辭,child之間的聯動。
??可能有的同學對聯動還是有點陌生,我簡單的舉一個例子,比如說,我們在滑動一個RecyclerView
,存在一個View
需要在RecyclerView
滑動時做相應的動作,例如,位移變化,縮放變化等等。我相信這種場景還是非常常見的吧。這種場景就可以稱之為child之間聯動。
??而CoordinatorLayout
是怎么進行協調呢?主要依靠一個插件--Behavior
。在CoordinatorLayout
內部,每個child都必須帶一個Behavior
(其實不攜帶也行,不攜帶就不能被協調),CoordinatorLayout
就根據每個child所攜帶的Behavior
信息進行協調。
??這里還需要提一句的是,Behavior
不僅僅協助聯動,而且還是接管了child的三大流程,有點類似于RecyclerView
的LayoutManager
。
??而Behavior
是怎么進行協助聯動呢?這就涉及到嵌套滑動的相關知識,總的來說,Behavior
包括整個CoordinatorLayout
體系就是對嵌套滑動的應用和實現。所以,我們便知道了,嵌套滑動到底有多么重要了。
??本文主要介紹CoordinatorLayout
的基本使用,主要是介紹CoordinatorLayout
與AppBarLayout
的搭配使用。
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>
??這里需要幾點,如下:
- 我在
AppBarLayout
里面放了兩個View,其中一個設置scrollFlags
,一個沒有設置。沒有設置的是不會折疊的。- 在這里,
AppBarLayout
并沒有設置Behavior
,而RecyclerView
卻設置了的。我統一的解釋一下,在CoordinatorLayout
內部,理論上每個View必須攜帶一個Behavior
,而這里AppBarLayout
沒有攜帶是因為它本身就有,所以不需要申明(在后面,我們會看到幾種設置Behavior
的方式,這里買一個關子。)
??然后,我們來看看效果:
??這里,我不再介紹其他Flag的效果,有興趣可以嘗試一下。
3. CollapsingToolbarLayout
??接下來,我們再來看一下CollapsingToolbarLayout
。CollapsingToolbarLayout
主要是實現折疊布局的,我們來看看是怎么使用的。首先,我們來看看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
作為協調者,肯定是非常重要的,具體介紹在后續的文章會詳細的分析。在這里先對本文做一個簡單的總結。
- 使用
AppBarLayout
時,我們需要注意4種flag的不同點。CollapsingToolbarLayout
需要作為AppBarLayout
的子View才會有效,同時還需要注意它的3種flag。
??如果不出意外的話,下一篇文章我們將分析RecyclerView
和AppBarLayout
的聯動。