Android Design Support Library 使用详解

概述

Android Design Support Library 是Google在2015年的IO大会上，带来的全新适应Material Design设计规范的支持库。在这个支持库中，给我们提供了更加规范的MD设计风格控件。重要的是，Android Design Support Library中，支持所有的Android 2.1以上版本系统。在这个支持库中，主要包含下面几大控件：
Snackbar，FloatingActionButton，TextInputLayout，TabLayout，AppBarLayout，CollapsingToolbarLayout，NavigationView，CoordinatorLayout

在使用Android Design Support Library之前，我们只需要在AS中添加引用即可：

compile 'com.android.support:design:23.3.0'

下面我们将分别介绍各个控件的使用。

1.Snackbar

Snackbar提供了关于操作的轻量级的反馈。它可以从屏幕底部展示一个简短的消息，与Toast相似，但是它更灵活和功能更加强大。
当它显示一段时间后或者用户与屏幕交互时，它会自动消失；
可以包含一个动作action；
Snackbar出现在屏幕所有其他元素之上，同一时间内只有一个Snackbar显示。

使用Snackbar

    Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
    bar.show();

方法：
make (View view, CharSequence text, int duration) -生成Snackbar消息
show () -开始显示Snackbar消息

参数：
view，Snackbar会通过该view寻找一个父View来持有Snackbar的view。
text，显示的消息
duration，与Toast一样，控制Snackbar的显示时间。

显示的效果如下：

我们可以为Snackbar添加一个点击动作Action，如下：

    Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
    bar.setAction("Action", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(context,"点击了!",Toast.LENGTH_SHORT).show();
        }
    });
    bar.show();

运行效果如下：

上面增加一个可点击的动作，点击“ACTION”时，弹出Toast框。

我们还可以修改Snackbar的样式

     Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
     bar.setAction("动作", new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             Toast.makeText(context,"点击了!",Toast.LENGTH_SHORT).show();
         }
     });
     bar.setActionTextColor(Color.WHITE); //设置Aciton的字体颜色值
     Snackbar.SnackbarLayout layout = (Snackbar.SnackbarLayout) bar.getView();
     layout.setBackgroundColor(Color.RED); //设置Snackbar的背景色
     TextView textView = (TextView) layout.findViewById(R.id.snackbar_text);
     textView.setTextColor(Color.WHITE);  //设置Snackbar文字的颜色
     bar.show();

运行效果如下：

2.FloatingActionButton

FloatingActionButton是悬浮按钮，用来强调当前屏幕中最重要的动作，吸引用户的注意。FloatingActionButton现在是继承自控件ImageButton，所以它也会拥有该控件的所有属性。

使用FloatingActionButton

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

使用它还是非常简单，当成普通控件来使用即可。
运行效果图：

我们可以看到FAB有一个背景颜色，默认的背景颜色取的是theme中的colorAccent的值，可以在style中定义的colorAccent设置。

我们同样也可以自行单独设置其它的属性：

app:backgroundTint：设置FAB的背景颜色。
app:rippleColor：设置FAB点击时的背景颜色。
app:elevation：设置默认状态下FAB的阴影大小。
app:pressedTranslationZ：点击时候FAB的阴影大小。
app:fabSize：设置FAB的大小，该属性有两个值，分别为normal和mini，对应的FAB大小分别为56dp和40dp。
app:layout_anchor：设置FAB的锚点，即以哪个控件为参照点设置位置。 <—该属性需要在CoordinatorLayout布局中使用才生效—->
app:layout_anchorGravity：设置FAB相对锚点的位置，值有 bottom、center、right、left、top等。 <—该属性需要在CoordinatorLayout布局中使用才生效—->

对上面的属性进行设置后，可以看到：

继续给添加FAB的点击事件，与Snackbar配合使用时，会出现Snackbar遮住FAB的情况，如：

出现这样的情况，会让用户体验不友好，正确的应该让浮动操作按钮上下滑动，为Snackbar留出空间。
为了解决该问题，我们这里就用到了另一个控件CoordinatorLayout，关于这个控件之后在讲解。

3.TextInputLayout

TextInputLayout继承自LinearLayout，用来把EditText包裹在该布局中，可以让hint文字变成一个在EditText上方的浮动标签，同时还包括一个漂亮的material动画。TextInputLayout只接受一个子元素。子元素需要是一个EditText元素。

使用TextInputLayout

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textinput_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="username" />
    </android.support.design.widget.TextInputLayout>

获取控件EditText对象
TextInputLayout和LinearLayout和ScrollView不同，你可以使用一个特殊的方法获得子元素EditText，getEditText，不需要使用findViewById。

如：

textinput_username = (TextInputLayout) findViewById(R.id.textinput_username);
EditText username = textinput_username.getEditText();

显示错误信息
TextInputLayout的错误处理简单快速。需要的方法是setErrorEnabled和setError。
使用setError时，错误信息会出现在EditText的下面。使用setErrorEnabled可以隐藏错误信息。

如：

    public void handleClick(View view) {
        String username = textinput_username.getEditText().getText().toString();
        if (TextUtils.isEmpty(username)) {
            textinput_username.setError("请输入用户名!");
        } else {
            textinput_username.setError(null); //必须添加，否则出现错误信息第二次不显示的问题
            textinput_username.setErrorEnabled(false);
        }
    }

4.TabLayout

TabLayout提供了一个水平布局来显示tabs。可以实现TabPageIndicator或PagerTabStrip相同的效果了。与ViewPager配合使用可发挥它的优势。
布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="mat