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给我们带来的新体验。
网友评论