天天看點

Material Design元件之CollapsingToolbarLayout

原文首發于微信公衆号:jzman-blog,歡迎關注交流!

CollapsingToolbarLayout 主要用于實作一個可折疊的标題欄,一般作為 AppBarLayout 的子 View 來使用,下面總結一下 CollapsingToolbarLayout 的使用。

Material Design 系列文章:

Material Design元件之FloatingActionButton

Material Design元件之AppBarLayout

對于 Title 當折疊布局完全可見時 Title 變大,可折疊布局随着向上滑動可見範圍變小 Title 也變小,可以通過如下方式設定 Title 的顔色,具體如下:

這個 Title 的顔色漸變過程由 CollapsingToolbarLayout 完成,當然其他部分屬性也可以在代碼中設定。

單獨在說一下兩個重要屬性,可以作為一個标志位來記:

layout_scrollFlags

layout_collapseMode

layout_scrollFlags:一般使用 CoordinatorLayout、AppBarLayout等這些元件構成的界面,一般都有一個滾動視圖,如 NestedScrollView,滾動視圖一般設定了系統預設的 Behavior,具體如下:

要随着滾動視圖移動的元件,如 ToolBar、CollapsingToolbarLayout 等需要設定 layout_scrollFlags 屬性來指定不同的動作,關于 layout_scrollFlags 值的具體含義請參考之前的一篇文章: Material Design 元件之 AppBarLayout 。

layout_collapseMode:layout_collapseMode 有兩個值可以選擇,如果設定了 pin 的 View 會随着頁面向上滾動固定到頂部,如果設定了 parallax 的 View 會随着頁面的滾動而滾動,此時可以結合另一個屬性 layout_collapseParallaxMultiplier 形成視差滾動的效果。

CollapsingToolbarLayout 的介紹就到此為止,沒有案例當然是不可以,下面是一個簡單的使用案列,布局如下:

下面是顯示效果,具體如下:

Material Design元件之CollapsingToolbarLayout

可以選擇關注微信公衆号:jzman-blog 擷取最新更新,一起交流學習!

Material Design元件之CollapsingToolbarLayout