Search code examples
swiftnslayoutconstraint

How to reduce this Swift NSLayoutConstraint code?


After created label, button etc. I use the function for the layout. Call the function in viewdidload and its working very vell. But I am not happy with the NSLayoutConstraint codes. How to reduce this code? Can use extension for this?

iphne 5s and Xs

override func viewDidLoad() {
        super.viewDidLoad()
        buildUI()
    }
    private func buildUI() {
        view.backgroundColor = .lightGray

        view.addSubview(contentView)
        view.addSubview(usernameTextField)
        view.addSubview(passwordTextField)
        view.addSubview(forgotPasswordButton)
        view.addSubview(loginButton)
        view.addSubview(createAccountButton)

        NSLayoutConstraint.activate([
            contentView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 32),
            contentView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -32),
            contentView.heightAnchor.constraint(equalToConstant: 354),
            contentView.centerYAnchor.constraint(equalTo: view.centerYAnchor),

            usernameTextField.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 32),
            usernameTextField.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -32),
            usernameTextField.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 24),
            usernameTextField.heightAnchor.constraint(equalToConstant: 50),

            passwordTextField.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 32),
            passwordTextField.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -32),
            passwordTextField.topAnchor.constraint(equalTo: usernameTextField.topAnchor, constant: 64),
            passwordTextField.heightAnchor.constraint(equalToConstant: 50),

            forgotPasswordButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            forgotPasswordButton.topAnchor.constraint(equalTo: passwordTextField.topAnchor, constant: 70),

            loginButton.bottomAnchor.constraint(equalTo: createAccountButton.bottomAnchor, constant: -46),
            loginButton.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 32),
            loginButton.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -32),
            loginButton.heightAnchor.constraint(equalToConstant: 50),

            createAccountButton.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
            createAccountButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -30),

            ])
    }

Solution

  • Here is an extension I use. Documentation included. I don't use center anchors much but if you really need them you can easily add them to the extension.

    extension UIView {
        /**
         Anchors a view using the input constraints.
         - Parameter top: The top constraint.
         - Parameter leading: The leading or left contraint.
         - Parameter bottom: The bottom constraint.
         - Parameter trailing: The trailing or right contraint.
         - Parameter padding: The padding to be applied to the constraints. Requires init with UIEdgeInsets.
         - Parameter size: The size to be added to the view. Requires init with CGSize. If all other constraints are set, sizes do not have any effect.
         */
    
        func anchor(top: NSLayoutYAxisAnchor?, leading: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, trailing: NSLayoutXAxisAnchor?, padding: UIEdgeInsets = .zero, size: CGSize = .zero) {
            translatesAutoresizingMaskIntoConstraints = false
            if let top = top { topAnchor.constraint(equalTo: top, constant: padding.top).isActive = true }
            if let leading = leading { leadingAnchor.constraint(equalTo: leading, constant: padding.left).isActive = true }
            if let bottom = bottom { bottomAnchor.constraint(equalTo: bottom, constant: -padding.bottom).isActive = true }
            if let trailing = trailing { trailingAnchor.constraint(equalTo: trailing, constant: -padding.right).isActive = true }
            if size.width != 0 { widthAnchor.constraint(equalToConstant: size.width).isActive = true }
            if size.height != 0 { heightAnchor.constraint(equalToConstant: size.height).isActive = true }
        }
    }
    

    Here is an example of how to use it and how it clearly reduces the number of lines:

    usernameTextField.anchor(top: contentView.topAnchor, leading: contentView.leadingAnchor, bottom: nil, trailing: contentView.trailingAnchor, padding: .init(top: 24, left: 32, bottom: 0, right: 32), size: .init(width: 0, height: 50))