Material Design设计（Android5.0新特性）

Material Design应用的设计

1. Material Design的概念
   Material Design可以理解为一门视觉设计语言，以构建跨平台和超越设备尺寸的统一体验，遵循基本的移动设计定则，支持触摸、语音、鼠标、键盘等输入方式为目标。通过设计方式来达到实体表面和边缘的真实感，借鉴传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。构建出视觉层级、视觉意义以及视觉聚焦。Material Design设计语言根据用户行为凸显核心功能，通过有意义的动画效果维持整个系统的连续性体验进而指引用户操作。
   （Google最初设计这门全新的设计语言，目的是为了打造一个Google独有的设计风格。无论是手机、平板、台式机和其他平台形成统一的设计理念。）

2. Google原生UI的Material Design(材料设计)风格。
   Google在Android5.0之后新增的三维视图允许您设置 Z 维度来让视图元素升高偏离视图层次并投射实时阴影，即使是动态元素也能实现。
   内置的Activity转换可让用户在赏心悦目的动画中无缝完成状态转换。Material Design 主题为您的 Activity 添加了转换，提供了在所有 Activity 中使用共享视觉元素的功能。
   应用中的按钮、复选框以及其他触摸控件提供了波纹动画。
   开发者还可以在 XML 中定义可绘制矢量，并以各种方式为其添加动画。可绘制矢量可在不损失清晰度的情况下进行缩放，非常适合单色应用内图标。
   新增了一种名为渲染线程的系统管理处理线程，即使是在主 UI 线程出现延迟的情况下，仍可保持动画的流畅。

3. 在Android5.0(API 21)创建基于MaterialDesign的应用，开发者需要掌握的一下几点。

   • 材料主题的使用
     Android系统提供了满足不同需求的Material主题，可以自定义主题的外观(操作栏和状态栏的着色等)，当前系统下的小部件拥有全新的设计和触摸反馈动画，开发者可以自己定制触摸反馈的动画以及操作行为的转换。
     1)定义Material主题以及主题属性：

<resources>    <style name="AppTheme" parent="android:Theme.Material">    <!--  操作栏 -->    <item name="android:colorPrimary">@color/primary</item>    <!-- 状态栏 -->    <item  name="android:colorPrimaryDark">    @color/primary_dark</item>    <!--  控制部件checkboxes和text fields -->    <item name="android:colorAccent">@color/accent</item>    </style></resources>

• 定制状态栏
  材料主题可让您轻松定制状态栏，因此您可以指定一个符合自己品牌特色且对比度足够高、能够显示白色状态图标的颜色。
  如果要为状态栏设置定制颜色，您可在扩展材料主题时使用android:statusBarColor属性,
  默认情况下android:statusBarColor将继承 android:colorPrimaryDark 的值。
  您也可自行将状态栏移到后侧。例如，您想在一个照片上以透明的方式显示状态栏，同时利用细微的深色渐变以确保白色状态图标仍保持可见。 如果要执行此操作，请将 android:statusBarColor 属性设置为 @android:color/transparent 并根据需要调整窗口标志。您也可以使用 Window.setStatusBarColor() 方法进行动画或淡出设置。

• 注意：
  在多数情况下，状态栏与主工具栏之间应该有一个清楚的分割，您在这些栏的后侧显示全屏的丰富图像或媒体内容以及使用颜色渐变以确保图表仍保持可见的情况除外;
  定制导航栏和状态栏时，您可选择将导航栏和状态栏变透明或仅修改状态栏。 在所有其他情况中，导航栏均应保持黑色;

• 设计布局
  除了应用及定制材料主题，您的布局同时也应符合Material Design 设计原则。设计布局时，请特别注意下列几点：
  1)基线格点
  2)关键线
  3)间距
  4)触摸目标大小
  5)布局结构
  (具体设计标准参考Material Design文档(布局与结构))
  查看之前的文章

• 使用Design Support提供的全新组件
  1.ToolBar
  由于ActionBar设计的原因，被限定只能位于活动顶部从而不能实现MaterialDesign的效果。因此官方推出ToolBar代替ActionBar。ToolBar不仅继承了ActionBar的全部功能，而且灵活度很高，可以配合其他控件完成一些MaterialDesign效果。
  2.滑动菜单(DrawerLayout)
  滑动菜单可以说是MaterialDesign中最常见的效果之一了，在许多著名的应用(如Gmail,Google+等)中，都有滑动菜单的功能。所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来。这种方式既节省了屏幕空问，又实现了非常好的动画效果，是Material Design中推荐的做法。谷歌提供了一个DrawerLayout控件，借助这个控件，实现滑动菜单简单又方便。
  3.NavigationView(滑动菜单布局)
  Google为了方便开发者设计出符合MaterialDesign风格的应用提供了NavigationView来定制滑动菜单页面内容
  4.悬浮按钮(FloatingActionButton)
  立面设计是MaterialDesign中一条非常重要的设计思想，也就是说，按照Material Design的理念，应用程序的界面不仅仅只是一个平面，而应该是有立体效果的。在官方给出的示例中，最简单且最具代表性的立面设计就是悬浮按钮了，这种按钮不属于主界面平面的一部分，而是位干另外一个维度的，因此就会给人一种悬浮的感觉。
  5.SnackBar
  SnackBar和Toast一样是一种操作提示工具，两个有着不同的应用场景。Toast的作用是告诉用户现在发生了什么事情，但同时用户只能被动接收这个事情，因为没有什么办法能让用户进行选择。而Snackbar则在这方面进行了扩展，它允许在提示当中加人一个可交互按钮，当用户点击按钮的时候可以执行一些额外的逻辑操作。
  6.CoordinatorLayout(协调布局)
  CoordinatorLayout可以说是一个加强版的FrameLayout，这个布局也是由DesignSupport库提供的。它在普通情况下的作用和FrameLayout基木一致，CoordinatorLayout可以监听其所有子控件的各种事件，然后自动帮助我们做出最为合理的响应。(产生一些浮动动画)。
  7.AppBarLayout(垂直的LinearLayout)
  DesignSupport库中提供的一个工具AppBarLayout它实际上是一个垂直方向的LinearLayout，它在内部做了很多滚动事件的封装，并应用了一些Material Design的设计理念。主要为了解决CoordinatorLayout子控件相互遮掩的问题。
  8.SwipeRefreshLayout(下拉刷新)
  下拉刷新这种功能早就不是什么新鲜的东西了，几乎所有的应用里都会有这个功能。不过市面上现有的下拉刷新功能在风格上都各不相同，并且和Material Design还有些格格不入的感觉。因此，谷歌为了让Android的下拉刷新风格能有一个统一的标准，于是在MaterialDesign中制定了一个官方的设计规范。
  SwipeRefreshLayout就是用于实现下拉刷新功能的核心类，它是由support-v4库提供的。我们把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout中，就可以迅速让这个控件支持下拉刷新。
  9.CollapsingTooBarLayout(可折叠是标题栏布局)
  CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，它也是由DesignSupport库提供的。CollapsingToolbarLayout可以让Toolbar的效果变得更加丰富，不仅仅是展示一个标题栏，而是能够实现非常华丽的效果。
  不过，CollapsingToolbarLayout是不能独立存在的，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须是CoordinatorLayout的子布局。
  10.创建卡片(CardView)与列表(RecyclerView)小组件
  如果要应用中使用MaterialDesign风格创建复杂列表与卡片，建议使用 RecyclerView 以及 CardView 小部件。
  1)创建列表
  RecyclerView 小部件比 ListView 更高级且更具灵活性。 此小部件是一个用于显示庞大数据集的容器，可通过保持有限数量的视图进行非常有效的滚动操作。 如果您有数据集合，其中的元素将因用户操作或网络事件而在运行时发生改变，建议使用 RecyclerView 小部件。
  2)创建卡片
  CardView 扩展 FrameLayout 类并让您能够显示卡片内的信息，这些信息在整个平台中拥有一致的呈现方式。CardView小部件可拥有阴影和圆角。
  如果要使用阴影创建卡片，建议使用 card_view:cardElevation 属性。CardView 在 Android 5.0（API 级别 21）及更高版本中使用真实高度与动态阴影，
  3)使用方式
  1.RecyclerView 与 CardView 小部件为 v7支持内容库的一部分。 如果要在您的项目中使用这些小部件，请将这些Gradle依赖项添加至您的应用模块：

dependencies {    ...    compile 'com.android.support:cardview-v7:21.0.+'    compile 'com.android.support:recyclerview-v7:21.0.+'}

    2.eclipse中下载或导入Android-support-v7.jar包            <具体使用方式请参考官方API>

• 定制阴影以及视图裁剪
  1)定制阴影
  1.Material Design 为 UI 元素引入高度。高度将帮助用户了解每 个元素的相对重要性，让他们能够集中于手边的工作。
  2.由Z属性所表示的视图高度将决定其阴影的视觉外观：拥有较高Z 值的视图将投射更大且更柔和的阴影。拥有较高Z值的视图将挡住 拥有较低 Z 值的视图；不过视图的 Z值并不影响视图的大小。
  3.阴影是由提升的视图的父项所绘制，因此将受到标准视图裁剪的 影响，而在默认情况下裁剪将由父项执行。
  4.视图的 Z 值包含两个组件：
  高度：静态组件。
  转换：用于动画的动态组件。
  Z = elevation + translationZ
  5.自定义视图阴影与轮廓。
  视图的背景可绘制对象的边界将决定其阴影的默认形状。轮廓代表图形对象的外形并定义触摸反馈的波纹区域。
  下面举一个以背景可绘制对象定义的视图示例：

<TextView    android:id="@+id/myview"    ...    android:elevation="2dp"    android:background="@drawable/myrect" />

背景可绘制对象被定义为一个拥有圆角的矩形：

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><solid android:color="#42000000" /><corners android:radius="5dp" /></shape>

视图将投射一个带有圆角的阴影，因为背景可绘制对象将定义视图的轮廓。 如果提供一个自定义轮廓，则此轮廓将替换视图阴影的默认形状。
2)裁剪视图
1.裁剪视图让您能够轻松改变视图形状。您可以裁剪视图，以便与其他设计元素保持一致，也可以根据用户输入改变视图形状。您可使用 View.setClipToOutline() 方法或 android:clipToOutline 属性将视图裁剪至其轮廓区域。 由 Outline.canClip() 方法所决定，仅有矩形、圆形和圆角矩形轮廓支持裁剪。
2.如果要将视图裁剪至可绘制对象的形状，请将可绘制对象设置为视图背景（如上所示）并调用 View.setClipToOutline() 方法。
3.裁剪视图是一个成本高昂的操作，因此不可为您用于裁剪视图的形状添加动画。 如果要实现此效果，请使用揭露效果动画。

• 矢量图片的绘制
  图片的使用
  1.图片的着色
  在Android 5.0（API级别21）及更高版本，您可为位图以及定义为 Alpha 蒙版的点九图着色。您可使用颜色资源或分解为颜色资源（例如 ?android:attr/colorPrimary）的主题属性为其着色。通常，您只有一次机会创建这些资产并自动为其上色以符合您的主题。您可利用 setTint()方法为BitmapDrawable或NinePatchDrawable 对象着色。您也可以利用 android:tint 以及 android:tintMode 属性设置您的布局中的着色颜色和模式。
  2.突出颜色的萃取
  在Android5.0之后可以用Palette类从图像萃取突出颜色。
  突出颜色包括{
  (鲜艳),(鲜艳深色),(鲜艳浅色),(低调),(低调浅色),(低调深色)
  }
  3.矢量图片
  在Android 5.0（API 级别 21）及更高版本中，您可定义矢量图片，而且图片可在不损失清晰度的情况下缩放。 您只需一个资源文件即可创建一个矢量图像，而位图图像则需要为每个屏幕密度提供一个资源文件。 如果要创建一个矢量图像，请您在 XML 元素中定义形状。（了解）

• 定制动画(这一部分内容比较多并且难理解单独作为一个知识点来讲)
  Material Design 中的动画将为用户提供操作反馈并在用户与您的应用进行互动时提供视觉连续性。材料主题将为按钮与操作行为转换提供一些默认动画，而 Android5.0（API级别21）及更高版本可让您定制这些动画，同时也可创建新动画：
  1.触摸反馈
  Material Design 中的触摸反馈可在用户与UI元素互动时，在接触点上提供即时视觉确认。适用于按钮的默认触摸动画使用全新RippleDrawable 类别，以波纹效果实现不同状态间的转换。在大多数情况下，您应以下列方式指定视图背景，在您的视图XML中应用此功能：?android:attr/selectableItemBackground 指定有界的波纹。?android:attr/selectableItemBackgroundBorderless 指定越过视图边界的波纹。 它将由一个非空背景的视图的最近父项所绘制和设定边界。
  注意：selectableItemBackgroundBorderless 是 API 级别 21 中推出的新属性。此外，您可利用 ripple 元素将 RippleDrawable 定义为一个 XML 资源。您可以为 RippleDrawable对象指定一种颜色。如果要改变默认触摸反馈颜色，请使用主题的
  android:colorControlHighlight 属性。
  2.循环揭露
  当您显示或隐藏一组 UI 元素时，揭露动画可为用户提供视觉连续性。ViewAnimationUtils.createCircularReveal()方法让您能够为裁剪区域添加动画以揭露或隐藏视图。
  3.操作行为转换
  Material Design 应用中的操作行为转换透过通用元素之间的移动和转换提供不同状态之间的视觉连接。 您可为进入、退出转换以及操作行为之间的共享元素转换指定定制动画。
  进入转换：将决定操作行为中视图如何进入场景。例如，在分解进入转换中，视图将从屏幕外进入场景并飞往屏幕中心。
  退出转换：将决定操作行为中应用行为的显示视图如何退出场景。例如，在分解退出转换中，视图将从屏幕中心退出场景。
  共享元素转换：将决定两个操作行为转换之间共享的视图如何在这些操作行为中转换。例如，如果两个操作行为拥有相同的图像，但其位置与大小不同，changeImageTransform共享元素转换将在这些操作行为之间平滑地转换与缩放图像。
  Android 5.0（API 级别 21）支持这些进入与退出转换：
  分解 - 从场景中心移入或移出视图。
  滑动 - 从场景边缘移入或移出视图。
  淡入淡出 - 通过调整透明度在场景中增添或移除视图。
  任何扩展 Visibility 类别的转换均将获得进入或退出转换支持。
  Android 5.0（API 级别 21）也支持这些共享元素转换：
  changeBounds - 为目标视图的布局边界的变化添加动画。
  changeClipBounds - 为目标视图的裁剪边界的变化添加动画。
  changeTransform - 为目标视图的缩放与旋转变化添加动画。
  changeImageTransform -为目标图像的大小与缩放变化添加动画。
  4.曲线运动
  Material Design 中的动画利用曲线实现时间内插与空间移动模式。 利用 Android 5.0（API 级别21）及更高版本，您可为动画定义定制时间曲线以及曲线运动模式。
  PathInterpolator 类别是一个基于贝塞尔曲线或Path对象的全新插入器。此插入器在一个 1x1 的正方形内指定一个运动曲线，定位点位于 (0,0) 以及 (1,1)，而控制点则使用构造函数参数指定。 您也可以将路径插入器定义为一个 XML 资源：

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"    android:controlX1="0.4"    android:controlY1="0"    android:controlX2="1"    android:controlY2="1"/>

    系统将为 Material Design 规范中的三种基本曲线提供 XML 资源：    @interpolator/fast_out_linear_in.xml    @interpolator/fast_out_slow_in.xml    @interpolator/linear_out_slow_in.xml    您可以将一个PathInterpolator对象传递给Animator.setInterpolator() 方法。    ObjectAnimator 类别拥有新的构造函数，可让您一次使用两个或更多属性在路径上为坐标添加动画。例如，下列动画使用 Path 对象为视图的 X 和 Y 属性添加动画：

ObjectAnimator mAnimator;mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);...mAnimator.start();

5.视图状态改变
StateListAnimator 类别让您能够定义视图状态改变时运行的动画。

**以上是本人在学习Android5.0新特性的一点总结，更多内容会在以后的博客中不断更新**