创建阴影和裁剪视图

尝试 Compose 方法
Jetpack Compose 是 Android 推荐的 UI 工具包。了解如何在 Compose 中使用主题。

Material Design 为 UI 元素引入了抬升。抬升帮助用户了解每个元素的相对重要性,并将注意力集中到当前任务上。

视图的抬升(由Z 属性表示)决定其阴影的视觉外观。Z 值较高的视图投射出更大、更柔和的阴影,并且它们会遮挡Z 值较低的视图。但是,视图的Z 值不会影响视图的大小。

An image showing how a view elevation produces a shadow.
图 1.Z 轴上的抬升和产生的阴影。

阴影由抬升视图的父级绘制。它们受标准视图剪裁的影响,并且默认情况下会被父级剪裁。

抬升也可用于创建动画,在这些动画中,小部件在执行操作时会暂时升到视图平面上方。

有关更多信息,请参阅 Material Design 中的抬升

为您的视图分配抬升

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

  • 抬升:静态组件
  • 平移:用于动画的动态组件

Z = elevation + translationZ

Z 值以 dp(与密度无关的像素)为单位测量。

An image showing different shadows for different elevations in dp
图 2.不同抬升(以 dp 为单位)的不同阴影。

要设置视图的默认(静止)抬升,请在 XML 布局中使用android:elevation 属性。要在活动的代码中设置视图的抬升,请使用View.setElevation() 方法。

要设置视图的平移,请使用View.setTranslationZ() 方法。

使用ViewPropertyAnimator.z()ViewPropertyAnimator.translationZ() 方法可以为视图的抬升设置动画。有关更多信息,请参阅ViewPropertyAnimator 的 API 参考和 属性动画 开发人员指南。

您还可以使用StateListAnimator 以声明方式指定这些动画。这在状态更改触发动画(例如用户点击按钮时)的情况下尤其有用。有关更多信息,请参阅 使用 StateListAnimator 设置视图状态更改动画

自定义视图阴影和轮廓

视图背景可绘制对象的边界决定其阴影的默认形状。轮廓表示图形对象的外部形状,并定义触摸反馈的波纹区域。

考虑以下视图,该视图使用背景可绘制对象定义

<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() 方法。
  3. 使用View.setOutlineProvider() 方法将新的轮廓提供程序分配给您的视图。

您可以使用Outline 类中的方法创建具有圆角的椭圆形和矩形轮廓。视图的默认轮廓提供程序从视图的背景获取轮廓。要防止视图投射阴影,请将其轮廓提供程序设置为null

剪裁视图

剪裁视图可让您更改视图的形状。您可以剪裁视图以与其他设计元素保持一致,或者响应用户输入更改视图的形状。您可以使用View.setClipToOutline() 方法将视图剪裁到其轮廓区域。仅矩形、圆形和圆角矩形轮廓支持剪裁,这由Outline.canClip() 方法确定。

要将视图剪裁到可绘制对象的形状,请将可绘制对象设置为视图的背景(如前面的示例所示),然后调用View.setClipToOutline() 方法。

剪裁视图是一项代价高昂的操作,因此不要为用于剪裁视图的形状设置动画。要实现此效果,请使用 显示动画