使用自动布局为 iphone 4s 到 iPhone 6s plus 开发 UI

Question

我正在开发一个应用程序，它应该与从 iphone4s 到 iphone6s plus（以及 iOS8 及更高版本）的所有 iphone 设备兼容。我是一个新手，开始根据设计师的一些设计来开发 UI。

1) 当我开发屏幕时，我在尺寸类中使用 wAny 和 hAny 以及来自“Simulated Metrics 的“Inferred” " - 这是正确的吗？

2) 在一个屏幕中，我有 4 个图像，一个在另一个之下，并且我为每个图像 (imageView) 添加了约束，以保持每个设备的间距一致性。

一个。这样做，底部的第四张图片在 iphone4s 模拟器上根本不可见，因为它是 3.5"。第三张图片在其底部被裁剪。

b.当我在iphone 6s plus上模拟时，屏幕底部有很多空白区域。

如何调整图像以使其看起来不失真，但可以根据我正在渲染的设备自动调整大小？

我尝试了什么：-

1. 为每个图像使用了顶部、左侧、右侧和底部的约束。
2. 为每张图片使用了Aspect Fit。 （读到可以自动调整图像大小的地方）- 这种方法不起作用
3. 使用 Equal Widths to SuperView 并将 Multiplier 指定为 0.5。 - 这也失败了

是否有任何我可以使用的响应式 UI 框架，例如 Bootstrap for Web？

Answer 1

尽管这最好由 UIStackView（iOS 9 及更高版本）甚至可能是 UITableView 处理，但仅使用约束也很容易实现。这是我做到的一种方法：

1. 对父视图的 4 个视图中的每一个设置比例高度约束，为 0.2 的倍数

2. 相对于 4 个视图中的每一个的超级视图约束设置“水平居中”

3. 为 4 个视图中的每一个设置一个纵横比（我使用了 1.6 : 1 的比例）

4. 现在，在每个视图的底部和父视图的底部（不是父视图边距）之间设置比例约束。因为视图高度加起来是父视图高度的 0.8，所以它们之间的间距应该是父视图高度的 0.2。

   因为总共有五个空格（一个到顶部，一个到底部，四个视图之间三个），每个空格应该是父视图高度的 0.04（0.2 / 5 = 0.04）。所以顶视图的底部应该是它的高度，加上相对于父视图的一个间距，或者是父视图底部边缘的 0.24。第二个视图的底部应该添加另一个空间和它自己的高度，即父视图底部边缘的 0.48 等。

因此，从上到下的每个视图的超级视图约束的底边到底边应该具有以下倍数：0.24、0.48。 0.72，0.96。

这为您提供相等的高度和相等的间距，加上一致的纵横比，所有这些都可以适应各种屏幕尺寸。以下是您定位的所有三种手机尺寸的此布局预览的屏幕截图：

最后，这是我为此解决方案创建的项目的链接，因此您可以更详细地查看约束：

http://d.pr/f/17Ae7

Answer 2

所有你需要做的就是给第一个UIImageView一个固定的宽度和高度（如果它是正方形，则等于宽度和高度）尝试纵横比，然后相对于第一个和第三个相对以此类推。

Answer 3

最简单的方法是使用 UIStackView。您可以在情节提要中创建具有特定最小间距的垂直堆栈视图，然后添加要显示的所有四个视图。您只需在堆栈视图本身上设置约束。所有内部约束都将由堆栈视图响应地正确创建或修改。

这是一个很好的介绍：

https://developer.apple.com/videos/play/wwdc2015/218/