什么是 imageset?

Xcode 的 imageset 是一个有名称的资源目录,里面包含图像文件和一个描述文件 Contents.json。它放在 Assets.xcassets 资源目录中。应用通过资源名称来使用它,而资源目录则说明每种倍数或表现形式由哪个文件提供。

iOS 图像资源导出工具会根据你上传的图稿或已解锁的结果,生成这样的文件夹结构。它可以打包简单的矢量 SVG,也可以渲染出透明的 PNG 版本。只是把照片放进资源目录,并不会让它变成矢量路径。

简单、需要缩放的图稿:选矢量

源文件是由纯色路径和简单形状构成的 SVG 时,请选择“矢量 SVG”。导出工具会拼合受支持的几何图形,并写出一个开启了 Preserve Vector Data 的 imageset。SVG 图像资源需要 iOS 13 或更高版本。

转换器有意只支持有限的矢量子集。文字需要先转为轮廓;渐变、遮罩、裁剪路径和其他特效,在这个工具中需要输出为 PNG。不受支持的功能会报错,方便你选择合适的替代方案。任何不安全的内容(例如脚本)都会被移除并列出;导入文件之前,请先阅读所有警告。

矢量文件能保留可缩放的几何图形,但并不会自动让设计变得更好。一个由成千上万个小形状组成、过于复杂的描摹结果,可能还不如一张干净的位图好用。请在界面实际使用的尺寸下检查图像,尤其是有细描边或小字的地方。

固定尺寸的图像资源:选 PNG

PNG 版本可以使用 SVG、PNG、JPEG、WebP 和 HEIC 作为源文件。SVG 会被渲染成 PNG;上传的 PNG、JPEG、WebP 或 HEIC 会被去除元数据。透明度会保留。当兼容的渲染效果比可编辑的几何图形更重要时,这种方式就很有用。

宽度设置以 point 为单位,而不是最终的像素数。宽度设为 64 point 时,导出工具会生成以下文件:

倍数 宽度(像素) 文件名
1× 64 artwork@1x.png
2× 128 artwork@2x.png
3× 192 artwork@3x.png

高度按原图的宽高比计算。高度是宽度两倍的源图,在 1× 下会生成 64 × 128 像素的图像。如果较高的源图会超出导出的高度上限,请选择更小的 point 宽度。宽度设置不会改变矢量 imageset 的尺寸,它会保留自己的 viewBox。

导入时不要替换整个资源目录

解压下载的文件,找到 Assets.xcassets/artwork.imageset,或以你选择的资源名称命名的对应目录。把这个 imageset 拖进你现有的资源目录中。不要替换整个资源目录:里面可能有你的应用已经在用的颜色、图标和其他资源。

在 SwiftUI 中,名为 artwork 的资源可以用 Image("artwork") 引用。布局和缩放方式请在应用中按界面需要设置。请在 Xcode 和真机上检查导入的资源,包括透明边缘在亮色和暗色背景上的效果。

imageset 不是 SF Symbol,也不具备那种符号格式的制作特性。它同样与应用的启动器图标无关。需要 AppIcon 资源目录时,请使用 Android 和 iOS 应用图标生成器;需要 Android 界面用的 drawable 时,请使用 Android VectorDrawable 转换器。