CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout，給它設(shè)置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應(yīng)layout_behavior事件時作出相應(yīng)的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。
使用CollapsingToolbarLayout：
<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="#30469b" 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/bg" 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> </android.support.design.widget.AppBarLayout>
我們在CollapsingToolbarLayout中設(shè)置了一個ImageView和一個Toolbar。并把這個CollapsingToolbarLayout放到AppBarLayout中作為一個整體。
1、在CollapsingToolbarLayout中：
我們設(shè)置了layout_scrollFlags:關(guān)于它的值我這里再說一下：
scroll - 想滾動就必須設(shè)置這個。
enterAlways - 實現(xiàn)quick return效果, 當(dāng)向下移動時，立即顯示View（比如Toolbar)。
exitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 當(dāng)你的View已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時，你的View只能以最小高度進(jìn)入，只有當(dāng)滾動視圖到達(dá)頂部時才擴(kuò)大到完整高度。
其中還設(shè)置了一些屬性，簡要說明一下：
contentScrim - 設(shè)置當(dāng)完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。
expandedTitleMarginStart - 設(shè)置擴(kuò)張時候(還沒有收縮時)title向左填充的距離。
沒擴(kuò)張時候如圖：
2、在ImageView控件中：
我們設(shè)置了：
layout_collapseMode (折疊模式) - 有兩個值:
pin - 設(shè)置為這個模式時，當(dāng)CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。
parallax - 設(shè)置為這個模式時，在內(nèi)容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現(xiàn)視差滾動效果，通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用。
layout_collapseParallaxMultiplier(視差因子) - 設(shè)置視差滾動因子，值為：0~1。
3、在Toolbar控件中：
我們設(shè)置了layout_collapseMode(折疊模式)：為pin。
綜上分析：當(dāng)設(shè)置了layout_behavior的控件響應(yīng)起了CollapsingToolbarLayout中的layout_scrollFlags事件時，ImageView會有視差效果的向上滾動移除屏幕，當(dāng)開始折疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變?yōu)槲覀冊O(shè)置好的背景色，Toolbar也一直會固定在最頂端。
效果如圖:
【注】：使用CollapsingToolbarLayout時必須把title設(shè)置到CollapsingToolbarLayout上，設(shè)置到Toolbar上不會顯示。即：
mCollapsingToolbarLayout.setTitle(" ");
該變title的字體顏色：
擴(kuò)張時候的title顏色：mCollapsingToolbarLayout.setExpandedTitleColor();
收縮后在Toolbar上顯示時的title的顏色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();
這個顏色的過度變化其實CollapsingToolbarLayout已經(jīng)幫我們做好，它會自動的過度，比如我們把收縮后的title顏色設(shè)為綠色，效果如圖：
沒錄好，反正效果出來了。
接下來看看代碼怎么實現(xiàn)吧：
布局文件：
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <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="#30469b" 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/bg" 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> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" /> </LinearLayout></android.support.design.widget.CoordinatorLayout>
代碼文件：
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mToolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { onBackPressed(); } }); //使用CollapsingToolbarLayout必須把title設(shè)置到CollapsingToolbarLayout上，設(shè)置到Toolbar上則不會顯示 CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout); mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout"); //通過CollapsingToolbarLayout修改字體顏色 mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒收縮時狀態(tài)下字體顏色 mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設(shè)置收縮后Toolbar上字體的顏色以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
圖片精選
