写在前面的几句话
<p>
最近准备写独立App的打算，那么思考了下作为一个独立App开发者角度的选择问题，很自然的就把Material Design作为视觉方面的选择了，那么这篇文章呢，就对Support Design包的使用进行简单的分析，其实之前也有学习过，但是鉴于之前的项目中没有选择Material Design作为设计选择，也忘却了许多，这次刚好也把学习的东西记录下来
简介
<p>
在Material Design推出之初，想要实现这种设计风格，对于开发者来说是一件很困难的事情，只能通过GitHub上开发者贡献出来的开源库来实现这一风格的Android开发，在Google在2015的IO大会上，谷歌给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。
对于开发者来说这是一个福音，所以这篇文章就对Android Design Support Library进行分析。
想要使用Android Design Support Library首先得在gradle添加依赖
compile 'com.android.support:design:23.2.0'
一.CoordinatorLayout
<p>
CoordinatorLayout是Support Design中新添加的一个增强型的FrameLayout。在CoordinatorLayout中，我们可以在FrameLayout的基础上完成很多新的操作。
CoordinatorLayout 是一个让子 Views 协调工作的布局。每个 View 中肯定是设计和实现了和 CoordinatorLayout 协同工作的，很多子View与CoordinatorLayout配合使用会发生美妙的化学反应，这就是为什么要把CoordinatorLayout作为第一个来介绍
CoordinatorLayout使用如下
<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:fitsSystemWindows="true">
</android.support.design.widget.CoordinatorLayout>
二.Floating Action Button
<p>
FAB(Floating Action Button)其实在之前有介绍过,是一个有一些阴影的圆形按钮,这个其实是在Material Design的世界中一个很重要的组成部分。
FAB使用如下
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
运行如下
三.Snackbar
<p>
Snackbar是在屏幕的地步一个微小的黑色条显示着一条简短的消息，与Toast 有着相同的概念，但是不同于 Toast，它的表现是作为 UI 的一部分而不是覆盖在屏幕上。
Snackbar使用如下
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
运行如下
FAB 与 Snackbar在CoordinatorLayout下产生的化学反应
<p>
当我们使用普通的layout包裹FAB，我们会发现
但是使用CoordinatorLayout包裹FAB就可以发现如下的效果
<?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:fitsSystemWindows="true">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
四.Toolbar
<p>
Toolbar其实是用来替代ActionBar的，因为在这个Support Design中，很多组件都是设计为与Toolbar协同使用，从而达到Material Design设计中的一些效果
要使用Toolbar需要如下的工作
1.在AppTheme的style属性中隐藏Action Bar
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
2.在CoordinatorLayout里面放入AppBarLayout与Toolbar
<android.support.design.widget.CoordinatorLayout
...>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
...>
</android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>
3.代码设置将Toolbar作为ActionBar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
运行如下
注意事项
1.内容区域
内容区域放置于AppBarLayout与FloatingActionButton之间
并且一些古老的原因，LinearLayout 没有被设计成与 CoordinatorLayout 协同工作。在这样的情况下，没有任何布局用来包裹 LinearLayout，使它像 Toolbar 的做法那样。但它是更加容易的，你只需要在 LinearLayout 添加一个属性告诉它的滚动行为
如下
<LinearLayout
...
app:layout_behavior="@string/appbar_scrolling_view_behavior"
...>
2.当随着内容滚动，让AppBarLayout退出屏幕
怎么让内容滚动，有几种方式，RecycleView,ListView,ScrollView,但是ListView与ScrollView并没有设计为与CoordinatorLayout协同工作，所以Support Design提供了一个新的ScrollView为NestedScrollView，所以RecycleView与NestedScrollView可以用来随着内容滚动，让AppBarLayout退出屏幕。
AppBarLayout可以这样响应滚动事件：根据子view的滚动标志（scroll flag）来控制它们如何进入（滚入屏幕）与退出（滚出屏幕）。
Flag包括：
scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
app:layout_scrollFlags="scroll|enterAlways"
- enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
android:minHeight="?attr/actionBarSize"
- exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:minHeight="?attr/actionBarSize"
五.CollapsingToolbarLayout
其实在Material Design的设计中上面这张图的效果是挺典范的一种设计，那么这样的效果怎么实现的呢？其实上面的Toolbar也可以展开折叠，但是不够完美，这里介绍下CollapsingToolbarLayout
使用步骤如下
1.用 CollapsingToolbarLayout 包裹 Toolbar，但仍然在 AppBarLayout 中
2.从 Toolbar 中删除 layout_scrollFlags,为 CollapsingToolbarLayout 声明 layout_scrollFlags，并且将 layout_scrollFlags 设置成 scroll|exitUntilCollapsed
3.改变 AppBarLayout 扩张状态时的布局高度大小
最终代码如下
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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:expandedTitleMargin 展开状态的边距
app:expandedTitleMarginBottom 展开状态距下的边距
app:expandedTitleMarginEnd 展开状态结束的边距
app:expandedTitleMarginStart 展开状态开始的边距
app:collapsedTitleTextAppearance 折叠状态的文本显示
app:expandedTitleTextAppearance 展开状态的文本显示
我们可以看到Toolbar icons 仍然滚出了屏幕。我们可以声明这个属性给 Toolbar 来固定住它，让它总是在屏幕的顶部。
<android.support.v7.widget.Toolbar
...
app:layout_collapseMode="pin"/>
怎么实现图片中的效果呢，步骤如下
1.添加一个ImageView作为Toolbar的背景图层
2.添加视差模式与视差系数来使视觉上看起来效果更好
3.为CollapsingToolbarLayout添加属性可以让收缩的时候自动的变化到普通的颜色
最后的代码如下
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/header"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
最后效果如下
六.TabLayout
<p>
依据Android 应用程序用户体验指导原则，Tab 应该放在屏幕的顶部而不是在底部，所以TabLayout放置于AppBarLayout内，Toolbar下面
代码如下
xml中
<android.support.design.widget.AppBarLayout ...>
<android.support.v7.widget.Toolbar ... />
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
java代码中添加tabs
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
运行如下
可以通过设置属性来设置Tab的样式
- app:tabMode 当tabMode设置为fixed,tabGravity才生效，设置为scrollable则是满足于多个tab,可以滑动
app:tabMode="scrollable"
- app:tabGravity tabGravity设置fill,表示所有tab都是等分居中，设置为center,则所有tab都居中显示
app:tabMode="fixed"
app:tabGravity="center"
app:tabMode="fixed"
app:tabGravity="fill"
七.TetInputLayout
<p>
在material design中，即便是简单的 EditText ，也有提升的余地。通常，单独的EditText会在用户输入第一个字母之后隐藏提示信息，但是现在你可以使用TextInputLayout 来将EditText封装起来，提示信息会变成一个显示在EditText之上的floating label，这样用户就始终知道他们现在输入的是什么。
要做到这一点，只需要简单的用 TextInputLayout 包裹住一个 EditText就可以了
如下
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="input2" />
</android.support.design.widget.TextInputLayout>
运行如下
还可以通过调用setError()在EditText下面显示一条错误信息
显示如下
八.Navigation Drawer
<p>
