CollapsingToolbar可以實現(xiàn)這樣一種效果，在界面頂部顯示一張圖片(也可以是其他VIew)，往上滑動的時候圖片滑動至消失，ToolBar出現(xiàn)在頂部顯示，往下滑動則相反。第一次看見的時候覺得很 眼前一亮很酷的感覺，然而現(xiàn)在只需要使用一些控件便可以實現(xiàn)這種效果

1.新建一個FruitActivity用來展示水果的詳細信息
新建布局文件activity_fruit_detail.xml

根布局還是用 我們的<android.support.design.widget.CoordinatorLayout/>，為了使圖片的位置可以達到系統(tǒng)狀態(tài)欄的位置，在根布局即這里的CoordinatorLayout控件中還是要添加屬性 android:fitsSystemWindows="true"，而且把狀態(tài)欄的顏色設(shè)置為透明

和 Material Design (三) Navigation Drawer的使用中一樣，在values和values-21兩個文件夾下面的style文件中寫兩個名字一樣的style,把values-21下面的那個style 多一項 <item name="android:statusBarColor">@android:color/transparent</item>

如果項目中多個地方用到同樣的設(shè)置，我們可以添加一個公用的 AppTheme.StatusBarTransparentTheme

這里的

<style name="AppTheme.StatusBarTransparentTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

相當于

<style name="StatusBarTransparentTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style

在設(shè)置主題時要設(shè)置全名

<activity android:name=".FruitDetailActivity" android:theme="@style/AppTheme.StatusBarTransparentTheme"/>

在CoordinatorLayout中先放置一個<android.support.design.widget.AppBarLayout/>控件

在置于頂部<android.support.design.widget.AppBarLayout/>中放入一個<android.support.design.widget.CollapsingToolbarLayout/>控件

再往CollapsingToolbarLayout中依次放入<ImageView/> 和<android.support.v7.widget.Toolbar/>兩個控件。

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">
 
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
            <ImageView
                android:id="@+id/fruit_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
 
            <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>

app:contentScrim="?attr/colorPrimary" 設(shè)置toolBar顯示時的背景色
app:layout_scrollFlags="scroll|exitUntilCollapsed" 設(shè)置折疊方式

在一個AppBarLayout下放置<android.support.v4.widget.NestedScrollView/>控件

NestedScrollView中放界面展示的內(nèi)容，為了整體的Material Design效果，這里也用到CardView控件，NestedScrollView和CardView都是繼承FrameLayout

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="35dp"
            app:cardCornerRadius="4dp">
 
            <TextView
                android:id="@+id/fruit_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp" />
        </android.support.v7.widget.CardView>
    </android.support.v4.widget.NestedScrollView>

同樣在NestedScrollView中需要設(shè)置 app:layout_behavior="@string/appbar_scrolling_view_behavior"

我們可以在CoordinatorLayout中添加一個FloatingActionButton

設(shè)置app:layout_anchor="@id/app_bar_layout"，是對FloatingActionButton的范圍的限制

<android.support.design.widget.FloatingActionButton
        android:id="@+id/float_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/icon_share"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|end" />

完成后效果如圖所示

Material Design的學習暫時告一段落，雖然各家公司都有自己的app設(shè)計風格，Material Design 不一定能用到所有的app中，但是這種設(shè)計風格給Android帶來了風格統(tǒng)一，動畫流暢的良好視覺體驗，實現(xiàn)起來簡單易行，在應(yīng)用市場上很多比較成功的app都已實現(xiàn)Material Design 的設(shè)計，如印象筆記、隨筆記等等，所以我們可以多多嘗試Material Design給我們帶來的新體驗。