ios - 程序化自动布局 UI 元素

Question

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

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

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

这是我正在开发的代码:

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