阴影效果

根据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，只是这个方法设置的是绝对值，这里并不过多介绍。

Android UI-Material Design-阴影效果