如何让两个 UILabel 并排出现？答案

【问题标题】：How can I make two UILabels appear side by side?如何让两个 UILabel 并排出现？
【发布时间】：2023-03-31 21:25:01
【问题描述】：

我有两个 UILabel ：

            let wordLabel               = UILabel(frame: CGRectMake(0,0,(self.view.frame.width - 30) / 2,0))
            wordLabel.text              = word.valueForKey("sanskrit") as? Stringsize: 16)
            wordLabel.numberOfLines     = 0
            wordLabel.sizeToFit()
            wordLabel.translatesAutoresizingMaskIntoConstraints = false

            let englishWordLabel           = UILabel(frame: CGRectMake(wordLabel.frame.width + 10,0,labelWidth,0))
            englishWordLabel.text          = word.valueForKey("english") as? Stringsize: 16)
            englishWordLabel.numberOfLines = 0
            englishWordLabel.sizeToFit()
            englishWordLabel.lineBreakMode = .ByWordWrapping
            englishWordLabel.translatesAutoresizingMaskIntoConstraints = false

基本上，我在 UITableView 的单元格内堆叠了一个数组。

为了整理它，我想给每个 UILabel 大约一半的空间（减去一些填充）。 wordLabel 在左边。 englishWordLabel 在右边。

现在让我大吃一惊的是，如果我删除 sizeToFit 行，那么大小调整就可以了，但是我的整个 wordLabel 完全丢失了。我可以为其添加边框以在预览中查看它，或者调试视图层次结构，它完全不见了。添加sizeToFit，我的标签出现了，但是宽度被忽略了（那部分我理解）。

我考虑过添加约束来完成这项工作，但我不确定这是否是最佳策略。

你会建议做什么来完成这个？

【问题讨论】：

您需要自动布局。最简单的方法是水平的UIStackView 设置为Fill Equally；这将允许您几乎毫不费力地让两个标签并排采用相同的宽度。您也可以调整填充。您还可以将标签UIStackView 的多个“行”嵌入到垂直UIStackView 中。
啊酷@RoboticCat。感谢您的建议。究竟什么是“自动布局”？
在 IB 中布局视图和视图控制器的原因之一是您可以在设计时获得正确的约束，而不是经历整个代码->编译->测试->代码周期。在 IB 中，您可以在设计时以每个方向查看每个设备的视图和视图控制器。 IB 还将针对不起作用的约束显示错误和警告。出于某种原因，一些开发人员不了解自动布局（当然也不了解它的强大功能），因此我建议您先查看教程。
另外，UIStackViews 会自动为您实现约束，因此您只需将UIStackView 固定到视图中的正确位置，然后在UIStackView 上设置属性。欲了解更多信息，请观看（免费）WWDC 2015 视频Mysteries of Auto Layout Part 1：developer.apple.com/videos/play/wwdc2015/218。 WWDC 2015 和往年还有其他有用的视频以及示例代码。
@RoboticCat 非常酷。很高兴知道。非常感谢您的信息。这是我的第一个 iOS 项目，所以我想学习如何专门从代码和情节提要中制作一些东西。非常感谢您的提示！

标签： ios swift uitableview uilabel constraints

【解决方案1】：

正如@Robotic Cat 所说，您正在寻找的似乎是自动布局。

自动布局使您能够以编程方式和/或在故事板中设置视图约束。这些约束允许您根据屏幕尺寸、视图边界/框架、相对宽度/高度和许多其他内容创建自适应布局。为了帮助您入门，我提供了有关自动布局的 Ray Wenderlich 教程，以及一些有用的 Apple 文档。

【讨论】：

我正在以编程方式进行设置。自动布局还有意义吗？
如果一切都是程序化的，我建议至少在代码中对你的视图设置约束。
对。这就是我所拥有的。但是什么样的约束呢？就像我在问题中所描述的那样，如果我设置了约束，那么一切都会发生。这似乎没有任何逻辑。我也阅读了您在过去几个月中提到的那些链接。我的直觉让我写了宽度和前导空格，但是我的两个 UILabel 只是彼此重叠。
为了分隔标签，您需要将 wordLabel 的前导约束设置为等于 tableView 单元格的前导边缘，并将 englishWordLabel 的尾随约束设置为 tableView 单元格的后沿。 PS：正在发生的事情的屏幕截图以及您希望它看起来的样子会非常有帮助。