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

Question

我有一个动态加载按钮的视图。所以我有一个 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 处等等。有人有任何想法吗？

Answer 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用于跟踪视图'above'当前按钮。例如，创建第一个按钮时，upperView是UIScrollView，对于第二个按钮，upperView是第一个按钮；对于第三个按钮，upperView 是第二个按钮，依此类推...

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

The view hierarchy is not prepared for the constraint...

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

a)按钮的.Top与UIScrollView.[=34的.Top相关=]
b)按钮的.Top与前面UIButton的.Bottom有关。

4. 制作顶部和中心 X 约束 - 这完全不言自明。

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

希望对您有所帮助！

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

Swift auto layout programmatically and dynamic

autolayout

programmatically-created

swift