如何在 swift xcode 故事板中正确使用纵横比？

Posted 2023-03-29

【中文标题】如何在 swift xcode 故事板中正确使用纵横比？

【英文标题】：How to correctly use aspect ratio in swift xcode storyboard?

【发布时间】：2021-08-14 14:53:13

【问题描述】：

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

（PS 我正在使用情节提要，从未尝试过以编程方式进行。）

感谢所有帮助。

【问题讨论】：

这 6 个 UI 元素是什么？

我认为这与自动布局无关。您可以使用 UICollectionView 排列此视图并设置其间距和单元格大小

首先，您要完全六个“图块”吗？或者你会有一个不同的数字？如果有所不同，您可能希望使用集合视图并在有太多无法容纳时允许滚动。如果您总是有六个，那么您需要决定您希望它在较小的屏幕/设备上的显示方式......比如这样？ i.stack.imgur.com/gOszJ.png

@DonMag 我确实需要六个，当我在 iphone 6 屏幕上运行它时，它看起来只是糊状。我如何使用它，iiphone 6s 反映了 iphone 12。我应该使用它的纵横比吗？

@Kamanda - 你想让它看起来像我发布的图片吗？

【参考方案1】：

总体思路...

使用包含 3“行”水平堆栈视图的垂直堆栈视图 每个水平堆栈视图包含两个“平铺”UIViews 在所有堆栈视图上设置Alignment: Fill、Distribution: Fill Equally 和Spacing: 0 给第一个视图（在这个图像中，红色视图）一个纵横比约束......从你的图像，看起来你想要3:2.5 将堆栈视图嵌入“容器”UIView - 我称之为GridView 在所有 4 个边上约束堆栈视图 >= 12

也

在所有 4 个边上约束堆栈视图 = 12，但给这些约束 Priority: High (750) ...这将导致自动布局将堆栈视图“拉”到边缘，但允许它必要时变窄 然后我们

还

给堆栈视图中心垂直和水平约束 将 GridView 约束为零前导、尾随和底部

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

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

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

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

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

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

【讨论】：

非常感谢。完美解释，我学到了很棒的东西！感谢您的宝贵时间！

【参考方案2】：

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

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

如果您想要方形，则必须使用 UIScrollView，因为 UI 可能会超过屏幕高度。如果没有，只需将视图放在 UIStackView 中，让它自己处理一些 UI 约束。