swift - 如何减少这个 Swift NSLayoutConstraint 代码？

Question

创建标签、按钮等后，我使用该功能进行布局。在 viewdidload 中调用函数，它的工作非常好。但我对 NSLayoutConstraint 代码不满意。如何减少这段代码？可以为此使用扩展吗？

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

            ])
    }

Answer 1

这是我使用的扩展程序。包含文档。我不怎么使用中心 anchor ，但如果你真的需要它们，你可以轻松地将它们添加到扩展中。

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 }
    }
}

这是一个如何使用它以及它如何明显减少行数的示例:

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