我如何在 Xcode 的 Interface Builder 中使用约束/自动布局来正确缩放图像和字体？

Question

我正在尝试在 Xcode 的 Interface Builder 中创建一个用户界面，这样：

1. 它根据设备变化的宽度缩放视图（纵横比缩放）
2. 图像按纵横比缩放（无拉伸或压扁图像）
3. 字体线性缩放
4. 如果某物在一个设计中水平居中，它应该在所有设计中居中

简单的目标，我想......我之前已经使用自定义代码以编程方式完成了所有这些，但我宁愿这样做 "right way" 并在 Interface Builder 中正确设计它并让它处理所有为我布局。

假设我在 Interface Builder 中设计了一个小尺寸屏幕 iPhone，如下所示：

现在说一下我对 iPhone 4s 设备的这种外观和感觉感到满意，并且只想按比例放大所有内容以适应更新、更大的 iPhone 外形尺寸。

如果我要使用旧的 "springs and struts" 方法，这个 几乎 给了我我想要的更大尺寸的东西......除了一切都延伸高度 -明智的（不仅仅是基于原始设计的宽度与高度的纵横比。）你会特别注意到 "logo image" 被拉得太高了。字体也没有在标签或按钮上放大。

我也尝试过使用 "constraints"，特别是只是解决了按比例缩放图像的问题，基于容器的纵横比，但我没有任何运气。

在这里我将弹簧和struts重置为默认值，并对原始设计的徽标图像添加约束：

看着更大的外形，实际上什么都没有改变：

（是的，尽管报告了布局错误，"fixing" 它们在任何方面都对图像中的缩放/缺乏缩放没有实际影响。）

那么重申一下——我如何使用 Xcode / Interface Builder 约束执行以下操作？

1. 它根据设备变化的宽度缩放视图（纵横比缩放）
2. 图像按纵横比缩放（无拉伸或压扁图像）
3. 字体线性缩放
4. 如果某物在一个设计中水平居中，它应该在所有设计中居中

提前致谢。

Answer 1

1. 它根据设备变化的宽度缩放视图（纵横比缩放）
2. 图像按纵横比缩放（无拉伸或压扁图像）

你可以做的是使用宽高比来制作宽度和高度。

我已经为 superview 添加了乘数

3. 字体线性缩放

我设置了这样的标签

从属性检查器我设置如下：

4. 如果某物在一个设计中水平居中，它应该在所有设计中居中

所有视图均居中对齐。