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

1.新建一個(gè)FruitActivity用來(lái)展示水果的詳細(xì)信息
新建布局文件activity_fruit_detail.xml

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

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

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

這里的

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

相當(dāng)于

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

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

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

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

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

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

<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顯示時(shí)的背景色
app:layout_scrollFlags="scroll|exitUntilCollapsed" 設(shè)置折疊方式

在一個(gè)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中添加一個(gè)FloatingActionButton

設(shè)置app:layout_anchor="@id/app_bar_layout"，是對(duì)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的學(xué)習(xí)暫時(shí)告一段落，雖然各家公司都有自己的app設(shè)計(jì)風(fēng)格，Material Design 不一定能用到所有的app中，但是這種設(shè)計(jì)風(fēng)格給Android帶來(lái)了風(fēng)格統(tǒng)一，動(dòng)畫(huà)流暢的良好視覺(jué)體驗(yàn)，實(shí)現(xiàn)起來(lái)簡(jiǎn)單易行，在應(yīng)用市場(chǎng)上很多比較成功的app都已實(shí)現(xiàn)Material Design 的設(shè)計(jì)，如印象筆記、隨筆記等等，所以我們可以多多嘗試Material Design給我們帶來(lái)的新體驗(yàn)。