Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。
下面介绍design Libraay，部分内容出自官方文档。
英文原文： http://android-developers.blogspot.jp/2015/05/android-design-support-library.html
翻译： http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html
使用design，首先我们要先引入它的Libray包。如果使用AS开发只需要在build.gradle文件里面添加：
compile 'com.android.support:design:23.2.0' 目前的最新版本是23.2.0
一 SnackBar
**
**snackbar显示在屏幕底部，包含文字信息和可选的操作按钮，是提供快速反馈的好控件，在指定时间结束之后消失，用户也可以在达到设置时间之前将它滑动删除，因为包含可以滑动删除和交互按钮，所以snackbar比Toast更加强大。下面看一下SnakBar的api:
1
2
3
4
5
Snackbar
.make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
.setAction(R.string.snackbar_action, myOnClickListener)
.show();
// <span style="color: #008000;">Don’t forget to show!
</span>
二 Navigation View
** [图片上传中。。。（2）]**
现在大多数的都存在侧滑栏，NavigationView的使用，是侧滑栏的设计更加简单，尤其是对于刚刚学习使用侧滑栏的用户，上面的侧滑栏里面的内容就是通过NavigationView添加的，我们可以吧NavigationView和DrawerLayout结合使用，来实现侧滑效果。
[图片上传中。。。（3）]
<android.support.v4.widget.DrawerLayout 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.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/navigation_drawer_header" app:menu="@menu/navigation_drawer_menu" /> </android.support.v4.widget.DrawerLayout>
[图片上传中。。。（4）]
我们注意两个属性：app:headerLayout--控制侧滑栏头部的布局；app:menu 导航菜单的资源文件（也可以再运行时配置），下面分别贴出两个xml的码：
navigation_drawer_header.XML ,用来设置侧滑栏头部的显示布局，这里只是展示了一个图片。
[图片上传中。。。（5）]
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="200dp" android:background="#512da8"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" android:layout_centerInParent="true" /></RelativeLayout>
[图片上传中。。。（6）]
navigation_drawer_menu.XML 用来设置侧护栏的内容部分。
[图片上传中。。。（7）]
<?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_green" android:icon="@mipmap/ic_launcher" android:title="Green" /> <item android:id="@+id/item_blue" android:icon="@mipmap/ic_launcher" android:title="Blue" /> <item android:id="@+id/item_pink" android:icon="@mipmap/ic_launcher" android:title="Pink" /> </group> <item android:title="SubItems2"> <menu> <item android:id="@+id/subitem_01" android:icon="@mipmap/ic_launcher" android:title="SubItem01" /> <item android:id="@+id/subitem_02" android:icon="@mipmap/ic_launcher" android:title="SubItem02" /> <item android:id="@+id/subitem_03" android:icon="@mipmap/ic_launcher" android:title="SubItem03" /> </menu> </item></menu>
[图片上传中。。。（8）]
我们通过Navigation调用setNavigationItemSelectedListener，来对侧滑栏每个item的点击添加监听，然后做自己想做的处理。
三 TextInputLayout：
在design中对默认的EditText也进行了升级，使用TextInputLayout将EditText封装起来，注意：TextInputLayout一定要和EditText同时使用，不能单独使用，默认的EditText在使用之前一般我们会设置提示语，但是提示语在输入一个字母的时候就隐藏了，我们使用TextInputLayout，可以将提示语添加在EditText输入框的上方。这样也起到了时刻提示用户的作用。
具体添加代码如下:
[图片上传中。。。（9）]
<android.support.design.widget.TextInputLayout android:id="@+id/til_pwd" android:layout_width="match_parent" android:layout_height="wrap_content" > <android.support.design.widget.TextInputEditText android:id="@+id/edittext" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout>
[图片上传中。。。（10）]
然后在对应界面内设置 textInputLayout.setHint(”your hint");
这样简单的几行代码就实现了如下效果，对应TextInputLayout个人觉得用处不大，还是很少使用的。
FloatingActionButton
FloatActionButton是一个可以进行点击的圆形按钮，如下所示：
[图片上传中。。。（13）]
<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>
[图片上传中。。。（14）]
早XML文件中，我们可以通过设置FloatActionButton的src来设置里面的图标。因为FloatActionButton继承ImageView，所有我们可以使用ImagView里面的所有属性。但是修改FloatActionButton的按钮颜色和主题的colorAccent属性使一致的。现在使用AS开发的都知道，创建一个Blank Activity的时候在生成默认布局时会生成一个FloatActionButton按钮，一般情况下按钮时在页面的右下方，但是我们也可以自定义FlatActionButton的位置。
如上图所示，我就是把button放在了一个卡片上面，我们可以设置下面这两个属性来实行此功能。
1
2
app:layout_anchor=
"@id/cardview1"
app:layout_anchorGravity=
"top|right"
app:layout_anchor属性来指定FloatActionButton是固定在什么控件或者布局上的。后面的是依附控件的id.
app:layout_anchorGravity属性指定相对于依附控件的位置。
四 TabLayout（选项卡）
designLibray提出TabLayout之前，我们实现切换功能时，一般会找一些第三方库或者自己写，Design的TabLayout实现了固定的选项卡中view的宽度平分，在使用TabLayout时，我们只需要在XML里面添加：
<android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout>
然后在XML对应的界面中添加代码：
[图片上传中。。。（16）]
tabLayout.addTab(tabLayout.newTab().setText("全部")); tabLayout.addTab(tabLayout.newTab().setText("类别A")); tabLayout.addTab(tabLayout.newTab().setText("类别B")); tabLayout.addTab(tabLayout.newTab().setText("类别C")); tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.green)); tabLayout.setSelectedTabIndicatorHeight(8); tabLayout.setTabTextColors(Color.BLACK, getResources().getColor(R.color.green));
[图片上传中。。。（17）]
后面的Tab名称自己根据需求添加，这里我就随机起了几个title。然后这样实现的效果就是这样滴：
setSelectedTabIndicatorColor属性可以设置选中tab的下划线颜色；
setSelectedTabIndicatorHeight属性设置下划线的高度
setTabTextColors有两个属性，属性一是默认文字颜色，属性二是选中的文字颜色。
一般情况下TabLayout适合viewpager配合使用的，viewpager里面可以加载Fragment，如果要和Viewpager同时使用，我们一定要使用setupWithViewPager(viewPager)方法来讲TabLayout和viewPager连接在一起。
XML文件如下所示：
[图片上传中。。。（19）]
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" 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:layout_scrollFlags="scroll" app:popupTheme="@style/AppTheme.PopupOverlay" /> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > </android.support.v4.view.ViewPager>
[图片上传中。。。（20）]
在代码中，我们需要添加一个Adapter,在viewpager中加载内容，我们今天在viewpager中添加Fragment，就创建一个FragmentPagerAdapter:******
[图片上传中。。。（21）] View Code
然后再调用下面代码，就完成了，这样TabLayout和ViewPager就可以结合使用了，是不是简单了很多呢o(▽)o
Adapter adapter = new Adapter(getSupportFragmentManager());adapter.addFragment(Fragment1.newInstance("one"), "专题1");adapter.addFragment(Fragment1.newInstance("two"), "专题2");adapter.addFragment(Fragment1.newInstance("three"), "专题3");viewPager.setAdapter(adapter);tabLayout.setupWithViewPager(viewPager);
我们来看一下效果图，就是这样啦。
[图片上传中。。。（22）]
注：如果我们的Tab内容不只是3,4个二是更多的时候，TabLayout提供了app:tabMode="scrollable"属性，使TabLayout可以滑动。
五 CoordinatorLayout
CoordinatorLayout可以看成是一个增强型的FramLayout，我们使用CoordinatorLayout可以实现很多新的操作。
1，CoordinatorLayout与FloatActionButton.
我们吧FloatActionButton作为一个子View添加进入CoordinationLayout中，在触发FloatActionButton的时候在底部显示出SnackBar,我们可以看到在SnackBar进入界面的时候，FloatActionButton会自动上移，这就是利用了CoordinationLayout提供的毁掉方法，并且在snackBar消失时回到原来的位置，并且不需要添加额外的代码。
还有就是我们在上面提到的，CoordinationLayout还提供了layout_anchor属性和layout_anchorGravity一起使用，可以用于放置悬浮按钮和其他view的相对位置。这个我们在上面的FloatActionButton已经提到了。
[图片上传中。。。（23）]
2，CoordinatorLayout与AppBar。
我们看用MD写的项目几乎都有使用CoordinatorLayout和ToolBar一起使用实现的滚动技巧。
在添加此功能的时候我们需要添加一个滚动组件，例如RecycleView，NestedScrollView and so on（ScrollView没有效果）.所以我们可以添加一个这样的布局：
[图片上传中。。。（24）]
<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"> <! -- Your Scrollable View --> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar ... app:layout_scrollFlags="scroll|enterAlways"> <android.support.design.widget.TabLayout ... /> </android.support.design.widget.AppBarLayout></android.support.design.widget.CoordinatorLayout>
[图片上传中。。。（25）]
在上面的代码中我们呢看到了属性app:layout_scrollFlags，我们就是通过这个属性来判断控件是如何滚出屏幕与滚入屏幕
Flag包括:
① scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
②** enterAlways**: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
③ enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
④ exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。
上面的布局文件中我们在RecycleView中设置了属性app:layout_behavior="@string/appbar_scrolling_view_behavior"，当控件设置了这个属性，就会触发设置了app:layout_scrollFlags属性的控件发生滑动状态的改变。
注意我们只是CoordinatorLayout和ToolBar举例说明这个功能，但是CoordinatorLayout也可以和其他控件实现此效果。这个我没有自己写例子，就贴上其他Demo的图：
[图片上传中。。。（26）]
六 CollapsingToolbarLayout(可折叠的ToolBar)
从字面意思我们就知道这是个可折叠的ToolBar，使用CollapsingToolbarLayout的 CollapsingToolbarLayout继承FramLayout,CollapsingToolbarLayout包裹ToolBar的时候提供一个可折叠的ToolBar , 一般作为AppBarLayout的子视图使用。
[图片上传中。。。（27）]
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" 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:title = "collapsingToolbarLayout" app:layout_scrollFlags="exitUntilCollapsed|scroll"> <ImageView android:id="@+id/imageview" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/cheese_1" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>
[图片上传中。。。（28）]
我们早CollapsingToolBarLayout中添加了一个ImageView和ToolBar, CollapsingToolBarLayout有以下几个基本的属性。
** app:title = ""**，设置的Title内容在布局展开的时候会变得大些，而在折叠的时候使字体过渡到默认值，注意，我们的title是在CollapsingToolbarLayout上面设置的，而不是在ToolBar上面。
** app:contentScrim="?attr/colorPrimary" **设置这个属性可以是布局在拉伸或者缩小到一定高度的时候渐变ToolBar的颜色，一般渐变的颜色选择主题色，可以以自定义颜色。
** app:layout_collapseMode="" **这个属性来设置子视图折叠模式，有两种pin:
固定模式：app:layout_collapseMode = "pin" 确保Toolbar在view折叠的时候最后固定在屏幕的顶部。
视差模式：app:layout_collapseMode = "parallax" 在折叠的时候会有个视差折叠的效果。
同时我们同时也设置了属性app:layout_scrollFlags来设置滑动方式，来响应滚动布局的
app:layout_behavior="@string/appbar_scrolling_view_behavior">属性。来实现滚动布局。
[图片上传中。。。（29）]
截图很丑，下面贴上官方的例子：
[图片上传中。。。（30）]
总结：
写到这里support design Libray 里面的布局就差不多介绍完了，通过对design的使用感觉还是很人性化的，虽然有些效果的实现在网上有多的第三方库也可以实现，但是毕竟这是google官方推出的，使用起来更加放心，但是有一个缺点就是部分控件封装过于严重，所以只能在特定的布局或者要求下才能使用。
网友评论