【问题标题】: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)
    }

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

【问题讨论】:

    标签: ios swift autolayout constraints snapkit


    【解决方案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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-07-31
      • 1970-01-01
      • 2020-02-27
      • 2016-02-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多