Material design library系列——CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout等

前言

马上就国庆了，提前祝大家国庆快乐，中秋快乐，不知道小伙伴们准备去哪里玩（看）呢（人）？

有没有小伙伴能看出来这是哪里？

Material design系列也写了6篇了，今天一次性把最后的写完吧，免得自己国庆出去玩心里总有事压着，玩的也不愉快！

CoordinatorLayout

首先我们来看一下官方文档对这个布局的介绍

CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views

实际上CoordinatorLayout是一个更强大的FrameLayout，从文档上来看就是2点

• 作为最上层的View
• 作为一个 容器与一个或者多个子View进行交互

比如我们之前说Snackbar弹出的时候FloatingActionButton随之弹起

最外层是FrameLayout

最外层是CoordinatorLayout

我们只是把xml里面最外层的布局从FrameLayout换成了CoordinatorLayout就能达到这个效果， 为什么呢？
这就要涉及到CoordinatorLayout的使用核心Behavior了，Behavior就是执行你定制的动作，而我们的FloatingActionButton默认是有一个Behavior的，所以才能达到随着Snackbar弹出而弹起的功能。

FloatingActionButton源码中的静态内部类

当然了，如果你想实现自己的效果的话，就需要自定义Behavior了，这里给大家推荐几篇文章，自定义behavior写的很棒http://blog.csdn.net/huachao1001/article/details/51554608

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0824/6565.html

Toolbar

ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，它具备高度的可定制性、灵活性、具有Material Design风格等优点

1. 要用到toolbar，所以我们要把actionbar去掉，找到我们的styles文件，然后把parent里面的主题改为NoActionBar

2. 在代码中添加我们的toolbar

3. 在代码中设置toolbar

做到这一步，我们就已经用toolbar代替actionbar了。

Toolbar的一些属性

• android:background：修改背景色，比如这里背景颜色我设为橙色

• app:title：设置标题文字，这里要注意，前面是app，不是android

• app:titleTextColor：修改标题文字的颜色

• app:titleTextAppearance：修改标题文字的大小

• app:subtitle：设置子标题的文字

• app:subtitleTextColor：修改子标题文字的颜色

• app:subtitleTextAppearance：修改子标题文字的大小

• app:navigationIcon：添加导航的图标

这里顺便说一下navigationIcon的点击事件，在代码中设置 toolbar.setNavigationOnClickListener即可。

• app:logo：设置logo图标

添加右侧菜单列表

1. 首先在res/menu目录下的xml文件中定义的，要添加几个动作，则在节点下添加几个item。

这里跟大家说一下app:showAsAction这个属性，app:showAsAction是用来指定这个动作是放置在操作栏上，还是溢出菜单中。

• ifRoom

  • 如果操作栏有空间放置，则放置在操作栏上，否则放置到溢出菜单中

• always

  • 总是放置在操作栏上

• never

  • 总是放置在溢出菜单中

2.在Activity中重写onCreateOptionsMenu显示菜单

3.重写onOptionsItemSelected给菜单设置点击事件

AppBarLayout

首先通过看源码我们知道AppBarLayout是继承LinearLayout并且默认方向是VERTICAL

这个布局里面给我们提供了一个属性

• 在xml文件中我们这样写

  • app:layout_scrollFlags

• 在代码中我们这样写

  • setScrollFlags（）

对应的几个值

• srcoll

  • 这个View将会响应Scroll事件

• enterAlways

  • 下拉的时候，这个View也会跟着滑出。

• enterAlwaysCollapsed

  • 另一种enterAlways，但是只显示折叠后的高度。

• exitUntilCollapsed

  • 上拉的时候，这个View会跟着滑动直到折叠。

• snap

  • 在Scroll滑动事件结束以前 ，如果这个View部分可见，那么这个View会停在最接近当前View的位置

由于这里还没有说到CollapsingToolbarLayout，所以只能先说scroll，enterAlways和snap这三个，给大家看看效果。

• 首先是scroll

scroll

RecyclerView往上滑动的时候，toolbar跟着上移，等RecyclerView滑倒顶部的时候，toolbar才开始往下滑动

• 然后是scroll+enterAlways

scroll+enterAlways

RecyclerView往上滑动的时候，toolbar跟着上移，但是只要RecyclerView往下移动了，toolbar马上开始往下滑动，然后RecyclerView才开始继续滑动

• 最后是scroll+snap

scroll+snap

大家可以看到，前面基本与单独设置scroll没什么区别，但是到了后面，我特意把toolbar留了一点点，这个时候，snap的属性就出来了，他会自动判断是全部显示还是隐藏。

xml代码是这样的

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。
有了CollapsingToolbarLayout之后，我们再来说一下app:layout_scrollFlags其中的2个属性

• enterAlwaysCollapsed

  • 假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

• exitUntilCollapsed

  • 当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。

• 首先是scroll

scroll

• 然后是scroll+enterAlways+enterAlwaysCollapsed

scroll+enterAlways+enterAlwaysCollapsed

• 最后是scroll+exitUntilCollapsed

scroll+exitUntilCollapsed

**********这里要注意一下**********

与AppBarLayout组合的滚动布局（Recyclerview、NestedScrollView等）需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"（上面代码中NestedScrollView控件所设置的）。没有设置的话，AppBarLayout将不会响应滚动布局的滚动事件。

• app:contentScrim：设置折叠时工具栏布局的颜色

• statusBarScrim：设置折叠时状态栏的颜色，不过这里我们要先把状态栏透明

1.在相应的Activity中调用执行这段代码。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

2.给CollapsingToolbarLayout和其上的布局都加一条android:fitsSystemWindows="true"即可。

layout_collapseMode，该属性有2个值

• pin：有该标志位的View在页面滚动的过程中会一直停留在顶部，比如Toolbar可以被固定在顶部

• parallax：有该标志位的View表示能和页面同时滚动。与该标志位相关联的一个属性是：layout_collapseParallaxMultiplier，该属性是视差因子，表示该View与页面的滚动速度存在差值，造成一种相对滚动的效果。

效果还是很棒的吧！

总结

Material design系列的文章到此结束了，正好国庆也快到了，给自己好好放个假，出去玩一趟！今天写的比较多，如果有什么遗漏或者错误希望大家指出，我会及时更正的！
祝大家国庆快乐，中秋快乐啊，如果觉得文章写的不错，忍不住要给我送盒月饼我也是不介意的，23333~~~

以上纯属于个人平时工作和学习的一些总结分享，如果有什么错误欢迎随时指出，大家可以讨论一起进步。