程序化自动布局 UI 元素

Question

我正在尝试按照图像中显示的顺序自动布局 3 个 UI 元素。 UIView 中的 UITextfield、UIDatePicker 和 UIButton。

我避免使用情节提要，因为我想更好地理解编程约束并最终为它们使用动画。

到目前为止，我已经尝试过一些限制：

这是我正在处理的代码：

override func viewDidLoad() {
    super.viewDidLoad()


    picker.translatesAutoresizingMaskIntoConstraints = false
    picker.backgroundColor = UIColor.red


    button.translatesAutoresizingMaskIntoConstraints = false
    button.backgroundColor = UIColor.blue
    button.setTitle("Button", for: .normal)

    self.view.addSubview(picker)
    self.view.addSubview(button)

    let PickercenterX = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)

    let PickercenterBottom = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.button, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -30)

    let Pickerheight = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 150)

    let Pickerwidth = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.width, relatedBy: .equal, toItem: self.view, attribute: NSLayoutAttribute.width, multiplier: 1, constant: -5)


    // Centers it on the x axis. Pushes it it right if co constant has a value > 0
    let centerX = NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)


    let centerBottom = NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -15)

    let height = NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 50)

    let width = NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.width, relatedBy: .equal, toItem: self.view, attribute: NSLayoutAttribute.width, multiplier: 1, constant: -15)


    self.view.addConstraints([centerX, centerBottom, height, width, PickercenterX, PickercenterBottom, Pickerheight, Pickerwidth])

}

在移动到文本字段之前，我正在尝试先使用按钮和日期选择器。如何以编程方式实现这一目标？

Answer 1

这就是问题所在：- 您将选择器底部设置为等于按钮底部，常数为-30，尽管我知道您要做什么，但您试图在选择器和按钮之间留出垂直空间。所以它应该像这样链接，选择器的底部等于按钮的顶部，常数为 -30。

此外，您最后没有添加isActive，从而错过了激活约束。

同时激活所有约束的另一种方法是使用NSLayoutConstraint.activate() 方法

let PickercenterBottom = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.button, attribute: NSLayoutAttribute.top, multiplier: 1, constant: -30).isActive = true