使用Material Design，实现UI的体验的最佳快捷实现！

一、什么是Material Design？

Material Design语言的一些重要功能包括 系统字体Roboto的升级版本 ，同时颜色更鲜艳，动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计，包括安卓和网页端的Gmail和Calendar。大家可能还会记得，看到过有关这些变动的文章， 有些博客 已经掌握了外泄截屏，显示经过了重新设计的Gmail，界面更干净、更简约。在安卓平台上，这种新界面被称为Material，支持各种新动画效果，具有内置的实时UI阴影，以及可在不同屏幕之间切换的hero元素。

二、部分组件介绍

• Toolbar

  ToolBar的出现是为了替换之前的ActionBar的各种不灵活使用方式,相反,ToolBar的使用变得非常灵活,因为它可以让我们自由往里面添加子控件.低版本要使用的话,可以添加support-v7包.

  在 布局文件中添加 Toolbar 控件：

      <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent" >
  
      </android.support.v7.widget.Toolbar>

  添加依赖：

  compile'com.android.support:appcompat-v7:23.4.0'

• 滑动菜单：

  1. DrawerLayout：

     添加依赖：

     compile 'com.android.support:design:26.0.0-alpha1'

  2. NavigationView：

     添加依赖：

     compile 'com.android.support:design:26.0.0-alpha1'

• 悬浮按钮和可交互提示：

  1. FlotingActionButton：

     浮动操作按钮适用于进阶的操作。它是漂浮在 UI 上的一个圆形图标，具有一些动态的效果，比如变形、弹出、位移等等。

     FlotingActionButton使用示例：

     <android.support.design.widget.FloatingActionButton
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="right|bottom"
                 android:src="@drawable/ic_discuss"
                 app:backgroundTint="#ff87ffeb"
                 app:rippleColor="#33728dff"
                 app:elevation="6dp"
                 app:pressedTranslationZ="12dp"
                 />

     添加依赖：

     compile 'com.android.support:design:26.0.0-alpha1'

  2. Snackbar

     Snackbar是Android Support Design Library库中的一个控件，可以在屏幕底部快速弹出消息，比Toast更加好用。

     Snackbar 使用示例：

     Snackbar.make(view,"消息已发出",Snackbar.LENGTH_SHORT).show();

     添加依赖：

     compile 'com.android.support:design:26.0.0-alpha1'

  3. CoordinatorLayout

     CoordinatorLayout是在 Google IO/15 大会发布的，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果

     <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.design.widget.AppBarLayout>
     </android.support.design.widget.CoordinatorLayout>

     添加依赖：

     compile 'com.android.support:design:26.0.0-alpha1'

• 卡片式布局：

  1. CardView

     CardView是在安卓5.0提出的卡片式控件。

     <?xml version="1.0" encoding="utf-8"?>
     <FrameLayout 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="wrap_content"
     android:layout_marginBottom="10dp"
     android:background="@color/gray">
     
     <android.support.v7.widget.CardView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_marginLeft="10dp"
         android:layout_marginRight="10dp"
         app:cardBackgroundColor="@color/blue"
         app:cardCornerRadius="16dp"
         app:cardElevation="16dp">
     
         <TextView
             android:id="@+id/id_num"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:layout_margin="10dp"
             android:gravity="center"
             android:textColor="@color/white"
             android:textSize="20sp" />
     </android.support.v7.widget.CardView>
     </FrameLayout>

     添加依赖：

     compile 'com.android.support:design:26.0.0-alpha1'

  2. AppBarLayout

     AppBarLayout是一种支持响应滚动手势的app bar布局（比如工具栏滚出或滚入屏幕）.

     <android.support.design.widget.AppBarLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content">
     
             <android.support.v7.widget.Toolbar
                 android:id="@+id/toolbar"
                 android:layout_width="match_parent"
                 android:layout_height="?android:attr/actionBarSize"
                 android:background="?attr/colorPrimary"
                 app:layout_scrollFlags="scroll" />
     </android.support.design.widget.AppBarLayout>

     添加依赖：

     compile 'com.android.support:design:26.0.0-alpha1'

• 下拉刷新 可折叠式标题栏

  1. CollaosingToolbarLayout

     CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局。
     CollapsingToolbarLayout和ScrollView一起使用会有滑动bug，注意要使用NestedScrollView来替代ScrollView。

     AppBarLayout的子布局有5种滚动标识(就是上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)：
     scroll:将此布局和滚动时间关联。这个标识要设置在其他标识之前，没有这个标识则布局不会滚动且其他标识设置无效。
     enterAlways:任何向下滚动操作都会使此布局可见。这个标识通常被称为“快速返回”模式。
     enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
     exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。
     snap:当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。

     示例代码：

     <?xml version="1.0" encoding="utf-8"?>
     <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/coordinatorLayout"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     
     <android.support.design.widget.AppBarLayout
         android:id="@+id/app_bar"
         android:layout_width="match_parent"
         android:layout_height="@dimen/app_bar_height"
         android:fitsSystemWindows="true"
         android:theme="@style/AppTheme.AppBarOverlay">
     
         <android.support.design.widget.CollapsingToolbarLayout
             android:id="@+id/toolbar_layout"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             app:contentScrim="?attr/colorPrimary"
             app:statusBarScrim="@android:color/transparent"
             app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
     
             <!--封面图片-->
             <ImageView
                 android:id="@+id/imageview"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:scaleType="centerCrop"
                 android:src="@drawable/diqiu"
                 app:layout_collapseMode="parallax"
                 app:layout_collapseParallaxMultiplier="0.7"
                 android:fitsSystemWindows="true"/>
     
             <!--视频及弹幕控件-->
             <FrameLayout
                 android:id="@+id/video_danmu"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 app:layout_collapseMode="parallax"
                 app:layout_collapseParallaxMultiplier="0.7"
                 android:fitsSystemWindows="true"
                 android:visibility="gone">
                 <VideoView
                     android:id="@+id/videoview"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent" />
     
                 <!--哔哩哔哩开源的弹幕控件-->
                 <master.flame.danmaku.ui.widget.DanmakuView
                     android:id="@+id/danmaku"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent" />
             </FrameLayout>
     
             <android.support.v7.widget.Toolbar
                 android:id="@+id/toolbar"
                 android:layout_width="match_parent"
                 android:layout_height="?attr/actionBarSize"
                 app:layout_collapseMode="pin"
                 app:popupTheme="@style/AppTheme.PopupOverlay" >
     
                 <!--自定义带图片的立即播放按钮-->
                 <android.support.v7.widget.ButtonBarLayout
                     android:id="@+id/playButton"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent"
                     android:gravity="center"
                     android:visibility="gone">
                     <ImageView
                         android:layout_width="wrap_content"
                         android:layout_height="match_parent"
                         android:layout_gravity="center_horizontal"
                         android:src="@mipmap/ic_play_circle_filled_white_48dp"/>
     
                     <TextView
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:textColor="#ffffff"
                         android:text="立即播放"
                         android:layout_gravity="center_vertical"
                        />
                 </android.support.v7.widget.ButtonBarLayout>
     
             </android.support.v7.widget.Toolbar>
         </android.support.design.widget.CollapsingToolbarLayout>
     </android.support.design.widget.AppBarLayout>
     
     <include layout="@layout/content_scrolling" />
     
     <android.support.design.widget.FloatingActionButton
         android:id="@+id/fab"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_margin="@dimen/fab_margin"
         android:src="@mipmap/ic_play_circle_filled_white_48dp"
         app:layout_anchor="@id/app_bar"
         app:layout_anchorGravity="bottom|end" />
     
     </android.support.design.widget.CoordinatorLayout>

     添加依赖：

     compile 'com.android.support:design:26.0.0-alpha1'

---

备注：小编本次只是简单介绍了几种常见的组件，以及使用它们需要添加的依赖和布局文件，具体组件的使用情况将于之后继续推出，希望能够帮到大家。