Android UI-Material Design-阴影效果

阴影效果

根据Material Design 的官方介绍，如下网址，在设计的时候我们可以通过设置Z轴的高度的阴影效果来模拟比较真实的控件效果。
http://www.google.com/design/spec/material-design/
http://wiki.jikexueyuan.com/project/material-design/

Material 环境是一个三维的空间，这意味着每个对象都有 x ， y ， z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。 在网页上，z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。

image.png

其实在android5.0以后，官方已经给我们提供了设置高度的方式。跟其他的属性差不多，一共有两种设置方式。第一种是在XML文件中设置。另外一种是在代码中设置。

在XML中设置

在XML设置的是elevation属性，设置的值越大，说明离屏幕底层的距离越大。

然后直接看页面效果，可以发现，elevation越大，阴影效果越明显。

image.png

在代码中设置

在代码中设置非常简单，只要setElevation即可。

ztranslate_view_1.setElevation((int) Util.dp2px(this, 15.0f));

与TranslationZ的区别

首先呢，我们看下在XML中设置这个属性后会有什么区别。给第三个View设置这个属性。设置为与elevation相反的大小。

从视图中可以发现，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，只是这个方法设置的是绝对值，这里并不过多介绍。