该文档翻译自 Android 5.0 文档中对 Material Design 的介绍,原文地址:http://developer.android.com/training/material/shadows-clipping.html
Material Design 对 UI 元素提出了深度(depth)的概念。深度(depth)可以帮助用户理解每个元素的主次关系,以及使用户的注意力集中在手头的任务上。
视图的高度(elevation),也代表了视图的 Z 方向上的属性,决定了阴影的大小:Z 值越大的视图会投射越大的阴影。视图只会在 Z = 0 的平面上投射阴影;不会在比他们低的视图或比 Z = 0 平面高的视图上投射阴影。
Z 值更高的视图会遮挡 Z 值更低的视图。但无论怎样,视图的 Z 值都不会影响视图的大小。
高度(elevation)属性也常用于创建动画,如在执行一些行动时组件暂时从视图平面升起的动画。
##为你的视图设置高度(elevation)
视图的 Z 值由两部分组成,高度(elevation)和变换(translation)。高度(elevation)是静态部分,变换(translation)用于动画:
Z = elevation + translationZ
图例1:阴影和不同的视图高度。
要在布局定义中设置一个视图的高度(elevation),使用 android:elevation 属性。要在一个 Activity 代码中设置一个视图的高度(elevation),使用 View.setElevation() 方法。
要设置视图的变换(translation),使用 View.setTranslationZ() 方法。
新的 ViewPropertyAnimator.z() 和 ViewPropertyAnimator.translationZ() 方法能够让你轻松的对视图的高度(elevation)制作动画。更多信息,请查看 API 文档 ViewPropertyAnimator 和开发指南 Property Animation。
你还可以使用 StateListAnimator 用声明的方式指定这些动画。这特别适用于状态改变触发动画的情况,如在用户按下按钮时。更多信息,请查看 Animate View State Changes 。
Z 值的度量单位与 X 值与 Y 值相同。
##自定义视图阴影和轮廓(outlines)
视图(view)背景图像的边界,决定了它的阴影的默认形状。轮廓代表了图形对象的外形,并定义了触摸反馈生成的波纹范围。 根据视图的需求来定义背景图像:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
背景图像定义为一个有圆角的矩形:
<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
该视图(View)会投影一个圆角阴影,并由背景图像定义视图(View)的轮廓。
可以提供一个自定义的轮廓来覆盖默认的视图阴影形状。 要在你的代码中为一个视图自定义轮廓:
- 继承 ViewOutlineProvider 类。
- 覆盖 getOutline() 方法。
- 使用 View.setOutlineProvider() 方法为你的视图分配新的轮廓供应器(outline provider)。
你可以使用 Outline 类中的方法创建椭圆或有圆角的矩形轮廓。视图的默认轮廓供应器会(Outline Provider)从视图的背景中获取轮廓。要阻止试图投射阴影,可以将它的轮廓供应器设置为null。
##裁剪视图
裁剪视图能够让你轻松改变视图的形状。你可以为了提供与其它设计元素的一致性而剪切视图,或是在响应用户输入时改变视图的形状。你可以使用 View.setClipToOutline() 方法或 android:clipToOutline 属性来将一个视图裁剪到它轮廓大小的范围。只有矩形,圆形和圆角矩形轮廓支持裁剪,可通过 Outline.canClip() 方法来确认是否可裁剪。
要将一个视图裁剪为一个 drawable 的形状,需要将该 drawable 设置为视图的背景(就像上面演示的那样),并调用 View.setClipToOutline() 方法。
裁剪视图是一个高消耗的操作,所以不要使用剪切一个视图的方式来动态改变形状。要实现这种效果,使用 显露效果(Reveal Effect) 动画。