定义Shadows与Clipping视图

编写: allenlsy - 原文: https://developer.android.com/training/material/shadows-clipping.html

Material Design 引入了UI元素深度的概念。深度可以帮助用户理解每个元素的不同重要性，让用户集中注意力做手头的工作。

视图的elevation，用 Z 属性来表示，它决定了阴影的大小：更大的 Z 值可以投射出更大更柔软的阴影。Z 值较大的视图会遮盖住Z值较小的视图。不过，Z值大小不会影响视图的大小。

阴影是由被投射视图的上级视图来完成绘制，因此他受上级视图影响，附着在上级视图上。

Elevation对于创建临时上升这种动画同样很有用。

更多信息，请参见3D空间中的对象。

给视图赋Elevation值

视图的 Z 值有两个组成部分：

  • elevation: 静态组成部分
  • translation: 动态部分，用于动画

Z = elevation + translationZ

定义Shadows与Clipping视图 - 图1

图1 - 不同深度view的阴影.

在layout中设置视图的elevation，要使用android:elevation属性。要在Activity代码中设置elevation，使用View.setElevation()方法。

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

新的ViewPropertyAnimator.z() 和 ViewPropertyAnimator.translationZ() 方法使你可以很容易的实现elevation动画。更多信息，请查看ViewPropertyAnimator和属性动画开发指南。

你也可以使用 StateListAnimator 来声明动画。这非常适用于要通过状态改变来触发动画的情况，比如当用户按下按钮。更多信息，请查看Animate View State Changes（当视图状态变化的动画，译者注）。

Z值的计算单位是dp。

自定义视图的阴影和轮廓

视图背景的边界决定了阴影的形状。轮廓是一个图形对象的外围形状，决定了触摸反馈动画的ripple区域。

假设以下是个视图：

  1. <TextView
  2.     android:id="@+id/myview"
  3.     ...
  4.     android:elevation="2dp"
  5.     android:background="@drawable/myrect" />

背景drawable定义为一个圆角的矩形：

  1. <!-- res/drawable/myrect.xml -->
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3.        android:shape="rectangle">
  4.     <solid android:color="#42000000" />
  5.     <corners android:radius="5dp" />
  6. </shape>

这个视图会投影出圆角，因为背景drawble可以决定视图轮廓。如果提供一个自定义的轮廓，会覆盖这个默认的阴影形状。

以下方式可以自定义视图的轮廓：

  1. 继承 ViewOutlineProvider 类
  2. 覆写 getOutline() 函数.
  3. 用 View.setOutlineProvider() 方法来设定视图的轮廓提供者.

使用Outline类的函数，你可以创建椭圆和带圆角的矩形轮廓。视图的轮廓提供者会从视图的背景中获取轮廓。如果不想让视图投射阴影，你可以设置轮廓提供者为 null。

Clipping 视图

Clipping 视图（附着视图，译者注）使你轻松的改变视图的形状。你可以为了一致性而附着视图，也可以是为了当用户输入信息时，改变视图的形状。你可以通过View.setClipToOutline() 将视图附着给一个轮廓，或使用android:clipToOutline属性。只有矩形、圆形和圆角矩形轮廓支持附着功能，你可以通过Outlin.canClip()方法来检查是否支持附着。

把视图附着给drawable的形状，要将这个drawable设置为视图的背景，并调用View.setClipToOutline() 方法。

附着视图是一个昂贵的操作，所以不要对附着过的形状是进行动画。要实现这个效果，使用 Reveal Effect 动画