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

Question

我有一个动态加载按钮的 View 。所以我有一个 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])
}

这将创建第一个按钮并将其放置在顶部栏下方 15px 处。我遇到的问题是如何将下一个按钮放置在第一个按钮下方 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用于跟踪当前按钮“上方”的 View 。例如，当创建第一个按钮时，upperView是UIScrollView对于第二个按钮，upperView是第一个按钮；对于第三个按钮，upperView是第二个按钮等等...

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

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

3. 这一行选择upperView上的属性这将涉及 button到 upperView .这是一张展示我的意思的图片:

• a) .Top按钮与 .Top 有关的 UIScrollView.

• b) .Top按钮与 .Bottom 有关以前的 UIButton .

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

5.对于UIScrollView正确计算其 contentSize它必须在从上到下的不间断链中有约束(在本例中是从上到下，因为它需要垂直滚动)。因此，如果它是最后一个 UIButton UIScrollView 添加了来自其底边的约束的底边。

希望对您有所帮助!