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)欄的顏色設置為透明
和 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帶來了風格統(tǒng)一馏颂，動畫流暢的良好視覺體驗示血，實現(xiàn)起來簡單易行，在應用市場上很多比較成功的app都已實現(xiàn)Material Design 的設計救拉，如印象筆記难审、隨筆記等等，所以我們可以多多嘗試Material Design給我們帶來的新體驗亿絮。
