CODEWITHSUNDEEP
iosuiviewswift3autolayoutprogrammatically-created
Amit
Amit

Reputation: 310

Programatic Autolayout UI Elements

I am trying to autolayout 3 UI elements in the order which I present in the image. A UITextfield, UIDatePicker and a UIButton in a UIView.

enter image description here

I am avoiding to use storyboard as I want to get a better understanding of programmatic constraints and eventually use animations for them.

So far I have got this with some constraints I have tried:

enter image description here

and here is the code for the one I am working on:

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])

}

I am trying to work the button and date picker first before moving onto the textfield. How can I achieve this programmatically ?

Upvotes: 0

Views: 78

Answers (1)

Dark Innocence
Dark Innocence

Reputation: 1389

Here lies the problem:- You were setting the picker bottom to be equal to the button bottom with constant -30, although I know what were you trying to do, you were trying to give vertical space between picker and button. So it should be linked like, picker's bottom equal to button's top with constant -30.

Moreover you are missing out on activating the constraints by not adding isActive in the end.

Another way to activate all constraints at once is by using NSLayoutConstraint.activate() method

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

Upvotes: 1

Related Questions