程序化自动布局 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，虽然我知道你想做什么，但你试图在选择器和按钮之间给出垂直 space。所以它应该像这样链接，选择器的底部等于按钮的顶部，常数为 -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

程序化自动布局 UI 元素

Programatic Autolayout UI Elements

uiview

ios

autolayout

programmatically-created

swift3