Android Material Design-Defining Shadows and Clipping Views(定义阴影和裁剪视图)-(四)

翻译于 2014-10-28 13:48:43 发布 · 4.7k 阅读

收录于

Android

本文详细介绍了Android Material Design中阴影和高程的概念，包括如何在布局中设置视图控件的高程，自定义视图阴影和轮廓的方法，以及如何裁剪视图以改变其形状。

转载请注明出处：http://blog.csdn.net/bbld_/article/details/40539131

翻译自：http://developer.android.com/training/material/shadows-clipping.html

Material Design引入了深度的UI元素。深入帮助用户了解每个元素的相对重要性，并把注意力集中到手头上正在做的事情。

一个视图(控件)，由Z属性表示的高程(elevation)，决定了它的影子的大小：有更高的Z值得视图就具有更大的阴影。视图仅仅只投下在Z=0平面上的阴影；它们并不投影在在它们下面和上面Z=0平面的其它视图中。

具有较高Z值视图(控件)会挡住较低Z值的视图。但是，一个视图的Z值并不会影响到该视图的大小。

当控件暂时越过平面视图执行某些操作时，高程对创建动画是有用的。

在你的视图(控件)中指定高程(elevation)

一个视图的Z值由两部分组成：高程和转换。高程是静态分量，转换是用于动画的。

Z = elevation +translationZ

图一：具有不同elevation属性值的视图控件的阴影

要在布局中设置视图控件的高程，使用android:elevation属性。要在代码中去设置视图的高程，使用View.setElevation()方法。

要设置一个视图的转换(translation)，使用View.setTranslationZ()方法。

新的ViewPropertyAnimator.z()和ViewPropertyAnimator.translationZ()方法能让你轻松地进行视图高程的更改。欲了解更多的信息，请参阅请参阅ViewPropertyAnimator的API文档和PropertyAnimation(属性动画)的开发者指引。

你也可以使用StateListAnimator以声明方式来指定这些动画。对于当状态改变时触发动画的一些情况，这是特别有用的，比如用户按下了一个按钮。更多的信息，请参阅Animate View State Changes(Defining Custom Animations(自定义动画))。

Z值是像X和Y值那样，在同一个(图形)单位中测量的。

自定义视图阴影和轮廓

一个视图的背景绘制决定了其阴影的默认形状。轮廓表示图形对象的外部形状，并限定了触摸反馈的波纹(ripple)区域。

请看下面的视图(TextView)，定义了背景的图片资源：

<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>

该视图控件蒙上了带有圆角的阴影，因为背景图片资源定义了这个视图的轮廓。提供自定义的轮廓去覆盖视图阴影的默认形状。

在你的代码中自定义视图的轮廓：

1. 继承ViewOutlineProvider类

2. 重写getOutline() getOutline()方法

3. 使用View.setOutlineProvider()方法分配新的轮廓给你的视图

通过Outline类里的方法，你可以创建带圆角的椭圆和矩形形状。视图的默认轮廓提供者(provider)是从视图的背景来获得其轮廓的。为了防止为视图蒙上阴影，设置它的轮廓提供者为空。

裁剪视图

裁剪视图能让你轻松地改变视图的形状。你可以为了一致性而使用其它的设计元素裁剪视图或者为了响应用户的输入改变视图的形状。你可以使用View.setClipToOutline()方法或者使用android:clipToOutline属性来裁剪视图自己的轮廓形状。只有矩形、圆形、圆角矩形的轮廓支持裁剪，这是由Outline.canClip()方法来决定的。

为了裁剪视图得到指定的形状的图像资源，设置视图的背景资源(如上面所示)，并调用View.setClipToOutline方法。

裁剪视图是一个代价较高的操作，所以不要使形状看起来生动而去裁剪视图，实现这样的效果你应该使用Reveal Effect(Defining Custom Animations(自定义动画))动画。

demo比较简单，就上面的两片代码就不贴上来了。