阴影效果
根据Material Design 的官方介绍，如下网址，在设计的时候我们可以通过设置Z轴的高度的阴影效果来模拟比较真实的控件效果。
<a>http://www.google.com/design/spec/material-design/</a>
<a>http://wiki.jikexueyuan.com/project/material-design/</a>
Material 环境是一个三维的空间，这意味着每个对象都有 x ， y ， z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。 在网页上，z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。
image.png
其实在android5.0以后，官方已经给我们提供了设置高度的方式。跟其他的属性差不多，一共有两种设置方式。第一种是在XML文件中设置。另外一种是在代码中设置。
在XML中设置
在XML设置的是elevation属性，设置的值越大，说明离屏幕底层的距离越大。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_ztranslate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.twinsnan.materialdesigndemo.ZTranslateActivity">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:elevation="5dp"
android:layout_margin="10dp"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:elevation="10dp"
android:layout_margin="10dp"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:elevation="15dp"
android:layout_margin="10dp"/>
</LinearLayout>
然后直接看页面效果，可以发现，elevation越大，阴影效果越明显。
image.png
在代码中设置
在代码中设置非常简单，只要setElevation即可。
ztranslate_view_1.setElevation((int) Util.dp2px(this, 15.0f));
与TranslationZ的区别
首先呢，我们看下在XML中设置这个属性后会有什么区别。给第三个View设置这个属性。设置为与elevation相反的大小。
<View
android:id="@+id/ztranslate_view_3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:background="@color/colorAccent"
android:elevation="15dp"
android:translationZ="-15dp"/>
从视图中可以发现，evaluation的效果完全被抵消了。
image.png
所以猜想，evaluation属性的行为应该和mLeft、mTop等的位置属性差不多，而TranslationZ和TranslationX的行为差不多。
设置动画
可以给控件设置动画
ztranslate_view_1.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
int acton = event.getAction();
switch (acton) {
case MotionEvent.ACTION_DOWN:
v.animate().translationZBy((int) Util.dp2px(ZTranslateActivity.this, 5.0f));
break;
case MotionEvent.ACTION_UP:
v.animate().translationZBy(-(int) Util.dp2px(ZTranslateActivity.this, 5.0f));
break;
}
return true;
}
});
效果如下：
1.gif
另外，也可以使用translationZ，只是这个方法设置的是绝对值，这里并不过多介绍。
