Android Design Support Library详解

目前Design包最新的版本为23.1.1使用时直接在Gradle中添加：

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

Snackbar

Snackbar的作用类似于Toast，本身还具有按钮监听事件，效果如下：

public static Snackbar make (View view, CharSequence text, int duration)

第一个参数为显示Snackbar的父容器，官方推荐与CoordinatorLayout一起使用，这样才会有侧滑删除的效果，CoordinatorLayout可以作为父布局使用，也可以作为控件摆放在布局的任意位置，当Snackbar与它关联后，出现的位置就是它在布局中的位置，使用的方式与Toast基本相同：

/**
* 这里的父布局为CoordinatorLayout，所以传入被点击的Buttom也可以有侧滑删除效果
*/
public void showToast(View view) {
    Snackbar.make(view, "Hello Snackbar", Snackbar.LENGTH_LONG).setAction("撤销",
        new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtils.show(AtyMain.this, "Hello Toast");
            }
        }).show();
    }

TextInputLayout

TextInputLayout是一个包装EditText的容器，仅能容纳一个EditText。当用户输入时，hint文字会自动往上移动，当用户输入错误时，底部会出现错误提示，效果如下：

布局很简单：

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_nickname"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="请输入用户名"/>
</android.support.design.widget.TextInputLayout>

然后设置监听事件：

mEtNickname = mTilNickname.getEditText();   // 可以从TextInputLayout中直接获取EditText对象
mEtNickname.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        if (s.length() < 3) {
            // 不能在监听外设置，用户第一次输入格式成功后，Error会被设置为null，下次输入错误时则不会出现错误提示
            mTilNickname.setError("用户名必须大于3");
            mTilNickname.setErrorEnabled(true);
        } else {
            mTilNickname.setErrorEnabled(false);
        }
    }
    // 省略...
});

修改hint文字颜色需要在style的主题中设置：

<item name="colorAccent">#6eca6e</item>

顺带附上一张Matetrial Design的颜色设置图：

图片转自：http://chuangblog.cn/2015/07/02/coloraccentcolorprimarycolorprimarydark/

Floating Action Button（FAB）

浮动操作按钮是漂浮在 UI 上的一个圆形图标，具有一些动态的效果，比如变形、弹出、位移等等，效果如下：

官方推荐的有两种尺寸：

• 默认尺寸（normal）：适用于多数应用情况。
• 迷你尺寸（mini）：仅用于创建与其他屏幕元素视觉的连续性。

下面是两张官方的设计规范， 并且按钮的至少放在距手机边缘 16dp的位置：

FAB继承自ImageView，所以可以使用ImageView中的任意属性：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_demo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:fabSize="normal"
    app:backgroundTint="#d71288"
    android:src="@mipmap/ic_launcher"
    android:layout_gravity="right|bottom"
    android:layout_margin="16dp"/>

fabSize还支持mini模式，使用较小的按钮，按钮的大小也可以自己定义。
FAB的默认颜色来源于主题中的，也可以通过backgroundTint更改属性颜色：

<item name="colorAccent">#6eca6e</item>

如果想要实现以上的效果，父布局必须为CoordinatorLayout，否则弹出的Snackbar会和FAB叠加在一起，FAB不移动。

TabLayout

TabLayout提供多页面导航，通常与ViewPager结合使用，效果如下：

先来看一下布局文件：

<android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#03a9f4"
    app:tabIndicatorColor="#ffffff"
    app:tabSelectedTextColor="@android:color/white"
    app:tabTextAppearance="@style/TabAppearance"
    app:tabTextColor="#eeeeee"/>

tabMode：如果tab数较少可以使用fixd，它会均分整个宽度，默认为fixd；如果tab数较多时可以使用scrollable，它会给每个tab一个默认的长度，多出来的部分可以通过滑动显示出来。
tabIndicatorColor：底部滑块的颜色。
tabSelectedTextColor：选中状态下文字的颜色。
tabTextColor：未选中状态文字的颜色。
tabTextAppearance：设置文字大小，目前只能通过style来设置：

<style name="TabAppearance">
    <item name="android:textSize">16sp</item>
</style>

接下来再看下java代码部分，首先需要为TabLayout绑定一个数据源，然后再与ViewPager相关联：

 List<String> tabText = new ArrayList<>(Arrays.asList(new String[]{"tab_1", "tab_2",
    "tab_3"}));
for (String s : tabText) {
    mTabLayout.addTab(mTabLayout.newTab().setText(s));
}
FgtAdapter adapter = new FgtAdapter(getSupportFragmentManager(), mFgts, tabText);
mVpTab.setAdapter(adapter);
mTabLayout.setupWithViewPager(mVpTab);

需要注意的时，ViewPager的适配器必须实现getPageTitle()方法，这样才会在TabLayout上显示标题：

@Override
public CharSequence getPageTitle(int position) {
    return mTitles.get(position);
}

NavigationView

NavigationView一般和DrawerLayout结合使用，可以实现侧滑菜单的效果：

使用需要DrawerLayout作为父容器，然后通过include的方式加载主界面的布局：

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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">

    <include layout="@layout/include_main_content"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"/>
</android.support.v4.widget.DrawerLayout>

layout_gravity：设置始位置，start表示从左往右滑出，end则反之。
headerLayout：设置头部布局
menu：设置头布局以下的菜单项
头布局和菜单的代码比较简单，我们直接来看如何设置监听事件：

mNavigationView.setNavigationItemSelectedListener(new NavigationView
    .OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.nav_menu_home) {
            ToastUtils.show(AtyTabLayout.this, "主页");
        }
        // 默认点击完Item后是不是自动关闭，需要手动关闭
        mDrawerLayout.closeDrawers();
        return true;
    }
});

CoordinatorLayout

CoordinatorLayout是一个增强型的FramLayout，也是整个Design Support Library中最重要与最难的部分。前面的提到的各种效果大部分都需要它才能实现，