CollapsingToolbar可以實現這樣一種效果，在界面頂部顯示一張圖片(也可以是其他VIew)，往上滑動的時候圖片滑動至消失，ToolBar出現在頂部顯示，往下滑動則相反。第一次看見的時候覺得很 眼前一亮很酷的感覺，然而現在只需要使用一些控件便可以實現這種效果
1.新建一個FruitActivity用來展示水果的詳細信息
新建布局文件activity_fruit_detail.xml
根布局還是用 我們的<android.support.design.widget.CoordinatorLayout/>，為了使圖片的位置可以達到系統狀態欄的位置，在根布局即這里的CoordinatorLayout控件中還是要添加屬性 android:fitsSystemWindows="true"，而且把狀態欄的顏色設置為透明
和 Material Design (三) Navigation Drawer的使用中一樣，在values和values-21兩個文件夾下面的style文件中寫兩個名字一樣的style,把values-21下面的那個style 多一項 <item name="android:statusBarColor">@android:color/transparent</item>
如果項目中多個地方用到同樣的設置，我們可以添加一個公用的 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
在設置主題時要設置全名
<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" 設置toolBar顯示時的背景色
app:layout_scrollFlags="scroll|exitUntilCollapsed" 設置折疊方式
在一個AppBarLayout下放置<android.support.v4.widget.NestedScrollView/>控件
NestedScrollView中放界面展示的內容，為了整體的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中需要設置 app:layout_behavior="@string/appbar_scrolling_view_behavior"
我們可以在CoordinatorLayout中添加一個FloatingActionButton
設置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設計風格，Material Design 不一定能用到所有的app中，但是這種設計風格給Android帶來了風格統一，動畫流暢的良好視覺體驗，實現起來簡單易行，在應用市場上很多比較成功的app都已實現Material Design 的設計，如印象筆記、隨筆記等等，所以我們可以多多嘗試Material Design給我們帶來的新體驗。
