基于屏幕尺寸的 UI 元素间距

Posted 2023-03-22

【中文标题】基于屏幕尺寸的 UI 元素间距

【英文标题】：Spacing of UI Elements based on Screen Size

【发布时间】：2018-06-15 00:22:27

【问题描述】：

我的应用程序的初始屏幕提示用户输入他们的日程安排，我已经实施了限制，但是在 iPhone SE 这样的小屏幕尺寸上，文本字段和开关相距太远，因此上面的标签减少，整行（文本字段+开关）被切断。在 iPhone 8 plus 等屏幕尺寸较大的设备上，它们的空间位于底部。如何根据设备的屏幕大小更改行间距以确保所有 UI 元素都正确显示？从本质上讲，我希望每款手机都能显示类似于 iPhone 8 的东西，它们的显示屏底部有一小块空间。

iPhone 8 加号

iPhone 8

iPhone SE **

【问题讨论】：

你试过给 UILabel 一个高度限制吗？另外，对于这样的事情，我建议您使用 UITableView developer.apple.com/documentation/uikit/uitableview?changes=_6

哦，这很奇怪。那么“时期2”的高度不应该等于“时期3”的高度吗？你能把两者的高度都记录下来吗？还是将标签的背景颜色设为蓝色？

将您的 uiview 添加到 scrollView 将在底部没有剩余空间时为您提供所需的空间。并从上到下给予你的约束将解决这个问题。

更改 UI 元素的间距不是好的解决方案。如果你改变间距，你应该改变元素的高度 -> 太复杂 尝试在 UIScrollview 中嵌入所有元素。

@Lontronix 最好在UIView 中实现每个计划，因此对于每个计划的一个视图，每个计划都需要跟踪正在发生的事情，而不是在主要constraint 中添加constraint，但这是一种错误的方法当您有超过 2 或 3 次相似的视图时，请根据您的设计始终选择 UITableView 或 CollectionView。

【参考方案1】：

您可以通过多种方式实现这一目标。我的第一个念头是…… 将期间标签、文本字段和开关分组或嵌入到 UIView 中。

对所有 8 个周期执行此操作。然后将这 8 个 UIView 插入 UIStackView - 垂直等间距。现在使用标准的前导和尾随空格向 UIStackview 添加约束，从顶部添加标准边距，从底部添加定义的边距。这将在所有屏幕尺寸上为您提供相似的外观。