CollapsingToolbarLayout和加上一個ImageView可以給Toolbar提供酷炫的可折疊的效果
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/bg999"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
最外層的CoordinatorLayout是能實現多種Material Design中提到的滾動效果的ViewGroup控件。目前這個框架提供了幾種不用寫動畫代碼就能實現滾動動畫的方法,具體關于CoordinatorLayout的用法可以看xyz_lmn的android CoordinatorLayout使用。
根據官方的谷歌文檔,AppBarLayout目前必須是第一個嵌套在CoordinatorLayout里面的子view。
AppBarLayout嵌套CollapsingToolbarLayout,里面又嵌套ImageView和Toolbar。
1、在CollapsingToolbarLayout中:
我們設置了layout_scrollFlags:關于它的值我這里再說一下:
scroll - 想滾動就必須設置這個。
enterAlways - 實現quick return效果, 當向下移動時,立即顯示View(比如Toolbar)。
exitUntilCollapsed - 向上滾動時收縮View,但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標志時,你的View只能以最小高度進入,只有當滾動視圖到達頂部時才擴大到完整高度。
其中還設置了一些屬性,簡要說明一下:
contentScrim - 設置當完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。
expandedTitleMarginStart - 設置擴張時候(還沒有收縮時)title向左填充的距離。
2、在ImageView控件中:
我們設置了:
layout_collapseMode (折疊模式) - 有兩個值:
pin - 設置為這個模式時,當CollapsingToolbarLayout完全收縮后,Toolbar還可以保留在屏幕上。
parallax - 設置為這個模式時,在內容滾動時,CollapsingToolbarLayout中的View(比如ImageView)也可以同時滾動,實現視差滾動效果,通常和layout_collapseParallaxMultiplier(設置視差因子)搭配使用。
layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子,值為:0~1。
3、在Toolbar控件中:
我們設置了layout_collapseMode(折疊模式):為pin。
使用CollapsingToolbarLayout時必須把title設置到CollapsingToolbarLayout上,設置到Toolbar上不會顯示。即:
mCollapsingToolbarLayout.setTitle("Your Title ");
改變title的字體顏色:
擴張時候的title顏色:mCollapsingToolbarLayout.setExpandedTitleColor();
收縮后在Toolbar上顯示時的title的顏色:mCollapsingToolbarLayout.setCollapsedTitleTextColor();
這個顏色的過度變化其實CollapsingToolbarLayout已經幫我們做好,它會自動的過度。