如何使用自动布局调整故事板的图像大小？

Question

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

Answer 1

故事板，特别是在自动布局模式下，不期望任何尺寸 - 尺寸将取决于设备屏幕（实际上）或模拟指标（在Xcode中的Interface Builder中）。

重要的是宽高比和三个资源文件的存在（三种尺寸 - 常规，2x和3x）。

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

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

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

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