Swift：UNavigationController 破坏了程序化自动布局

Question

我继承了一个 UIKit 应用程序，我的前任在其中手动编写了所有界面代码。我有一个视图控制器，一个可以正常工作的简单登录屏幕，但是当我将它添加到 UINavigationController 时，它奇怪地被拉伸了。这对我来说没有多大意义。

我觉得我必须缺少一些简单的标志，或者我需要做些什么才能使 Navcontroller 与这个程序化自动布局（希望这是我最后一次）玩得很好

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

有我方便的花花公子，看似理智的应用约束的实用程序。例如，让我的密码文本字段看起来不错的漂亮椭圆形小东西设置了这些约束。

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

在 UINavigationController 之外一切都很好，

但在 UINavigationController 中，一切都超宽且损坏（模拟器拍摄）

这里的宽度不是问题 - 如果我使用一个常数作为宽度，我的子视图仍然偏离中心，尽管它的 centerX 设置为视图控制器的视图的中心 X。

Answer 1

配置您的导航控制器，然后像这样尝试：

设置你的对象：

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

现在在 viewDidLoad 中设置 stackView、bigTitle 标签和约束：

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

要向您的文本字段添加文本填充，请使用我的扩展：

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

结果如下：