Android Material Design新UI控件使用大全 三

序言

在我們對NavigationView側滑,TextInputLayout輸入框,Snackbar彈出提示框,FloatingActionBar圓形button,TabLayout頂部導航欄及CoordinatorLayout有了一定的了解後,我們最後將對AppBarLayout,CollapsingToolbarLayout進行最後的分析,我們先看兩張效果圖,(因為暫時沒找到好的方法來錄制gif,先借用網上的圖)

AppBarLayout

AppBarLayout 是繼承LinerLayout實現的一個ViewGroup容器組件,默認的AppBarLayout是垂直方向的,它的作用是把AppBarLayout所包裹的內容都作為AppBar, 支持手勢滑動操作,可以管理其中的控件在內容滾動時的行為,如圖所示:

---

實現這樣效果的代碼布局如下:<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;">

 

注意:這裡我們將Toolbar和TabLayout共同組成AppbarLayout的內容,並且AppbarLayout必須作為ToolBar的父布局

CoordinatorLayout與AppbarLayout的結合使用

我們知道,AppBarLayout是支持我們的手勢滑動操作的,不過需要跟CoordinatorLayout一起搭配使用,我們先看兩張效果圖,然後再進行分析:

左側是我們初始化的代碼,從上至下分別為Toolbar,TabLayout,ViewPager,底部為一個FloatingActionBar,我們現在來看一下xml文件布局的代碼:

 

我們現在來分析一下整個布局中CoordinatorLayout的作用:

因為CoordinatorLayout是一個超級的FrameLayout,所以我們只要設置android:layout_gravity="bottom|end"這個屬性即可將FloatingActionBar放置在底部靠右的位置;

如果我們想要在手指向上滑動的時候Toolbar隱藏,就需要給Toolbar設置一個屬性,app:layout_scrollFlags="scroll|enterAlways",來確定滾動出屏幕時候的動作,我們現在來解釋一些這些參數:

scroll: 所有想滾動出屏幕的view**都需要**設置這個flag， 沒有設置這個flag的view將被固定在屏幕頂部。例如，TabLayout 沒有設置這個值，將會停留在屏幕頂部。 enterAlways: 配合scroll使用,設置這個flag時，任意向下的滾動都會導致該view變為可見，當向上滑的時候Toolbar就隱藏，下滑的時候顯示，啟用快速“返回模式”。 enterAlwaysCollapsed: 這個flag定義的是何時進入（已經消失之後何時再次顯示）,配合scroll使用,當你的視圖已經設置minHeight屬性又使用此標志時，那麼view將在到達這個最小高度的時候開始顯示，並且從這個時候開始慢慢展開，當滾動到頂部的時候完全展開。 exitUntilCollapsed: 這個flag是定義何時退出，當你定義了一個minHeight，這個view將在滾動到達這個最小高度的時候消失。 注意:這些flag的模式一般是前兩個一起使用或者 scroll與enterAlwaysCollapsed 一起使用,而最後一個flag只有在CollapsingToolbarLayout中才有用,所以這些flag的使用場景,一般都是固定的;

當然,為了使Toolbar可以滾動,還需要一個條件,就是CoordinatorLayout布局下需要包裹一個可以滑動的布局，比如 RecyclerView或者NestedScrollView(ListView及ScrollView不支持),CoordinatorLayout包含的子布局中帶有滾動屬性的View需要設置app:layout_behavior屬性。示例中Viewpager設置了此屬性:app:layout_behavior="@string/appbar_scrolling_view_behavior",這樣一來AppBarLayout就能響應RecyclerView中的滾動事件,CoordinatorLayout在接受到滑動時會通知AppBarLayout 中可滑動的Toolbar可以滑出屏幕了;

總結:如果想讓Toolbar劃出屏幕,需要做到以下4點

CoordinatorLayout作為頂層的父布局 需要給Toolbar也就是想要劃出屏幕的view設置flag值,app:layout_scrollFlags=”scroll|enterAlways” 需要給可滑動的組件設置一個layout_behavior的屬性,示例中為viewpager,app:layout_behavior="@string/appbar_scrolling_view_behavior" 可滑動的組件目前經測試支持RecyclerView,NestedScrollView,示例中viewpager中包含的就是一個RecyclerView

CollapsingToolbarLayout–可折疊的Toolbar

我們知道如果在某些詳情頁面,我們只是在AppbarLayout中使用了可隱藏/展示的Toolbar的話, 只能固定到屏幕頂端並且不能做出好的動畫效果,而且無法控制不同元素如何響應collapsing(折疊)的細節，所以為了達到此目的，CollapsingToolbarLayout就應運而生.

CollapsingToolbarLayout一般都是需要包括一個Toolbar,這樣就可以實現一個可折疊的Toolbar,一般都是作為AppbarLayout的子view使用,CollapsingToolbarLayout的子視圖類似於LinearLayout垂直方向排放。

CollapsingToobarLayout的屬性及用法:

Collapsing title：ToolBar的標題，CollapsingToolbarLayout和Toolbar在一起使用的時候，title會在展開的時候自動變得比較大，而在折疊的時候讓字體變小過渡到默認值。注意，你必須在CollapsingToolbarLayout上調用setTitle()，而不是在Toolbar上進行設置。 Content scrim：ToolBar被折疊到頂部固定時候的背景，你可以調用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。 Status bar scrim：狀態欄的背景，調用方法setStatusBarScrim(Drawable)。 Parallax scrolling children：CollapsingToolbarLayout滑動時，子視圖的視覺因子，可以通過屬性app:layout_collapseParallaxMultiplier=”0.7”來改變。值的范圍[0.0,1.0]，值越大視差越大。 CollapseMode ：子視圖的折疊模式，需要在子視圖設置;
“pin”：固定模式，在折疊的時候最後固定在頂端； “parallax”：視差模式，在折疊的時候會有個視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變。 layout_anchor : 這個是CoordinatorLayout提供的屬性,與layout_anchorGravity 一起使用,可以用來放置與其他視圖關聯在一起的懸浮視圖（如 FloatingActionButton）或者頭像

我們先來看看實現的效果圖:

我們現在看看布局文件的寫法:

 

注意:

我們使用了下面的參數設置了FloatingActionButton的位置，兩個屬性共同作用使得浮動按鈕可以隨著手勢能折疊消失和展現。

app:layout_anchor=”@id/appbar”
app:layout_anchorGravity=”bottom|right|end”

AppBarLayout 的高度layout_height固定，不能 “wrap_content”，如果不固定的話動畫效果不友好

CollapsingToolbarLayout的子視圖設置layout_collapseMode屬性 關聯懸浮視圖設置app:layout_anchor，app:layout_anchorGravity屬性

源碼地址: GitHub
OK,到這裡我們已經將Materil Design的常用控件介紹完畢,下次我們將對自定義的Behavior進行解析,我們將會實現更加酷炫好看的效果,願大家都有美好的一天…