Material Design

1.简介

google的设计风格有3种：拟物化，扁平化，材料化。目前主流的风格就是材料化。严格来说Material Design是一个全新的设计语言，而不是设计风格。所以我们并不能说材料化比扁平化好。材料化的特点就是拟物扁平化。材料化比扁平化多了一个z轴的概念，而这个z值就是View距离视图的高度（elevation），而高度决定了阴影（shadow）的大小。下面通过2张图来看看它们之间的对比。

由图中，我们很明显的能看出材料化有了一种立体感。

2.视图和阴影简介

View的大小位置都是通过x，y确定的，而现在有了z轴的概念，而这个z值就是View的高度（elevation），而高度决定了阴影（shadow）的大小。

由 Z 属性所表示的视图高度将决定其阴影的视觉外观：拥有较高 Z 值的视图将投射更大且更柔和的阴影。 拥有较高 Z 值的视图将挡住拥有较低 Z 值的视图；不过视图的 Z 值并不影响视图的大小。

阴影是由提升的视图的父项所绘制，因此将受到标准视图裁剪的影响，而在默认情况下裁剪将由父项执行。

此外，在创建其中的小部件在执行某些操作行为时会暂时升至视图平面之上的动画时，高度也很实用。

3.指定视图高度

视图的 Z 值包含两个组件：

elevation (高度)：静态组件。
translationZ(转换)：用于动画的动态组件。

如果要在布局定义中设置视图的高度，请使用 android:elevation 属性。如果要在 Activity 的代码中设置视图高度，请使用 View.setElevation() 方法。如果要设置视图translation，请使用 View.setTranslationZ() 方法。

全新的 ViewPropertyAnimator.z() 与 ViewPropertyAnimator.translationZ() 方法让您能够轻松地为视图高度添加动画。如果要了解更多信息，请参阅 ViewPropertyAnimator 的 API 参考以及属性动画开发者指南。

下面我们用例子说明：一个简单触摸监听，在点击和抬起的时候分别设置translationZ的值，按下的时候translationZ=120，抬起translationZ=0.
这样translationZ大的视图就会覆盖translationZ小的视图。
代码如下：

int action = motionEvent.getActionMasked();                  /* Raise view on ACTION_DOWN and lower it on ACTION_UP. */                  switch (action) {                      case MotionEvent.ACTION_DOWN:                          Log.d(TAG, "ACTION_DOWN on view.");                          view.setTranslationZ(120);                          break;                      case MotionEvent.ACTION_UP:                          Log.d(TAG, "ACTION_UP on view.");                          view.setTranslationZ(0);                          break;                      default:                          return false;                  }  

效果如下：

4.视图的裁剪（Clip）

我们可以对view进行裁剪，比如：我们可以裁剪成圆角矩形，圆形等等。

4.1 裁剪步骤：

    1.继承 ViewOutlineProvider 类。    2.重写getOutline() 方法。    3.利用 View.setOutlineProvider() 方法设置

4.2 代码编写：

1.重写ViewOutlineProvider 类：

public class MyViewOutlineProvider extends ViewOutlineProvider {    @Override    public void getOutline(View view, Outline outline) {        int width = view.getWidth();        int heigth  = view.getHeight();        outline.setRoundRect(0+2, 0+2, width - 2, heigth - 2,7);    }}

2.view和ViewOutlineProvider 绑定

view.setOutlineProvider(new MyViewOutlineProvider());

3.设置裁剪是否可用：

 if(eleStudy.getClipToOutline()){//如果已经裁剪可用            eleStudy.setClipToOutline(false);//设置裁剪不可用  }else{            eleStudy.setClipToOutline(true);//设置裁剪可用  }

4.效果图如下：

注意：因为裁剪视图是一个很耗资源的操作，所以当裁剪一个视图时不要添加动画 ,如果非要使用，请使用揭露效果动画。

4.着色（tint)和图像萃取突出颜色（Palette）

内容有点多，放在单独的下一章讲解吧。

5.参考文档

【1】官网-定义阴影与裁剪视图
【2】ANDROID L——Material Design详解（视图和阴影）
【3】android5.0新特性