47、iOS 8 人机交互指南 - 创建尺寸可调的图片

2019-07-03

目录

创建尺寸可调的图片来为不同标准的 UI 元素定制背景,如弹出框、按钮、导航栏、标签栏及工具栏(包含这些栏中的项目),可调整尺寸的图片会使这些元素有更好的呈现效果。

对于许多 UI 元素来说,你也可以使用特定的 end caps 来替代背景。“end cap” 定义了一张图片中不允许调整尺寸的区域,例如,对于一个按钮,你可以创建一张在四个角落分别带有四个 end caps 的可调图片,当这张图片作为按钮的背景填充时,它会被重新校验尺寸,但由 end caps 定义的区域会保持不变。

基于你所提供的尺寸可调的图片,iOS 会拉伸或平铺图片来填充一个 UI 元素的背景区域。拉伸图片意味着把这个图片放大,同时忽视了这张图片的初始比例。拉伸是可行的,但往往会将一张多像素的图片扭曲,得到不好的效果。平铺意味着将原始图片不断重复排列打到填充目标区域的效果,平铺的效果不如拉伸好,但只能通过平铺来实现一些纹理图案效果。

通常来说,你需要提供提供一张图片的最小版本(包含 end caps)来测试你想要的效果,例如:

  • 如果你想要得到无梯度的纯色,创建一个 1 x 1 点的图片。
  • 如果你想要得到有垂直梯度变化的图片,创建一张高度刚好适应 UI 元素的背景,宽为 1 点的图片。
  • 如果你想要得到重复的纹理效果,创建一张与纹理重复的方向匹配的图片。
  • 如果你想要得到不重复的纹理效果,创建一张静态的纹理方向刚好适应与 UI 元素背景的图片。