1. 程式人生 > >CollapsingToolbarLayout使用(可以摺疊的Toolbar)

CollapsingToolbarLayout使用(可以摺疊的Toolbar)

CollapsingToolbarLayout作用是提供了一個可以摺疊的Toolbar,它繼承至FrameLayout,給它設定layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控制元件(如:ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除螢幕或固定在螢幕頂端)。

使用CollapsingToolbarLayout:

[plain] view plain copy  print?
  1. <android.support.design.widget.AppBarLayout  
  2.         android:layout_width="match_parent"  
  3.         android:layout_height="256dp"  
  4.         android:fitsSystemWindows="true">  
  5.         <android.support.design.widget.CollapsingToolbarLayout  
  6.             android:id="@+id/collapsing_toolbar_layout"  
  7.             android:layout_width="match_parent"  
  8.             android:layout_height="match_parent"  
  9.             app:contentScrim="#30469b"  
  10.             app:expandedTitleMarginStart="48dp"  
  11.             app:layout_scrollFlags="scroll|exitUntilCollapsed">  
  12.             <ImageView  
  13.                 android:layout_width="match_parent"  
  14.                 android:layout_height="match_parent"  
  15.                 android:scaleType="centerCrop"  
  16.                 android:src="@mipmap/bg"  
  17.                 app:layout_collapseMode="parallax"  
  18.                 app:layout_collapseParallaxMultiplier="0.7"  />  
  19.             <android.support.v7.widget.Toolbar  
  20.                 android:id="@+id/toolbar"  
  21.                 android:layout_width="match_parent"  
  22.                 android:layout_height="?attr/actionBarSize"  
  23.                 app:layout_collapseMode="pin" />  
  24.         </android.support.design.widget.CollapsingToolbarLayout>  
  25.     </android.support.design.widget.AppBarLayout>  
我們在CollapsingToolbarLayout中設定了一個ImageView和一個Toolbar。並把這個CollapsingToolbarLayout放到AppBarLayout中作為一個整體。

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。 綜上分析:當設定了layout_behavior的控制元件響應起了CollapsingToolbarLayout中的layout_scrollFlags事件時,ImageView會有視差效果的向上滾動移除螢幕,當開始摺疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變為我們設定好的背景色,Toolbar也一直會固定在最頂端。 效果如圖:
【注】:使用CollapsingToolbarLayout時必須把title設定到CollapsingToolbarLayout上,設定到Toolbar上不會顯示。即: mCollapsingToolbarLayout.setTitle(" "); 該變title的字型顏色: 擴張時候的title顏色:mCollapsingToolbarLayout.setExpandedTitleColor(); 收縮後在Toolbar上顯示時的title的顏色:mCollapsingToolbarLayout.setCollapsedTitleTextColor(); 這個顏色的過度變化其實CollapsingToolbarLayout已經幫我們做好,它會自動的過度,比如我們把收縮後的title顏色設為綠色,效果如圖:
沒錄好,反正效果出來了。 接下來看看程式碼怎麼實現吧: 佈局檔案: [html] view plain copy  print?
  1. <android.support.design.widget.CoordinatorLayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  8.     <android.support.design.widget.AppBarLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="256dp"
  11.         android:fitsSystemWindows="true">
  12.         <android.support.design.widget.CollapsingToolbarLayout
  13.             android:id="@+id/collapsing_toolbar_layout"
  14.             android:layout_width="match_parent"
  15.             android:layout_height="match_parent"
  16.             app:contentScrim="#30469b"
  17.             app:expandedTitleMarginStart="48dp"
  18.             app:layout_scrollFlags="scroll|exitUntilCollapsed">
  19.             <ImageView
  20.                 android:layout_width="match_parent"
  21.                 android:layout_height="match_parent"
  22.                 android:scaleType="centerCrop"
  23.                 android:src="@mipmap/bg"
  24.                 app:layout_collapseMode="parallax"
  25.                 app:layout_collapseParallaxMultiplier="0.7"/>
  26.             <android.support.v7.widget.Toolbar
  27.                 android:id="@+id/toolbar"
  28.                 android:layout_width="match_parent"
  29.                 android:layout_height="?attr/actionBarSize"
  30.                 app:layout_collapseMode="pin"/>
  31.         </android.support.design.widget.CollapsingToolbarLayout>
  32.     </android.support.design.widget.AppBarLayout>
  33.     <LinearLayout
  34.         android:layout_width="match_parent"
  35.         android:layout_height="match_parent"
  36.         android:orientation="vertical"
  37.         app:layout_behavior="@string/appbar_scrolling_view_behavior">
  38.         <android.support.v7.widget.RecyclerView
  39.             android:id="@+id/recyclerView"
  40.             android:layout_width="match_parent"
  41.             android:layout_height="match_parent"
  42.             android:scrollbars="none"/>
  43.     </LinearLayout>
  44. </android.support.design.widget.CoordinatorLayout>

程式碼檔案: [java] view plain copy  print?
  1. Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);  
  2.     setSupportActionBar(mToolbar);  
  3.     getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
  4.     mToolbar.setNavigationOnClickListener(new View.OnClickListener() {  
  5.         @Override
  6.         publicvoid onClick(View v) {  
  7.             onBackPressed();  
  8.         }  
  9.     });  
  10.     //使用CollapsingToolbarLayout必須把title設定到CollapsingToolbarLayout上,設定到Toolbar上則不會顯示
  11.     CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);  
  12.     mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");  
  13.     //通過CollapsingToolbarLayout修改字型顏色
  14.     mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設定還沒收縮時狀態下字型顏色
  15.     mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設定收縮後Toolbar上字型的顏色

原始碼:http://download.csdn.net/detail/u010687392/8906931