?简介? ? ? ?
? ? ? Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。利用库中提供的新组件，我们能够方便快速的开发符合Material Design设计规范的应用。
?
概述
? ? ? 本文主要介绍一下android design support 介绍的几个新组件，比如：Snackbar，Floating Action Button(FAB)，TextInputLayout, NavigationView, TabLayout, CoordinatorLayout。最后会给出一个示例集合及代码。
??
Snackbar
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Snackbar滑入滑出
?类似于Toast组件，Snackbar是一个新的组件用来快速的从屏幕底部弹出一条消息给用户。用户可以与Snackbar交互，也可以直接滑出屏幕。如果没有操作，Snackbar会在设置的timeout后自动消失。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可以在Snackbar上添加事件
对于开发者来说，只需要几行代码就可以实现以上功能：
Snackbar.make(mDrawerLayout, "Your message", Snackbar.LENGTH_SHORT) .setAction(getString(R.string.text_undo), this) .show();
?注意：你只能同时展示一个Snackbar。
?
Floating Action Button
Floating Action Button(FAB)是一个标准的用于交互的组件，例如:向列表添加新的项。现在不需要第三方库我们就可以在自己应用中实现此功能。
这个按钮有两种不同的大小：
Normal(56dp) --大多数情况应该使用此尺寸.
Mini(40dp) --?只有在屏幕上显示的其他组件需要视觉连续性时才使用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Normal(左)Mini(右)FAB按钮
默认情况，FAB使用应用主题的accent colour作为其背景色。当然，我们也能通过属性设置轻松的改变背景色，下面介绍一些基本的属性：
- fabSize - 用来设置按钮大小(normal, mini)
- backgroundTint - 用来设置背景色
- borderWidth - 用来给按钮设置一个边框
- rippleColor - 用来设置按下时的波浪效果颜色
- src - 用来设置FAB中的图标
<android.support.design.widget.FloatingActionButton android:id=”@+id/fab_normal” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:[email protected]/ic_plus” app:fabSize=”normal” />
?
?
TextInputLayout
新的TextInputLayout运行我们包装EditText，当EditText获得焦点时，EditText中指定的hint就会悬浮在EditText上。这样非常有帮助，用户在输入的同时也能看到哪些是合法输入的提示。
?也支持错误信息提示，可以通过简单添加语句显示错误信息：
setErrorEnabled(true);setError(getString(R.string.text_error_message));
?
?
?
NavigationView
NavigationDrawer在现在的App中应用非常普遍，直到现在，终于有了一种快速的方式来实现此功能。在DrawerLayout中添加NavigationView组件就可以显示导航菜单。
?
<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_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <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/drawer" /></android.support.v4.widget.DrawerLayout>
?这个组件有两个关键属性：
HeaderLayout
headerLayout属性是可选项，用来在抽屉顶部声明一个布局。通常用来展示用户头像等信息。
Menu
menu属性用来声明抽屉中的菜单选项，也可以编码通过inflateMenu()方法实现：
上图显示了两种NavigationView菜单。
右边使用标准的一组可点击菜单：
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_1" android:checked="true" android:icon="@drawable/ic_android" android:title="@string/navigation_item_1" /> <item android:id="@+id/navigation_item_2" android:icon="@drawable/ic_android" android:title="@string/navigation_item_2" /> </group></menu>
?上面所有菜单都显示在一个列表中，没有分组。
?
左图类似于右图，只是我们使用了菜单分组，下面是资源文件：
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_subheader" android:title="@string/nav_header"> <menu> <!-- Menu items go here --> </menu> </item> </group></menu>
?
我们可以通过代码动态添加菜单选项，通过getMenu()方法获取所有的菜单项，然后可以添加菜单到此实例中。
下面介绍几个在实际使用中可能要用到的重要的属性：
- ?itemBackground -- 用来设置菜单项的背景资源
- itemIconTint -- 用来设置icon的颜色
- itemTextColor -- 用来设置菜单项的文字颜色
为了捕获菜单的点击事件，我们只需要设置一个OnNavigationItemSelectedListener，这样我们就可以对所有菜单的点击事件作出反应。
?
TabLayout
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 固定tabs
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可滑动tabs
为实现上面的效果，我们先要添加TabLayout到我们的布局中：
<android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" />
?完成上面代码后，我们可以通过几个主要的属性来改变我们TabLayout的展示方式：
- tabMode - 用来设置TabLayout的显示模式。可以是fixed(所有tabs都固定不变)或者scrollable(显示一部分tab，另外一部分滑动显示)
- tabGravity - 设置tabs的Gravity，可以是fill或者centre
- setText() - 设置tab中显示的文本
- setIcon() - 设置tab中显示的图标
在使用TabLayout视图时，我们可以设置几个不同的事件监听器：
- OnTabSelectedListener - 可以设置用来监听tabs的选择状态变化
- TabLayoutOnPageChangeListener - 包含对应TabLayout的回调，它处理标签选择状态的同步。
- ViewPagerOnTabSelectedListener - 包含对应ViewPager的回调，它也处理标签选择状态的同步
完成布局文件的添加，只需要通过setupWithViewPager()方法把TabLayout关联上你的viewpager即可：
ViewPager pager = (ViewPager)rootView.findViewById(R.id.viewPager);pager.setAdapter(new MyPagerAdapter(getActivity().getSupportFragmentManager()));TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.sliding_tabs);tabLayout.addTab(tabLayout.newTab().setText("Tab One"));tabLayout.addTab(tabLayout.newTab().setText("Tab Two"));tabLayout.addTab(tabLayout.newTab().setText("Tab Three"));tabLayout.setupWithViewPager(pager);?
CoordinatorLayout
CoordinatorLayout是android design support library中提供的一个最主要的组件，它主要用来控制，协调其子视图的协助。比如可通过滑动控制可伸缩的Toolbar，可通过上下滑动隐藏FAB等。
在CoordinatorLayout需要一个子视图来触发滚动事件，例如RecyclerView，NestedScrollView。如果你使用的ListView或者 ScrollView，必须用前面两种视图替换才能工作，因为前者实现了NestedScrollingChild 接口。
CoordinatorLayout和AppBar
?
<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"> <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>?
?
为了使RecyclerView与Coordinator协作，我们在RecyclerView中添加layout_behavior属性。这样，CoordinatorLayout就可以对RecyclerView的滚动作出反应。TooBar中设置了layout_scrollFlags属性，这个用来表明在滚动式，TooBar应该如何变化。
?
- enterAlways - 当下滑时，TooBar马上可见。
- ?enterAlwaysCollapsed -?当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
- exitUntilCollapsed - 上滑开始时就开始折叠
?
CoordinatorLayout与Toobars
你现在可以使用新的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>当使用CollapsingToolbarLayout时，layout_collapseMode属性必须设置，有两个选项：
?
- Pin - 当CollapsingToolbarLayout张开时Toolbar会显示在顶部
- Parallax - 当设置为此属性时，在CollapsingToolbatLayout添加ImageView就可以实现渐变效果。
?
?
