图片和图形

虽然您的应用可以只包含文字和颜色,但您可能希望添加更多视觉元素,例如徽标或插图。Android 针对向应用添加图形制定了特定的最佳实践,并提供了各种库来创建图形效果或添加动画。

Android 资源称为可绘制对象,是一种绘制在屏幕上的资源。这包括但不限于位图、形状和矢量。

创建图片和图形时,请注意以下事项:

  • 避免在素材资源中添加不可更改的文字。
  • 尽可能优先使用矢量格式。
  • 为分辨率分桶提供资源。
  • 在背景图片和文字之间提供足够的遮罩。
  • 虽然 Android 能够实现各种图像效果(如渐变、着色和模糊),但有些效果会消耗更多性能。
  • 带动画的矢量可绘制对象为小型界面动画提供了一种可伸缩的格式。

如何导出 Android 资源

  • 以小写格式设置素材资源名称。
  • 将简单素材资源设置为导出为 SVG。
  • 将照片等复杂图片设置为导出为 WebP、PNG、JPG。
  • 设置正确的分辨率缩放比例,如下表所示。
屏幕尺寸 缩放

mdpi

x1

hdpi

1.5 倍

xhdpi

x2

xxhdpi

x3

xxxhdpi

x4

您也可以选择使用 Android Studio 将 SVG 转换为矢量可绘制对象 (VD)。将资源整理到与交付分辨率对应的目录中,如下图所示。例如,在文件夹名称中包含屏幕尺寸。

有条理的 res 目录
图 2. 整理了 res 目录。

资产类型

Android 支持以下资源类型。

向量

矢量图形是一种无损格式,这意味着它在缩放时不会丢失视觉信息。矢量由填充后可创建图像的数学点组成。

图 3. 左侧图片显示的是由矢量图形贝塞尔点组成的图片,右侧图片显示的是放大的光栅图片。

矢量格式

Android 支持以下矢量图片格式:SVG 和矢量图。

矢量可绘制对象看起来与 SVG 类似,但基于 XML。它们还支持各种属性,例如渐变。如需详细了解支持的功能,请参阅 VectorDrawable。您可以通过 Vector Asset Studio 将 SVG 转换为矢量图。

用例

由于图标尺寸较小,最好使用矢量格式创建。带动画的矢量可绘制对象可用于为图标添加动态效果。

  • 插图是一种图形,可用于引导用户、解释概念或表达想法。它们通常用于表达品牌风格。
  • 主推插画在所有内容中具有高强调度,用于设定整体外观和风格,并说明主要信息。
  • 插图较小,通常采用内嵌方式,用于支持周围的内容。
图 4. 主打插画和内嵌插画。

光栅

有损图形是指在通过压缩或缩放进行处理时会丢失细节的图形,它由像素组成,用于构成图像。光栅图形通常用于详细的图像,例如照片或复杂的渐变。由于这些图片在缩放时会丢失细节,因此请导出多种分辨率的图片。

栅格格式

Android 支持以下栅格图片格式:PNG、GIF、JPG、WebP。

用例

应用场景包括:具有多种纹理的图片,这些图片会产生广泛的调色板和渐变效果;或者具有过于复杂的贝塞尔曲线点集的图片。用例还可以包括非常详细的照片素材资源,例如产品照片、位置详细信息等。

大小

创建素材资源时,请注意以下事项。

解决情况存储分区

应用应根据屏幕密度范围或分桶提供位图图形。操作系统会使用这些分桶自动向相应设备显示正确的图形。通过为每个分桶提供素材资源,确保在每台设备上显示高保真图形。

图片分辨率大小和区段标签示例。
图 5. 派对哈密瓜,并设置各自的密度和比例以供导出。

内边距

图标和类似的小型资源应包含固有的(内置)内边距,以便为资源提供足够的触控目标空间并确保尺寸一致。

图 6. 内置内边距的 24 dp 图标。

文件名

Android 资源采用小写形式,不包含分辨率后缀。

保持一致的命名惯例和结构,以便有条不紊地管理文件和项目。例如,为图标添加“ic_…”前缀有助于整理项目中的所有图标,并帮助在开发过程中快速识别图标。

其他应用素材资源

图 7. 单色启动器图标和启动画面。

应用图标

启动器图标位于主屏幕上。在系统界面中查找单色图标,包括单色通知、状态栏和 widget。

应用图标格式设置为矢量可绘制对象(用于自适应图标)和 PNG(用于旧版图标)。如需详细了解如何创建和预览应用图标,请参阅设计和预览应用图标

启动画面

从 Android 12 开始,您的应用可以在打开时显示包含应用图标的动画启动画面

展示位置

请注意图片应如何在屏幕上缩放和定位。您可以使用 Fit、Crop、FillHeight、FillWidth、FillBounds、InsideNone设置图片的缩放比例

图 8. 裁剪示例。

您还可以将图片剪裁为某种形状,以创建其他效果。

自适应剪裁

如需以自适应方式显示图片,请定义图片在不同断点范围内的剪裁方式。在不同的断点范围内,剪裁可以:

  • 保持一个固定比率。
  • 适应不同的宽高比。
  • 保持固定的图片高度。

保持一个比率

图片尺寸调整可以在不同断点范围内保持一个固定比例。

图 9. 以不同宽高比显示的图片。

适应不同的宽高比

图片比例可以根据不同的断点范围进行调整。例如,在图 9 中,图片比例在断点之间从 1:1 变为 16:9。

固定图片高度

图片尺寸调整可以在不同断点范围之间以及在断点范围内保持固定高度和自适应宽度。图片保持固定高度,而宽度在断点之间是可变的。

效果

Android 包含各种内置图片效果。以下是一些常见效果:

梯度

在 Compose 中,使用 Brush 在屏幕上绘制内容。您可以使用不同的画笔绘制不同颜色或渐变的形状。使用内置的渐变笔刷来实现不同的渐变效果。借助这些 Brush,您可以指定颜色列表,以使用这些颜色创建渐变。

渐变画笔可以通过添加颜色停止点和平铺来实现更高级的渐变,前提是您提供颜色列表以及停止点出现的百分比。使用容器或形状裁剪渐变、纯色填充或图片。

图 10. 使用 Compose 修饰符转换 Figma 中的渐变。

模糊处理

使用 Modifier.blur() 方法并提供模糊比率,将模糊效果应用于图片。请谨慎使用模糊效果,因为它们可能会影响性能,并且仅适用于搭载 Android 12 及更高版本的设备。如需了解详情,请参阅模糊图片可组合项

混合模式

Android 能够通过您在设计软件中可能看到的类似布尔运算和混合模式(例如并集或相乘)来修改图片。如需了解详情,请参阅 BlendMode

色调

使用混合模式和填充为素材资源着色。这样一来,您只需一个素材资源,即可为其应用不同的颜色,从而减少生成的素材资源数量。

图 11. 具有不同色调的素材资源,用于补充内容颜色或指示不同状态。

动作

您可以以编程方式为图形添加动画效果,从而创建动态图形,而无需上传动态文件。这样可以提高灵活性,并减少资源资产。

借助动画矢量可绘制对象,您可以创建小型界面动画。否则,请详细了解如何在 Compose 中使用关键帧制作动画。如需详细了解图片效果,请参阅自定义图片