如何使用自动布局调整情节提要的图像大小？

Posted 2023-02-26

【中文标题】如何使用自动布局调整情节提要的图像大小？

【英文标题】：How to size images for storyboard using auto layout?

【发布时间】：2015-03-17 22:20:38

【问题描述】：

我正在使用 Sketch 创建将在我的 Xcode 6 自动布局故事板中使用的图像。但是我无法获得正确的图像尺寸。它们总是显得太大并溢出故事板视图控制器。 Xcode 中有没有办法查看故事板期望的尺寸？有没有一种系统的方法来做到这一点...而不是反复试验？

【参考方案1】：

Storyboard，尤其是在自动布局模式下，不需要任何尺寸 - 尺寸将取决于设备屏幕（实际上）或模拟指标（在 Xcode 的 Interface Builder 中）。

重要的是纵横比和三个资源文件的存在（三种大小 - 常规、2x 和 3x）。

您可以在此处查看维度列表： http://www.paintcodeapp.com/news/iphone-6-screens-demystified

因此，假设您要插入一个占据整个屏幕宽度的图像，并自动选择高度以保持纵横比。你可以做什么：

在 Sketch 中创建宽度为 320、750 和 1242 像素的图像。将它们保存为 image.png、[e-mail]、[e-mail]。 在 Interface Builder (Storyboard) 中插入图像，添加宽度约束 - 与超级视图相等，而不是高度约束 - 保持纵横比。 如果图像看起来太大，Interface Builder 会抱怨预览图像与约束不匹配，您会看到一个黄色的小箭头。单击它，选择警告并再次单击 - Xcode 将提供“更新框架”。如有必要，这将正确调整图像大小。不要忘记为您的图片选择正确的缩放模式（Aspect fit？）。

此外，您可以在 Metrics 选项卡中查看模拟屏幕的当前宽度和高度。但每次您更改预览（模拟）设备类型时，这些都会改变。

【讨论】：

很棒的答案。谢谢！