快捷導(dǎo)航

Android5.0+ CollapsingToolbarLayout使用詳解

更新時(shí)間：2016年09月01日 10:01:21 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了Android5.0+ CollapsingToolbarLayout使用，感興趣的小伙伴們可以參考一下

CollapsingToolbarLayout作用是提供了一個(gè)可以折疊的Toolbar，它繼承至FrameLayout，給它設(shè)置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應(yīng)layout_behavior事件時(shí)作出相應(yīng)的scrollFlags滾動(dòng)事件(移除屏幕或固定在屏幕頂端)。

使用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>

我們?cè)贑ollapsingToolbarLayout中設(shè)置了一個(gè)ImageView和一個(gè)Toolbar。并把這個(gè)CollapsingToolbarLayout放到AppBarLayout中作為一個(gè)整體。

1、在CollapsingToolbarLayout中：

我們?cè)O(shè)置了layout_scrollFlags:關(guān)于它的值我這里再說(shuō)一下：

scroll - 想滾動(dòng)就必須設(shè)置這個(gè)。

enterAlways - 實(shí)現(xiàn)quick return效果, 當(dāng)向下移動(dòng)時(shí)，立即顯示View（比如Toolbar)。

exitUntilCollapsed - 向上滾動(dòng)時(shí)收縮View，但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 當(dāng)你的View已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí)，你的View只能以最小高度進(jìn)入，只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。

其中還設(shè)置了一些屬性，簡(jiǎn)要說(shuō)明一下：

contentScrim - 設(shè)置當(dāng)完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。

expandedTitleMarginStart - 設(shè)置擴(kuò)張時(shí)候(還沒(méi)有收縮時(shí))title向左填充的距離。

沒(méi)擴(kuò)張時(shí)候如圖：

2、在ImageView控件中：

我們?cè)O(shè)置了：

layout_collapseMode (折疊模式) - 有兩個(gè)值:

pin - 設(shè)置為這個(gè)模式時(shí)，當(dāng)CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。

parallax - 設(shè)置為這個(gè)模式時(shí)，在內(nèi)容滾動(dòng)時(shí)，CollapsingToolbarLayout中的View（比如ImageView)也可以同時(shí)滾動(dòng)，實(shí)現(xiàn)視差滾動(dòng)效果，通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用。

layout_collapseParallaxMultiplier(視差因子) - 設(shè)置視差滾動(dòng)因子，值為：0~1。

3、在Toolbar控件中：

我們?cè)O(shè)置了layout_collapseMode(折疊模式)：為pin。

綜上分析：當(dāng)設(shè)置了layout_behavior的控件響應(yīng)起了CollapsingToolbarLayout中的layout_scrollFlags事件時(shí)，ImageView會(huì)有視差效果的向上滾動(dòng)移除屏幕，當(dāng)開始折疊時(shí)CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會(huì)變?yōu)槲覀冊(cè)O(shè)置好的背景色，Toolbar也一直會(huì)固定在最頂端。

效果如圖:

【注】：使用CollapsingToolbarLayout時(shí)必須把title設(shè)置到CollapsingToolbarLayout上，設(shè)置到Toolbar上不會(huì)顯示。即：

mCollapsingToolbarLayout.setTitle(" ");

該變title的字體顏色：

擴(kuò)張時(shí)候的title顏色：mCollapsingToolbarLayout.setExpandedTitleColor();

收縮后在Toolbar上顯示時(shí)的title的顏色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();

這個(gè)顏色的過(guò)度變化其實(shí)CollapsingToolbarLayout已經(jīng)幫我們做好，它會(huì)自動(dòng)的過(guò)度，比如我們把收縮后的title顏色設(shè)為綠色，效果如圖：

沒(méi)錄好，反正效果出來(lái)了。

接下來(lái)看看代碼怎么實(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上則不會(huì)顯示
  CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
  mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
  //通過(guò)CollapsingToolbarLayout修改字體顏色
  mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒(méi)收縮時(shí)狀態(tài)下字體顏色
  mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設(shè)置收縮后Toolbar上字體的顏色

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: