Skip to content

Instantly share code, notes, and snippets.

@johnbear724
Last active August 29, 2015 14:08
Show Gist options
  • Save johnbear724/b1c323c782887e29defe to your computer and use it in GitHub Desktop.
Save johnbear724/b1c323c782887e29defe to your computer and use it in GitHub Desktop.
定义阴影和裁剪视图

该文档翻译自 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)的轮廓。

可以提供一个自定义的轮廓来覆盖默认的视图阴影形状。 要在你的代码中为一个视图自定义轮廓:

  1. 继承 ViewOutlineProvider 类。
  2. 覆盖 getOutline() 方法。
  3. 使用 View.setOutlineProvider() 方法为你的视图分配新的轮廓供应器(outline provider)。

你可以使用 Outline 类中的方法创建椭圆或有圆角的矩形轮廓。视图的默认轮廓供应器会(Outline Provider)从视图的背景中获取轮廓。要阻止试图投射阴影,可以将它的轮廓供应器设置为null。

##裁剪视图

裁剪视图能够让你轻松改变视图的形状。你可以为了提供与其它设计元素的一致性而剪切视图,或是在响应用户输入时改变视图的形状。你可以使用 View.setClipToOutline() 方法或 android:clipToOutline 属性来将一个视图裁剪到它轮廓大小的范围。只有矩形,圆形和圆角矩形轮廓支持裁剪,可通过 Outline.canClip() 方法来确认是否可裁剪。

要将一个视图裁剪为一个 drawable 的形状,需要将该 drawable 设置为视图的背景(就像上面演示的那样),并调用 View.setClipToOutline() 方法。

裁剪视图是一个高消耗的操作,所以不要使用剪切一个视图的方式来动态改变形状。要实现这种效果,使用 显露效果(Reveal Effect) 动画。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment