在代码中为动态元素数量设置约束

Posted 2023-03-15

【中文标题】在代码中为动态元素数量设置约束

【英文标题】：Set constraints in code for dynamic number of elements

【发布时间】：2016-11-23 15:45:01

【问题描述】：

在我看来，我将拥有这样的动态 UILabel 数量：

| HEADER  |
| - label |
| - label |
| - label |
| ...     |
| BUTTON  |

由于标签的动态数量，我正在为代码中的每个元素构建带有约束的布局（使用 Snap Kit）。假设我有一个字符串数组，为数组中的每个字符串创建单独的标签，添加到 superview 并将其放置在前一个的下方。但是我不确定如何正确设置这些标签的约束？我相信我需要编写for循环，但是如何指示第一个标签贴在标题上，每个旁边贴上一个标签，最后下面的按钮贴在最后一个标签上？

    header.snp.makeConstraints  (make) -> Void in
        make.top.equalTo(self.view).offset(10)
        make.leading.equalTo(self.view).offset(10)
        make.trailing.equalTo(self.view).offset(10)
    

    for object in objects 
       let label = UILabel()
       label.text = object
       self.view.addSubview(label)

       // and here how to set correct constraints for each label?
    

    button.snp.makeConstraints  (make) -> Void in
        make.leading.equalTo(self.view).offset(10)
        make.trailing.equalTo(self.view).offset(10)
        make.bottom.equalTo(self.view).offset(10)
    

这是我第一次在代码中编写所有约束，如果这听起来像个愚蠢的问题，很抱歉。感谢您的帮助。

【参考方案1】：

您可以在for 循环之前声明一个变量来跟踪当前的顶视图。一开始它会指向标头，然后在循环中的每次迭代中更新它：

var topView = header
for object in objects 
    let label = UILabel()
    label.text = object
    self.view.addSubview(label)

    // and here are your constraints
    label.top.equalTo(topView).offset(10)
    label.left.equalTo(self.view).offset(20)

    // topView is now the current label
    topView = label


button.snp.makeConstraints  (make) -> Void in
    make.leading.equalTo(self.view).offset(10)
    make.trailing.equalTo(self.view).offset(10)
    make.top.equalTo(topView).offset(10)
    make.bottom.equalTo(self.view).offset(10)

如果您的标签具有相同的间距，那么更首选的方法是尝试 UIStackView。您声明一个堆栈视图，为其指定约束，然后在 for 循环中您只需通过 stackView.addArrangedSubview(label) 添加标签

【讨论】：

谢谢。如此简单。

【参考方案2】：

使用垂直堆栈视图。它会让你的生活更轻松 （UIStackView 文档here）