原文首發于微信公衆号: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 的介紹就到此為止,沒有案例當然是不可以,下面是一個簡單的使用案列,布局如下:
下面是顯示效果,具體如下:
可以選擇關注微信公衆号:jzman-blog 擷取最新更新,一起交流學習!