添加PhoneNumberTextField后控件及titleLabel不显示问题求助

核心问题 #

1. PhoneNumberTextField未禁用自动布局掩码：未设置translatesAutoresizingMaskIntoConstraints = false，导致手动添加的约束与系统自动布局规则冲突，控件无法正常渲染。
2. 缺失高度约束：PhoneNumberTextField没有配置高度约束，系统无法确定其尺寸，进而挤压上方的titleLabel，导致两者都无法正常显示。
3. 布局层级冲突：bottomLabel的垂直约束基于titleLabel底部，未考虑PhoneNumberTextField的存在，造成布局重叠。

修复步骤 #

1. 修正PhoneNumberTextField初始化代码 #

添加自动布局掩码禁用逻辑，并适配背景色设置样式，避免内容因颜色问题不可见：

private let phoneNumberTextField: PhoneNumberTextField = {
    let field = PhoneNumberTextField()
    field.translatesAutoresizingMaskIntoConstraints = false
    // 适配橙色背景的样式设置
    field.textColor = .white
    field.placeholder = "请输入手机号"
    field.placeholderColor = .white.withAlphaComponent(0.7)
    field.borderStyle = .none
    // 添加白色下划线提升可读性
    let bottomLine = UIView()
    bottomLine.backgroundColor = .white
    bottomLine.translatesAutoresizingMaskIntoConstraints = false
    field.addSubview(bottomLine)
    NSLayoutConstraint.activate([
        bottomLine.bottomAnchor.constraint(equalTo: field.bottomAnchor),
        bottomLine.leadingAnchor.constraint(equalTo: field.leadingAnchor),
        bottomLine.trailingAnchor.constraint(equalTo: field.trailingAnchor),
        bottomLine.heightAnchor.constraint(equalToConstant: 1)
    ])
    return field
}()

2. 调整布局约束 #

给PhoneNumberTextField添加高度约束，并修改bottomLabel的垂直约束，使其基于PhoneNumberTextField底部：

NSLayoutConstraint.activate([
    titleLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 100),
    titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    
    phoneNumberTextField.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20),
    phoneNumberTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
    phoneNumberTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
    phoneNumberTextField.heightAnchor.constraint(equalToConstant: 40), // 新增高度约束
    
    bottomLabel.topAnchor.constraint(equalTo: phoneNumberTextField.bottomAnchor, constant: 60), // 修改约束基准
    bottomLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    
    bottomLabel2.topAnchor.constraint(equalTo: bottomLabel.bottomAnchor),
    bottomLabel2.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    
    nextButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    nextButton.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20),
    nextButton.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20),
    nextButton.heightAnchor.constraint(equalToConstant: 60),
    nextButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])

效果说明 #

修复后PhoneNumberTextField将正常显示在titleLabel下方，titleLabel恢复正常显示，所有控件布局层级清晰，无重叠冲突。

问题截图 #

移除PhoneNumberTextField后的正常效果截图 #

内容的提问来源于stack exchange，提问作者airsoftFreak