Material Design中的Elevation和shadows

参考：

https://developer.android.com/training/material/shadows-clipping.html#Shadows

https://material.google.com/material-design/elevation-shadows.html#

1、简介

在Material Design主题当中给UI元素引入了高度的概念，呈现出了立体的效果，如下所示：

视图的高度由属性Z来表示，决定了阴影的视觉效果，Z越大，阴影就越大且越柔和。但是Z值并不会影响视图的大小。

我们还可以使用高度来创建动画，比如当点击按钮的时候让其高度增加，达到交互的效果。

2、给视图设置高度

视图的Z值由两个分量表示：

1、Elevation：静态的分量

2、Translation：用于动画的动态的分量

Z值的计算公式为：

Z=elevation+translationZ

1、通过在xml布局文件当中给一个视图设置android:elevation属性，来设置视图的高度。当然我们也可以在代码当中使用

View.setElevation()来给视图设置高度。

2、还可以在代码当中设置视图的translationZ分量:View.setTranslationZ()。

3、新的ViewPropertyAnimator.z()以及ViewPropertyAnimator.translationZ()方法能够很容易的改变视图的高度。关于这个动画的更多信息，参考ViewPropertyAnimator以及PropertyAnimation相关的API。

4、还可以给视图设置Android:StateListAnimator属性来设置视图的状态改变动画，比如当点击按钮的时候改变其translationZ分量的值。

关于Material design中的动画，由于比较复杂，之后的博客再讲。

对了，Z值的单位是dp。

3、自定义视图的阴影和轮廓

视图背景的边界决定了阴影的阴影的默认形状。轮廓则代表一个图形对象的外围边界以及触摸反馈的水波纹扩散的区域。

我们可以定义一个背景drawable，把背景设置为一个圆角矩形，填充颜色：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="20dp" />
</shape>

然后在布局文件当中引用：

<TextView
        android:id="@+id/tv_demo4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_demo3"
        android:layout_marginTop="20dp"
        android:elevation="10dp"
        android:background="@drawable/myrect"
        android:text="Elevation 10dp Customize View Shadows"
        android:textSize="30sp" />

这样我们就可以通过自定义的轮廓来产生不同的阴影效果。

4、效果

首先是布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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.easyliu.elevationandshadows.MainActivity">

    <TextView
        android:id="@+id/tv_demo1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="20dp"
        android:text="Elevation 20dp"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/tv_demo2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_demo1"
        android:layout_marginTop="20dp"
        android:elevation="10dp"
        android:text="Elevation 10dp"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/tv_demo3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_demo2"
        android:layout_marginTop="20dp"
        android:elevation="2dp"
        android:text="Elevation 2dp"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/tv_demo4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_demo3"
        android:layout_marginTop="20dp"
        android:elevation="10dp"
        android:background="@drawable/myrect"
        android:text="Elevation 10dp Customize View Shadows"
        android:textSize="30sp" />

</RelativeLayout>

效果如下所示：

5、Material design当中Elevation和Shadows规范

在material design设计规范当中，给一些常用的控件都提供了Elevation设计规范，如下所示，基本上我们按照这个规范来，就能得到比较好的视觉效果。