Swift 自动布局以编程方式和动态

Posted 2023-02-26

【中文标题】Swift 自动布局以编程方式和动态

【英文标题】：Swift auto layout programmatically and dynamic

【发布时间】：2015-04-20 21:09:37

【问题描述】：

我有一个动态加载按钮的视图。所以我有一个 for 循环来遍历所有按钮。由于这是动态的，我想以编程方式创建自动布局。现在我有以下代码：

for var i = 0; i < data.count; i++ 
      let button   = UIButton.buttonWithType(UIButtonType.System) as! UIButton
      button.backgroundColor = UIColor.greenColor()
      button.setTitle("Button", forState: UIControlState.Normal)

      button.setTranslatesAutoresizingMaskIntoConstraints(false)

      self.view.addSubview(button)

      let centerXConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: scrollView, attribute: NSLayoutAttribute.CenterX, multiplier: 1.0, constant: 0)

      let centerYConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: scrollView, attribute: NSLayoutAttribute.Top, multiplier: 1.0, constant:15)

      let widthConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 200)

      let heightConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant:100)

      scrollView.addConstraints([centerXConstraint, centerYConstraint, widthConstraint, heightConstraint])

这将创建第一个按钮并将其放置在顶部栏下方 15 像素处。我遇到的问题是如何将下一个按钮放置在第一个按钮下方 15px 处，将第三个按钮放置在第二个按钮下方 15px 处等。有人有什么想法吗？

【参考方案1】：

这绝对是可能的，但首先，我应该提一下，您不需要为按钮的宽度和高度添加约束，因为它们具有固有的内容大小（如UILabel），这取决于它们的文本和字体等属性。

回到你的问题！

代码如下，每一步的解释如下：

override func viewDidLoad() 
    super.viewDidLoad()

    // 1.
    var upperView: UIView = scrollView

    for i in 0..<data.count 
        let button = UIButton.buttonWithType(UIButtonType.System) as! UIButton
        button.backgroundColor = UIColor.greenColor()
        button.setTitle("Button", forState: UIControlState.Normal)

        button.setTranslatesAutoresizingMaskIntoConstraints(false)

        //  2.
        scrollView.addSubview(button)

        //  3.
        let attribute: NSLayoutAttribute = i == 0 ? .Top : .Bottom

        //  4.
        let topEdgeConstraint = NSLayoutConstraint(item: button,
            attribute: .Top,
            relatedBy: .Equal,
            toItem: upperView,
            attribute: attribute,
            multiplier: 1.0,
            constant: 15.0)

        let centerXConstraint = NSLayoutConstraint(item: button,
            attribute: .CenterX,
            relatedBy: .Equal,
            toItem: scrollView,
            attribute: .CenterX,
            multiplier: 1.0,
            constant: 0.0)

        scrollView.addConstraint(topEdgeConstraint)
        scrollView.addConstraint(centerXConstraint)

        //  5.
        if i == data.count - 1 
            let bottomConstraint = NSLayoutConstraint(item: button,
                attribute: .Bottom,
                relatedBy: .Equal,
                toItem: scrollView,
                attribute: .Bottom,
                multiplier: 1.0,
                constant: -15.0)

            scrollView.addConstraint(bottomConstraint)
        

        upperView = button
    

1. upperView 用于跟踪当前按钮“上方”的视图。例如，创建第一个按钮时，upperView 是UIScrollView 对于第二个按钮，upperView 是第一个按钮；对于第三个按钮，upperView 是第二个按钮，依此类推...

2.您的按钮应添加到UIScrollView，而不是self.view。否则你会得到错误：

视图层次结构没有为约束做好准备...

3. 此行选择upperView 上的属性，它将button 与upperView 相关联。这是一张图片来说明我的意思：

a)按钮的.Top与UIScrollView.的.Top相关

b) 按钮的.Top 与前一个UIButton 的.Bottom 相关。

4. 制作顶部和中心 X 约束 - 这一切都非常不言自明。

5. 要让UIScrollView 正确计算其contentSize，它必须在从上到下（在这种情况下是从上到下）的完整链中具有约束，因为它需要垂直滚动）。因此，如果它是最后一个 UIButton，则从其底部边缘开始的约束将添加到 UIScrollView 的底部边缘。

希望对您有所帮助！

【讨论】：

非常感谢您的帮助！