Swift: Programmatic Autolayout broken by UNavigationController

Question

I have inherited a UIKit app where my predecessor has written all the interface code by hand. I have a view controller, a simple login screen that works just fine, but when I add it to a UINavigationController it is oddly stretched. This doesn't make a lot of sense to me.

I feel like I must be missing some simple flag, or what do I need to do to make the Navcontroller play nice with this programmatic autolayout (which is hopefully my last ever)

// this a view controller extension    
func apply(constraints: [NSLayoutConstraint]) {
        translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate(constraints)
    }

There's my handy dandy, seemingly sane utility for applying constraints. As an example, the nice little oval thing making my password textfield looks nice has these constraints set up.

// these constraints are being setup in the view controller
        emailCapsuleView.apply(constraints: [
            emailCapsuleView.topAnchor.constraint(equalTo: subBigTitle.bottomAnchor, constant: 24.0),
            emailCapsuleView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            emailCapsuleView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8),
            emailCapsuleView.heightAnchor.constraint(equalToConstant: Dimensions.inputFieldHeight)
        ])

Outside of a UINavigationController everything is fine,

but in a UINavigationController everythhing is super wide and broken (simulator shot)

The width is not the problem here - if I use a constant for the width, my subview is still off center despite having it's centerX sets to the view controller's view's center X.

Answer 1

Configure your navigation controller and after that try like this:

set your objects:

let emailTextfield: UITextField = {
    let tf = UITextField()
    tf.backgroundColor = .white
    tf.layer.borderWidth = 1
    tf.layer.borderColor = UIColor.lightGray.cgColor
    tf.setPadding(left: 10, right: 10)// use my extension below
    tf.attributedPlaceholder = NSAttributedString(string: "Email address", attributes: [.foregroundColor: UIColor.lightGray])
    tf.layer.cornerRadius = 14
    tf.clipsToBounds = true
    tf.translatesAutoresizingMaskIntoConstraints = false
    
    return tf
}()

let passTextfield: UITextField = {
    let tf = UITextField()
    tf.backgroundColor = .white
    tf.layer.borderWidth = 1
    tf.layer.borderColor = UIColor.lightGray.cgColor
    tf.setPadding(left: 10, right: 10)// use my extension below
    tf.attributedPlaceholder = NSAttributedString(string: "Password", attributes: [.foregroundColor: UIColor.lightGray])
    tf.layer.cornerRadius = 14
    tf.clipsToBounds = true
    tf.translatesAutoresizingMaskIntoConstraints = false
    
    return tf
}()

let loginButton: UIButton = {
    let b = UIButton(type: .system)
    b.backgroundColor = .black
    b.setTitle("Save Image", for: .normal)
    b.titleLabel?.font = .systemFont(ofSize: 16, weight: .semibold)
    b.setTitleColor(.white, for: .normal)
    b.layer.cornerRadius = 14
    b.clipsToBounds = true
    b.translatesAutoresizingMaskIntoConstraints = false
    
    return b
}()

let subBigTitle: UILabel = {
    let l = UILabel()
    l.text = "Your Big Title"
    l.font = .systemFont(ofSize: 30, weight: .regular)
    l.textColor = .black
    l.textAlignment = .center
    l.translatesAutoresizingMaskIntoConstraints = false
    return l
}()

Now in viewDidLoad set stackView, bigTitle label and constraints:

view.addSubview(subBigTitle)
    subBigTitle.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    subBigTitle.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
    subBigTitle.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    subBigTitle.heightAnchor.constraint(equalToConstant: 60).isActive = true
    
    let stackView = UIStackView(arrangedSubviews: [emailTextfield, passTextfield, loginButton])
    stackView.axis = .vertical
    stackView.distribution = .fillEqually
    stackView.spacing = 10
    stackView.translatesAutoresizingMaskIntoConstraints = false
    
    view.addSubview(stackView)
    stackView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8).isActive = true
    stackView.heightAnchor.constraint(equalToConstant: 170).isActive = true
    stackView.topAnchor.constraint(equalTo: subBigTitle.bottomAnchor, constant: 24).isActive = true
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

to add text padding to your textfield use my extension:

extension UITextField {

func setPadding(left: CGFloat, right: CGFloat){

 let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: left, height: self.frame.size.height))
 self.leftView = paddingView
 self.leftViewMode = .always

 let paddingViewRight = UIView(frame: CGRect(x: 0, y: 0, width: right, height: self.frame.size.height))
 self.rightView = paddingViewRight
 self.rightViewMode = .always
 }
}

and this is the result: