博主声明：
转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 威威喵 原创，请多支持与指教。
本文首发于此 博主：威威喵 | 博客主页：https://blog.csdn.net/smile_running
感受 Material Design UI 魅力，你不能错过的 Material Design 全系列文章：
Material Design 之一 BottomNavigationView + ViewPager + Fragment 仿微信底部导航效果
Material Design 之二 Toolbar + DrawerLayout + NavigationView 实现QQ侧拉抽屉效果
Material Design 之三 TabLayout + ViewPager + Fragment 今日头条标题切换效果
Material Design 之四 SwipeRefreshLayout + CardView + RecyclerView 精美瀑布流效果
Material Design 之五 CoordinatorLayout + AppBarLayout 提供最佳浏览体验
Material Design 之六 CollapsingToolbarLayout + FloatingActionButton 打造精美详情界面
Material Design 之七 TextInputLayout+TextInputEditText 打造精美的登录界面
这一篇文章可是 Material Design 大杂烩系列的重头戏，前面的几篇算是对 Material Design 的提供的几个 View 的基本使用，这一次呢，我们要把之前所使用过的几个 View 重新组合成一个精美的详情页面，使用的是 CollapsingToolbarLayout 撕裂效果NestedScrollView 滚动视图组合在一起，完成我们的详情页面的制作。
我在写这个布局界面的时候呢，一般是记不住这个属性的，什么鬼的一大堆，而且英文单词辣么辣么长，你在逗我吧，欺负我英语不好。所以呢，我一般都是写了忘，忘了再写一遍，我在写这篇文章的时候，又重新写了一遍，已经不知道是第几遍写这个界面了，反正还是记不住这几个单词。算了，下次自己来这里复制好了，机智如我。
1、CollapsingToolbarLayout 实现折叠效果
看看我们今天要实现的效果图：
因为这是基于我的上一篇文章：CoordinatorLayout+AppBarLayout 提供最佳浏览体验
代码都是沿用之前的，我这个是一个系列的文章，要看的话，建议从第一篇开始，把代码复制下来，哈哈。这里就不再多说了，首先是我们 RecylerView 瀑布流那个页面点进去，然后到我们的动物详情界面，那么这样的话，我们就得从 RecylerView 瀑布流那个适配器中添加 item 点击事件开始了，点击事件代码很简单，如下：
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int i) {
Glide.with(context).load(data.get(i).get("pic")).into(holder.img);
holder.name.setText(data.get(i).get("name").toString());
Intent intent = new Intent(context, AnimalDetailActivity.class);
intent.putExtra("pic", (Integer) data.get(i).get("pic"));
intent.putExtra("name", (String) data.get(i).get("name"));
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
context.startActivity(intent);
}
});
}这里呢，我们要把图片 id 和 动物名称给获取到，然后通过 Intent 传给详情 Activity，上面代码没什么难度。然后，我们得新建一个 AnimalDetailActivity 用于展示详情。首先写它的布局文件，这里就需要用到一个 design 包下的 CollapsingToolbarLayout 了，这个也是比较难用的，与其说难用，还不如说难记住，它的属性好长啊、好多啊。
来看我们的完整的布局代码：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="220dp">
<!--继承自帧布局-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="#9966cc"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/img_animal_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar_detail"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/img_animal_detail"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/img_animal_detail">
<TextView
android:id="@+id/tv_name_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="20sp" />
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:backgroundTint="#9966cc"
android:src="@drawable/ic_child_care_black_24dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right"
app:rippleColor="#a2c699" />
</android.support.design.widget.CoordinatorLayout>看上去好像有点多，而且嵌套又嵌套的，这谁记得住。哈哈，与其记住这个，还不自己复制来的快，而且记住并没什么实际意义。不过呢，我们还是要了解一下这几个 View 的嵌套情况和几个常用属性的设置，这个还是的知道的。
首先，来看它的嵌套结构，CoordinatorLayout 必须搞到最外一层，也不是说最外一层，反正是比 NestedScrollView 或 RecyclerView 大一级就可以了，因为要监听可以滚动的 view 的事件，旧得这么来。当然，你也可以给 CoordinatorLayout 包一层其他的 ViewGroup 都没什么问题的。
其次呢，AppBarLayout 要与 NestedScrollView 或 RecyclerView 平级，不平级也可以在 NestedScrollView 外面包 ViewGroup，只要能滑动就 Ok
最后这个 FloatingActionButton 放哪都没什么关系，就是一个定义了 style 的 button，放在这里应该比较好看，而且可以配合 AppBarLayout 的消失和显示行为。
NestedScrollView 下面的一个属性 app:layout_behavior="@string/appbar_scrolling_view_behavior" 用来联动 AppBarLayout 的行为，在我们上篇文章也具体讲了它的作用：CoordinatorLayout+AppBarLayout 提供最佳浏览体验
CollapsingToolbarLayout 下面由这个属性 app:layout_scrollFlags="scroll|exitUntilCollapsed" ，而 CollapsingToolbarLayout 是一个折叠效果的 View，它折叠后就和 Toolbar 一样了。折叠的话，反正我是很难用语言表述，看这个效果图就知道了：
app:layout_scrollFlags="scroll|exitUntilCollapsed" 指定了 NestedScrollView 关联的滑动的一系列行为组合，scroll 表示手指往上滑动时，AppBarLayout 中的图片会隐藏起来，exitUntilCollapsed 表示它隐藏起来后，把 Toolbar 显示出来，并且停留在那里。这个用语言难以描述，还是自己看看效果更容易懂。
CollapsingToolbarLayout 下面还有一个 app:contentScrim="#9966cc" 表示折叠后 Toolbar 显示的颜色，这里就传入颜色值可以了，简单明了。
还有两个比较重要的属性，一个是 Toolbar 下面的 app:layout_collapseMode="pin" 折叠模式，这个意思指 Toolbar 在折叠过程中位置保持不变。
另一个是 ImageView 下面的 app:layout_collapseMode="parallax" 属性，表示折叠过程中产生错位效果，一般都设置为这一种，可以让图片在折叠过程中持续的错位，效果就是感觉图片在上滑动的时候被挤压了，压扁了一样。
2、适应到状态栏上
那么，到这一步的话，我们的 CollapsingToolbarLayout 的基本使用就已经掌握了，不过有一点还是可以优化的，比如看上面的效果图，状态栏那里始终是一篇绿绿的，即使再好看的图片也都被它影响了。
所以呢，我们要对它进行优化一下，让图片占到状态栏上面，效果会更好的。首先，我们是在 Activity 上面进行展示的，所以我们可以利用 Activity 的 theme 属性，把状态栏给透明化了，代码就是在 style 文件下面添加这样一个样式：
<style name="ActivityTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>然后，在 manifest 中给需要的 Activity 设置样式主题：
<activity
android:name=".AnimalDetailActivity"
android:theme="@style/ActivityTheme" />然后，运行一下是这样的效果：
这里的话，已经给状态栏设置了透明颜色了。不过还有一个至关重要的属性没有设置，那就是：
android:fitsSystemWindows="true"它的意思是，适应到状态栏中。所以，我们要在布局文件中添加这样的一个属性，才能保证 View 也被适应到状态栏上。因为 View 是一层一层的，所以要从外面的一个个写上，一直到我们的 ImageView ，这样的话就可以让图片跑上去了。效果如下：
这样的话，就比之前好看多了，而且状态栏还会根据滑动行为自己变。
3、FloatingActionButton 浮动按钮
最后呢，我们看一个控件叫 FloatingActionButton，其实与普通 button 也没上面区别了，用法简单。如下面这样：
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:backgroundTint="#9966cc"
android:src="@drawable/ic_child_care_black_24dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right"
app:rippleColor="#a2c699" />app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right"上面两个属性配合起来设置 FloatingActionButton 的位置，就是在 appbar 的 底部 | 右边，很好理解吧，还有要修改它的默认颜色的话，如下：
- android:backgroundTint="#9966cc" // 修改背景颜色
- app:rippleColor="#a2c699" // 修改被点击时的颜色
被点击效果是这样的：
好了，到此为此，已经把这个效果都实现了，看起来确实是一个非常 nice 的界面。
4、共享元素动画
还不够炫酷？好吧，我们给它加上一个过渡动画吧，其动画效果是共享元素的形式。不会没事，我之前有写过一篇 Activity 过渡动画的文章，一看就会了：Activity 过渡动画 — 让切换更加炫酷
不过呢，接下来你只需要这样做就可以了。第一步，要添加两个属性，告知两个不同的界面里面谁是需要共享的，像上面这个情况，我们当然是图片拿来当共享元素了，因为两个界面的图片是一样的。所以，要在 RecyclerView 的 item 布局文件中的 ImageView 控件加一条属性代码：
android:transitionName="shared"并且，在开启的详情页面 Activity 布局中的 ImageView 也同样加上这句代码。然后就需要修改我的 strarActivity 的方式了，因为是点击 item 启动详情 Activity 的，所以修改适配器的点击事件，代码如下：
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int i) {
Glide.with(context).load(data.get(i).get("pic")).into(holder.img);
holder.name.setText(data.get(i).get("name").toString());
Intent intent = new Intent(context, AnimalDetailActivity.class);
intent.putExtra("pic", (Integer) data.get(i).get("pic"));
intent.putExtra("name", (String) data.get(i).get("name"));
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
context.startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(activity,
Pair.create(holder.img, "shared")).toBundle());
}
});
}关键代码是 Activity 的启动代码被我们修改了：
context.startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(activity, Pair.create(holder.img, "shared")).toBundle());
代码就不解释了，可以看 Activity 过渡动画 — 让切换更加炫酷 我的这篇文章。
这样的话，我们的元素共享动画就添加成功了，来看看效果吧：
好了，就是这种切换效果，两个图片会进行共享的切换，对比之前的一点动画都没有的效果，又上升了不少体验。除了共享元素动画，还有其他几种动画也可以使用，我就不再多说了，可以看我之前的那篇文章，自己尝试吧。