如何使用自动布局在对象之间创建间隙

Posted 2023-02-23

【中文标题】如何使用自动布局在对象之间创建间隙

【英文标题】：How to use auto layout to create a gap between objects

【发布时间】：2019-03-04 15:13:13

【问题描述】：

我的代码具有 UITextField 和 UITableView。我希望我的代码使用 AutoLayout 在文本字段和表格视图之间创建一个小间隙。现在，如果代码的位置在 iPhone 模式下运行良好，但如果它在 iPad 中，则文本字段将打印在 tableview 上。您可以在下面的照片中看到我正在处理的内容：

hitsLabel.topAnchor.constraint(equalTo: view.centerYAnchor, constant: -250)
hitsLabel.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant: 150)
hitsLabel.widthAnchor.constraint(equalToConstant: 120)
hitsLabel.heightAnchor.constraint(equalToConstant: 40)

theScores.topAnchor.constraint(equalTo: view.topAnchor, constant: 300)
theScores.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0)
theScores.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0)
theScores.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0)

【问题讨论】：

hitsLabel 是你的文本字段吗？

是的，这就是文本字段

您在视图中垂直居中文本字段，并且似乎没有在表格视图和文本字段之间设置任何约束，因此它当然会显示在表格视图的顶部。如果想要表格上方的文本域，则需要在文本域底部和 tableview 顶部之间创建一个约束。

没错，我就是这么想的，但我不知道如何编码

【参考方案1】：

我会建议这样的事情：

hitsLabel.topAnchor.constraint(equalTo: view.topAnchor, constant : 100),
hitsLabel.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :150),
hitsLabel.widthAnchor.constraint(equalToConstant: 120),
hitsLabel.heightAnchor.constraint(equalToConstant: 40),
theScores.topAnchor.constraint(equalTo: hitsLabel.bottomAnchor, constant: 100),
theScores.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0),
theScores.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0),
theScores.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0),

这会将文本字段放置在距视图顶部 100 像素的位置，然后 tableView 的顶部将距文本字段底部 100 像素。

我建议也为文本字段的左侧添加约束