Android Support Design Library使用详解

1.背景

随着Material Design越来越流行，也得到了广大程序员以及Android用户的芳心。Google为我们带来了Android Support Design Library，给我们提供了更加规范的MD风格的控件。作为一个Android Developer，我们当然要去深入学习一下啦！（抱歉，我觉悟的有点晚了。。。）

2.使用介绍

（1）添加依赖

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

（2）TextInputLayout

以前我们使用EditText这个控件的时候，当我们开始输入文本的时候，默认提示就会消失，有点影响用户体验，但是现在我们使用TextInputLayout，提示会默认浮动到EditText的上方，并且当我们校验文本的时候，可以在文本框下面进行显示Error。

布局文件

<android.support.design.widget.TextInputLayout
android:id="@+id/til_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:singleLine="true"
android:inputType="textEmailAddress"/>
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/til_password">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:singleLine="true"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>

Java代码

final TextInputLayout textInputLayoutUsername = (TextInputLayout) findViewById(R.id.til_username);
final TextInputLayout textInputLayoutPassword = (TextInputLayout) findViewById(R.id.til_password);
Button buttonLogin = (Button) findViewById(R.id.btn_login);
if (buttonLogin != null){
buttonLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String username = textInputLayoutUsername.getEditText().getText().toString();
String password = textInputLayoutPassword.getEditText().getText().toString();
if (!checkUsername(username)){
textInputLayoutUsername.setError("用户名不规范");
return;
} else {
textInputLayoutUsername.setError(null);
textInputLayoutUsername.setErrorEnabled(false);
}

if (!checkPassword(password)){
textInputLayoutPassword.setError("密码不规范");
return;
} else {
textInputLayoutPassword.setError(null);
textInputLayoutPassword.setErrorEnabled(false);
}
Toast.makeText(DetailActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
}
});
}

（3）Snackbar

Snackbar是一个类似于Toast的轻量级控件，会显示在界面的下方，并且可以为其添加action事件，而且还有侧滑移除的特效。

使用方式如下：

Snackbar.make(v, "Hello, my first SnackBar", Snackbar.LENGTH_SHORT)
.setAction("cancel", new View.OnClickListener() {
@Override
public void onClick(View v) {

}
}).show();

（4）FloatingActionButton

非常简单的一个控件，悬浮按钮的作用。继承自Imageview，所以我们可以设置其src属性，布局：

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_create"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_create"/>

（5）TabLayout

我们在使用ViewPager经常使用一些第三方的TabIndicator来达到一些漂亮的效果，Google现在为我们提供了MD风格的TabLayout，并且使用起来非常的简单。

布局：

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@android:color/white"
app:tabTextColor="@android:color/white"
app:tabSelectedTextColor="@android:color/darker_gray">
</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>

app:tabIndicatorColor="@android:color/white"//Tab下划线颜色
app:tabTextColor="@android:color/white"//Tab默认文字颜色
app:tabSelectedTextColor="@android:color/darker_gray"//Tab选中文字颜色

通过如下的代码把ViewPager和TabLayout进行关联

FragmentViewPagerAdapter fragmentViewPagerAdapter = new FragmentViewPagerAdapter(getSupportFragmentManager(), mFragmentList);
mViewPager.setAdapter(fragmentViewPagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);

记得在ViewPagerAdapter中复写getPageTitle的方法为TabLayout设置标题。

（6）NavigationView

定制抽屉的界面，非常的方便，通过布局和menu就可以轻松搞定，还可以实现选中的效果。

布局：

<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/menu_drawer">

</android.support.design.widget.NavigationView>

接下来就要看看header的布局文件和menu的配置文件：

navigation_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="?attr/colorPrimary">

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:src="@drawable/ic_user"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:text="马剑"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:textSize="20sp"/>

</LinearLayout>

menu_drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/item_homepage"
android:title="首页"
android:icon="@drawable/ic_homepage"/>
<item
android:id="@+id/item_blog"
android:title="博客"
android:icon="@drawable/ic_blog"/>
<item
android:id="@+id/item_mark"
android:title="收藏"
android:icon="@drawable/ic_mark"/>
<item
android:id="@+id/item_setting"
android:title="设置"
android:icon="@drawable/ic_setting"/>
</group>

<item android:title="平台">
<menu>
<item
android:id="@+id/item_ios"
android:title="iOS"
android:icon="@drawable/ic_ios"/>

<item
android:id="@+id/item_android"
android:title="Android"
android:icon="@drawable/ic_android"/>
<item
android:id="@+id/item_wechat"
android:title="WeChat"
android:icon="@drawable/ic_wechat"/>
</menu>
</item>
</menu>

最后Java代码

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
if (navigationView != null){
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
item.setChecked(true);
mDrawerLayout.closeDrawers();
return true;
}
});
}

（7）关于CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout

请浏览详细教程：http://blog.csdn.net/xyz_lmn/article/details/48055919