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

转载请注明出处：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以声明方式来指定这些动画。

对于当状态改变时触发动画的一些情况，这是特别实用的，比方用户按下了一个button。

很多其它的信息，请參阅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比較简单，就上面的两片代码就不贴上来了。