Programatic Autolayout UI元素

Question

我正在尝试按照我在图像中显示的顺序自动布局3个UI元素。 UITextfield，UIDatePicker和UIView中的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