天天看點

CollapsingToolbarLayout使用

我們來看一下collapsingtoolbarlayout的使用場景。

CollapsingToolbarLayout使用

collapsingtoolbarlayout

可以看到,toolbar的标題放大并在下方顯示,當我們向上滑動清單時,頂部header部分的圖檔向上折疊隐藏,标題向上移動并縮小,同時以漸顯式的方式顯示藍色主題,直至高度縮為toolbar的高度并成為toolbar的背景色;向下滑動清單時,header部分逐漸顯示。這個效果就是利用了collapsingtoolbarlayout控件,在講解案例代碼前,先來介紹一下collapsingtoolbarlayout。

collapsingtoolbarlayout在 collapsingtoolbarlayout 的 children 布局上,可以按照 framelayout 的屬性來拍版,因為它本身繼承于 framelayout :collapsingtoolbarlayout is a wrapper for toolbar which implements a collapsing app bar. it is designed to be used as a direct child of a appbarlayout.從官方對collapsingtoolbarlayout的介紹上可以看出,collapsingtoolbarlayout

是對 toolbar 的一個包裝,以達到折疊 appbar 的互動視覺效果。是以,collapsingtoolbarlayout 的使用一定離不開 appbarlayout 和 toolbar,并且作為 appbarlayout 的直接子視圖使用。關于collapsingtoolbarlayout的屬性在官網上可以查到,這裡我隻介紹案例中我們常用的幾個屬性:title标題,布局展開時放大顯示在圖檔底部,布局折疊時縮小顯示在toolbar左側。注意,沒有設定這個屬性時,預設使用toolbar的标題;statusbarscrim頂部視圖折疊狀态下,狀态欄的遮罩色。通常這樣設定:app:statusbarscrim="?attr/colorprimarydark",即style樣式中定義的沉浸式狀态欄顔色。這個屬性要和getwindow().addflags(windowmanager.layoutparams.flag_translucent_status);(支援api19及以上版本,位于setcontentview語句前面)一起使用,使頂部視圖展開時圖檔能夠延伸到狀态欄位置顯示,如效果圖中所示;contentscrim内容遮罩,上下滾動時圖檔上面顯示和隐藏的遮罩色,toolbar位置的的背景色;通常這樣設定:app:contentscrim="?attr/colorprimary",即顯示為toolbar顔色,應用的主題色;layout_collapsemode折疊模式,設定其他控件滾動時自身的互動行為,有兩種取值:parallax,折疊視差效果,比如上述效果圖中的圖檔;pin,固定别針效果,比如上圖中的toolbar;layout_collapseparallaxmultiplier不折疊視差系數,配合parallax模式使用,取值有點類似alpha(不透明度),在0.0

~ 1.0之間,預設值為0.5。當設定為1.0,滾動清單時圖檔不會折疊移動;

代碼實作:

CollapsingToolbarLayout使用

關于coordinatorlayout作為根布局容器如何協調子控件之間的互動行為,可以參考上一篇文章,這裡我介紹一下本例中幾個新的注意點。作為appbarlayout的直接子控件,collapsingtoolbarlayout包裹header部分的imageview和toolbar,并分别設定二者的折疊模式。這個例子,我們給collapsingtoolbarlayout的layout_scrollflags屬性值設為:scroll|exituntilcollapsed,其中exituntilcollapsed表示控件向上折疊退出并以最小高度停留在頂部;前面介紹collapsingtoolbarlayout屬性時介紹到了statusbarscrim的使用,其實也可以通過android:fitssystemwindows和values-v21中style樣式的statusbarcolor和windowdrawssystembarbackgrounds屬性來完成狀态欄的背景色變化,詳情參考源碼即可;通過layout_anchor和layout_anchorgravity可以控制floatingactionbutton的behavior和位置,如上圖所示,當滾動清單是,fab按鈕會随着appbarlayout而顯示和隐藏,并自帶縮放動畫。

示例源碼我在github上建立了一個repository,用來存放整個android material design系列控件的學習案例,會伴随着文章逐漸更新完善,歡迎大家補充交流,