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

Question

我正在尝试在Xcode的Interface Builder中创建用户界面，例如：

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

我认为简单的目标……我以前已经使用自定义代码以编程方式完成了所有这些工作，但是我宁愿以“正确的方式”做到这一点，并在Interface Builder中正确设计它，并让它为我处理所有布局。

假设我在Interface Builder中为这样的小型iPhone设计了一个屏幕：

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

如果我要使用较旧的“弹簧和支柱”方法，那么这几乎可以在更大的外形尺寸下满足我的要求……除了所有内容都沿高度方向拉伸（不只是基于原始设计的宽高比）。 ）您会特别注意到“徽标图像”拉伸得太高。 而且字体也不会在标签或按钮上按比例放大。

我还尝试过使用“约束”，特别是仅按比例处理图像缩放问题，并基于容器的纵横比进行处理，而没有任何运气。

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

从更大的尺寸来看，实际上没有任何变化：

（是的，尽管报告了布局错误，但是以任何方式“修复”它们都不会对图像的缩放/缺乏缩放产生实际影响。）

因此，只需重申一下-如何使用Xcode / Interface Builder约束执行以下操作？

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

提前致谢。

Answer 1

1. 它根据设备宽度变化来缩放视图（方面缩放）
2. 图像按宽高比缩放（没有拉伸或压缩的图像）

您可以使用宽高比设置宽度和高度。

我为Superview添加了一个乘数方面

3. 字体线性缩放

我已经设置了这样的标签。

从属性检查器，我这样设置：

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

所有视图均居中对齐。