Material Design的推出确实振奋了不少 Android开发者以及用户的心。以前Google给我的感觉就像是他并没太在乎他们的系统看起来怎么样，是一家不大注重外在的公司，当让，非常让人可惜的是，当时的Android的内在相较之下也没能展现出它得到了Google多大的关心，纵使这个系统对于Google来说非常重要。而苹果则表现得像一个优等生，无论是内在和外在都比其他的同学更胜一筹，而且还锐意发展，不断向前··· ···

但是当Material Design伴随Android5.0发布之后，一切好像就都变了个样，Google同学好像意识到了设计的重要性以及自己以往的种种不足，决定也要迎头赶上，今年（Google I/O 2015）还推出了 AndroidDesign Support Library这个官方大轮子。（这兼容性那么高，而且代码简单到连我这个线框仔都会用，再没借口不来follow了吧）。下面就来跟大家分享下这个Library里面的东西，看看事情具体是怎么样的吧。

（以下例子用图都是一些大家摸出手机来就能亲手体验的常见app。）

Navigation View

侧边菜单栏风头正劲，我个人也是非常之喜欢这东西。

下面还是来看看复制了就能走的代码：

<android.support.v4.widget.DrawerLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
   android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:fitsSystemWindows="true">
    <FrameLayout
        android:id="@+id/main_content "
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
 
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_menu"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="start"       app:headerLayout="@layout/navigation_header"
       app:menu="@menu/drawer" 
/>
 
</android.support.v4.widget.DrawerLayout>

轻轻松松，放置在DrawerLayout之中就能为你的app赶上这个时髦。

注意！上面的倒数2、3两行是最重要的两个参数，分别调用两个布局来构成整个view。

Headerlayout – 负责显示用户信息的那个layout（非必要设置）

Menu – 则是下面的各项item

在个人yy之下知乎的侧边菜单栏的menu应该就是这样子的结构。（虽然我也不知道他们有没用上新轮子）。

<menu
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"   
   tools:context=".MainActivity">
   <groupandroid:checkableBehavior="single">
<item
           android:id="@+id/navigation_item_1"
            android:checked="true"
           android:icon="@drawable/ic_android"
            android:title="@string/default"/>
<item
           android:id="@+id/navigation_item_2"
           android:icon="@drawable/ic_android"
            android:title="@string/discover"/>
<item
           android:id="@+id/navigation_item_3"
           android:icon="@drawable/ic_android"
            android:title="@string/follow"/>
 <item
           android:id="@+id/navigation_item_4"
            android:icon="@drawable/ic_android"
            android:title="@string/ collection "/>
<item
           android:id="@+id/navigation_item_5"
           android:icon="@drawable/ic_android"
            android:title="@string/ draft " />
<item
            android:id="@+id/navigation_item_6"
           android:icon="@drawable/ic_android"
            android:title="@string/ask"/>
 
    </group>
</menu>

代码部分调用OnNavigationItemSelectedListener方法即可对任意一个item做出你想要的设定。

Snackbar

（图片例子为Google相册）

可以说是我们常见的Toast的优化版本，实际上Snackbar也继承了许多Toast的方法。当我们进行一些操作的时候他会在屏幕的底部出现，对用户进行一些提示。支持滑动消失，也能够自动消失，我认为最重要的是它能够.setAction ，大大方便你嵌入一些操作，如图例中的“撤消”功能。

代码如下：

Snackbar.make(mDrawerLayout,"开发，给我做一个这个呗",Snackbar.LENGTH_SHORT). setAction(getString(R.string.text_undo),this)
.show();

以前做自己的项目的时候也使用过这个类库，但是无奈代码玩得并没有太溜，SnackBar出现的时候FAB老不能正常上浮，又觉得嵌入操作太过麻烦，一气之下放弃，用回了Toast，现在它的使用居然变得也跟Toast一样方便了，我寻思着是不是能够集中精力搞定FAB运动的问题呢？

TabLayout

有Material Design之前就存在了。I/O上面有特别鸣谢几个app对于material design的使用和支持。其中 Hunt 就使用了tablayout，它让我们在观赏外国妹子穿衣学问变得更加方便，至少我刷得很是爽。这个软件可以看做是除了google家的一大堆app之外的另外一个使用Material Design的典范，不看妹子，看看设计也好呵。文章接下来还会多次用Hunt作为例子。

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
   android:layout_height="wrap_content"
    app:tabMode="scrollable"
app:tabGravity="fill" />

以下几个可能是你正在寻找的效果的设置参数。

tabMode – 可以设置为fixed或是scrollable，hunt里面的就是scrollable，未滚动到的tab能够隐藏，fixed则是固定显示所有tab

tabGravity – gravity大家都熟悉。可以设置为center或是fill，也就是tab的居中或是填满

setText –大家都知道

setIcon– 也是大家都知道

这个控件暂时还没有做过太多的了解，所以暂时只知道以上这些东西。

Coordinator Layout

这个控件是一个大轮子，它能够实现许多Material Design的滚动效果。写到这里心情非常激动，仔细一看，这个貌似就是让Snackbar和FAB有稳定配合表现（即是FAB会因为SnackBar的上下滑动而滑动）的最可靠最简单的解决方法。

<android.support.design.widget.CoordinatorLayout   
android:id="@+id/ main"
>  
<android.support.design.widget.FloatingActionButton       
android:id=”@+id/fab”       
android:layout_width=”wrap_content”      
android:layout_height=”wrap_content”
android:src=”@drawable/ic_android”
android:layout_gravity="bottom|right"
app:fabSize=”normal” /></android.support.design.widget.CoordinatorLayout>

（注意必须将layout_gravity的参数设为bottom|right以明确按钮的位置）

Snackbar.make(mCoordinator,"我在Coordinator里面", Snackbar.LENGTH_SHORT)
    .show();

传递CoordinatorLayout作为view的参数即可。

就是这样，装在CoordinatorLayout里面的FAB就能实现相应的运动效果了。然而出现另外一个问题，如果你的在CooedinatorLayout里面使用了别的第三方的空间，程序会报错，目前我还不知道是为什么，还请大神指导。

CoordinatorLayout的强力之处远远不至于这个简单的小问题。

它更强大之处在于实现MaterialDesign里面的那些漂亮的滚动效果。让ToolBar之内的空间以及它本身对应不用的滚动时间做出相应的外观和位置上的变化。

例如Google+，当我们向上滑动浏览的时候，App bar和它里面的ToolBar会自动隐藏，为有用信息的展示腾出更多的空间。我觉得这是一种更为之有安全感而且更加便捷的沉浸模式，曾经不知道多少次不知道怎么从沉浸模式里面出来而把小说给翻乱的恼人经历相信大家都有，一下子把所有的东西隐藏起来让人有点一头雾水。

再来看看Hunt的

<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/ main"
  android:layout_width="match_parent"  
  android:layout_height="match_parent"
>
<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>

我们随便点进一个投票页面，然后往上滑动，它的ToolBar就消失了，仅留下了这个页面的标题。（虽然我上面写的是TabLayout但是）我们在Toolbar里面设置了scrollFlags的参数为enterAlways，它实现的效果就是当我们滑动向上的时候将App bar内的ToolBar上滑隐藏起来，而TabLayout内没有设置scrollFlags，所以它将不会因滚动事件而发生任何变化，就像Hunt的这行标题一样，会留在屏幕的上部分。再留意到RecyclerView里面的layout_behavior参数，这个参数的作用就是明确这个layout能在coordinatorlayout之中有正常的表现，在它里面进行滚动操作能够引起ToolBar的隐藏。

除了参数enterAlways之外，还有exitUntilCollapsed。

效果如下

在Drippler里面，上滑时ToolBar里面的Image View会隐藏，而且需要回到一定的高度Image View才能再次出现，Support Library能帮你迅速做出这个好玩的效果。同样效果的还有Google+的用户详情页。

另外还有一个CollapsingToolbarLayout布局方式，允许你将ToolBar以及之内的所有组件放在里面。

<android.support.design.widget.AppBarLayout
       android:layout_height="192dp"
       android:layout_width="match_parent">
   <android.support.design.widget.CollapsingToolbarLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_scrollFlags="scroll|exitUntilCollapsed">
       <android.support.v7.widget.Toolbar
               android:layout_height="?attr/actionBarSize"
               android:layout_width="match_parent"
               app:layout_collapseMode="pin" />
       </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

来看看上面的代码，这回我们将ToolBar直接放在了CollapsingToolbarLayout里面，而且设定CollapsingToolbarLayout的collapse方式，ToolBar内layout_collapseMode的参数为pin，我们还是看回上面Drippler的图例，我们留意它的标题栏，当我们上滑的时候，标题文字会缩小以及位移，最后停靠在屏幕上方，pin在了这里。是的，只需要setText写上标题，其他一切CollapsingToolbarLayout都帮你搞定。

layout_collapseMode还有另外一个参数parallax，即是将我们的相应的view（比如最常见的是一个image view），以逐渐透明的方式消失，这也是一个很时髦的效果。我们还能用layout_collapseParallaxMultiplier来影响整个变化过程的速度。

●上面用于举例子的应用大家都可以亲自在自己的手机上下载下来，亲手操作体验一下。就不贴自己做实验用的丑不拉几的了。

●使用之前记得在gradle写上compile 'com.android.support:design:22.2.0'。