Swift CGPoint x and y overrides programatic constraints

Question

I am trying to programatically create some text fields, and use programatic constraints to lay them out as creating them in the interface builder and using that to create constrains will not work as everything else is created programatically. So the problem is that to create a Text field, I have to use frame: CGRect(x y width height). But doing this overrides all the programatic constraints telling where to be placed based on other UI elements.

// Create username and password entry fields
let usernameTextField: UITextField
usernameTextField = UITextField(frame: CGRect(x: 0, y: 0, width: screenWidth - 40 - usernameLabel.bounds.width, height: 30)) // Without this line usernameTextField is uninitialised.
usernameTextField.textColor = UIColor.black()
usernameTextField.textAlignment = NSTextAlignment.left
usernameTextField.placeholder = "username"
self.view.addSubview(usernameTextField)
usernameTextField.translatesAutoresizingMaskIntoConstraints = true

let passwordTextField: UITextField
passwordTextField = UITextField(frame: CGRect(x: 0, y: 0, width: screenWidth - 40 - passwordLabel.bounds.width, height: 30))
passwordTextField.textColor = UIColor.black()
passwordTextField.textAlignment = NSTextAlignment.left
passwordTextField.placeholder = "password"
self.view.addSubview(passwordTextField)
passwordTextField.translatesAutoresizingMaskIntoConstraints = true

// Constraints for username and password entry fields
// Horizontal placement
usernameTextField.leadingAnchor.constraint(equalTo: usernameLabel.trailingAnchor).isActive = true
passwordTextField.leadingAnchor.constraint(equalTo: passwordLabel.trailingAnchor).isActive = true

// Verticle placement
usernameTextField.bottomAnchor.constraint(equalTo: usernameUnderline.topAnchor).isActive = true
passwordTextField.bottomAnchor.constraint(equalTo: passwordUnderline.topAnchor).isActive = true

//Width
usernameTextField.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
passwordTextField.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true

So how can I programatically create these text fields and use constraints to place them?

Answer 1

Once you start adding constraints to a UIView, you have to go all in. Set translatesAutoresizingMaskIntoConstraints = false on your fields and then add constraints for the desired width, height, and placement.

In that case, you don't pass a frame to the UITextField constructor when you create it:

let usernameTextField = UITextField()

It looks like you are already accounting for usernameTextField's length by setting its leading and trailing anchors. So add a constraint for its height:

usernameTextField.heightAnchor.constraintEqualToConstant(30)

And repeat this for your passwordTextField.