如何在 swift xcode storyboard 中正确使用纵横比？

Question

我整天都在为这件事挠头。 我试图让 iphone 6s 反映 iphone 12 所显示的内容。 我不擅长自动布局，但我只是想要一个正确方向的想法或一点，这样我就可以让它看起来像它的对应物。 感谢所有帮助。

（PS 我正在使用 storyboard 并且从未尝试过以编程方式进行操作。）

感谢所有帮助。

Answer 1

总体思路...

• 使用垂直堆栈视图，其中包含 3“行”的水平堆栈视图
• 每个水平堆栈视图包含两个“平铺” UIView s
• 在所有堆栈视图上设置Alignment: Fill , Distribution: Fill Equally Equally and Spacing: 0
• 给第一个视图（在此图像中，红色视图）一个纵横比约束...从您的图像中，看起来您想要3:2.5
• 将堆栈视图嵌入到“容器”中UIView - 我称之为GridView
• 在所有 4 个面上约束堆栈视图>= 12
• 还约束堆栈视图= 12在所有 4 个边上，但给这些约束Priority: High (750) ...这将导致自动布局将堆栈视图“拉”到边缘，但如果需要允许它更窄
• 然后我们还给堆栈视图中心垂直和水平约束
• 将 GridView 约束为零前导、尾随和底部

这将为您提供 6 个图块，这些图块将根据设备大小保持其纵横比，并且如果需要，它将使垂直堆栈视图居中：

下一步是在每个“平铺”视图中嵌入一个“圆角边框”视图，将其限制在所有 4 个边上的 8 点（或多或少以获得所需的“间距”）：

这是 iPhone 12 和 iPhone 6s 上的结果：

如您所见，标签与横幅和网格视图之间的垂直空间较小，堆栈视图两侧的水平空间稍大。

这是我用于此的 Storyboard 源和 class 文件的链接，因此您可以尝试并检查元素。 我用的刚好够演示。 您可能想要制作一个自定义“平铺”视图 class，其中包含圆角边框视图和 label：

https://gist.github.com/DonMag/8a0b2d85bbbb4262e43d73e745826ee5

Answer 2

如果你想使用故事板来处理这个问题，这就是所有的限制游戏。

有多种方法可以实现此 UI。 您可以使用 UICollectionView 并使用 UICollectionViewCells 在每列中显示 2 个单元格来管理数据，或者您可以使用 UIStackView 轻松管理您的 UI。

如果你想要方形，那么你必须使用 UIScrollView 因为 UI 可以超过屏幕高度。 如果没有，只需将您的视图放入 UIStackView 并让它自己处理一些 UI 约束。