Material Design：CollapsingToolbarLayout，materialdesign

Material Design：CollapsingToolbarLayout，materialdesign

 

activity_main.xml：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.design.widget.AppBarLayout        android:id="@+id/appBar"        android:layout_width="match_parent"        android:layout_height="300dip"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >        <!-- app:expandedTitleGravity="left|bottom"擴張後Title位置還可以這麼設定 -->        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsingToolbarLayout"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            app:collapsedTitleGravity="left"            app:contentScrim="#2196F3"            app:expandedTitleMarginStart="20dp"            app:title="zzw" >            <ImageView                android:id="@+id/imageView"                android:layout_width="match_parent"                android:layout_height="match_parent"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.1"                android:scaleType="centerCrop"                android:src="@drawable/bg_default" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                android:minHeight="?attr/actionBarSize" >            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior" >        <android.support.v7.widget.LinearLayoutCompat            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical"            android:padding="20dip"            app:divider="?android:attr/listDivider"            app:dividerPadding="5dp"            app:showDividers="beginning|middle|end" >            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:padding="50dp"                android:text="0" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:padding="50dp"                android:text="1" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:padding="50dp"                android:text="2" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:padding="50dp"                android:text="3" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:padding="50dp"                android:text="4" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:padding="50dp"                android:text="5" />        </android.support.v7.widget.LinearLayoutCompat>    </android.support.v4.widget.NestedScrollView>    <android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:layout_anchor="@id/appBar"        app:layout_anchorGravity="bottom|end|right"        android:src="@drawable/ic_launcher"        app:backgroundTint="#64b5f6"        app:backgroundTintMode="multiply"        app:borderWidth="0dp"        app:elevation="10dp"        app:fabSize="normal"        app:pressedTranslationZ="20dp"        app:rippleColor="#1976d2" >    </android.support.design.widget.FloatingActionButton></android.support.design.widget.CoordinatorLayout>

我們在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向左填充的距離。還可以通過app:expandedTitleGravity="left|bottom"設定Title相對位置

2、在ImageView控制項中：

我們設定了：

• layout_collapseMode (摺疊模式) - 有兩個值:layout_collapseParallaxMultiplier(視差因子) - 設定視差滾動因子，值為：0~1。 
  • pin -  設定為這個模式時，當CollapsingToolbarLayout完全收縮後，Toolbar還可以保留在螢幕上。
  • parallax - 設定為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果，通常和layout_collapseParallaxMultiplier(設定視差因子)搭配使用。

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已經幫我們做好，它會自動的過度。 JAVA代碼：

package com.zzw.testcollapsingtoolbarlayout;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.support.design.widget.CollapsingToolbarLayout;import android.support.v7.widget.Toolbar;public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);        mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");// 設定標題        mCollapsingToolbarLayout.setExpandedTitleColor(Color.RED);// 設定還沒收縮時狀態下字型顏色        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);// 設定收縮後Toolbar上字型的顏色        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);        mToolbar.setLogo(R.drawable.ic_launcher);        mToolbar.setNavigationIcon(android.R.drawable.ic_menu_delete);    }}