Swift开发中OTP Code View的Auto Layout自动布局不生效问题求助

你的约束不生效的核心原因有2个：

• 你当前给pinView设置的是centerYAnchor约束，直接让验证码视图在整个父视图垂直居中，自然没办法对齐到上方文字的下方
• 你把pinView声明成了方法内的局部变量，方法执行结束后实例会被释放，后续也可能出现约束异常、回调不生效的问题

具体修改步骤 #

1. 首先在你的ViewController类中，把pinView改为全局属性：

// 类内声明属性，不要放在方法里
var pinView: VKPinCodeView!

2. 确认你上方的提示文字控件（比如UILabel）已经关联了IBOutlet，假设控件名为hintLabel
3. 替换你原有setPinVIew方法中的约束代码，删掉centerY相关约束，新增pinView顶部和文字底部的绑定约束，修改后完整代码如下：

func setPinVIew() {
    pinView = VKPinCodeView()
    pinView.length = 6
    pinView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(pinView)
    
    // 原有左右、高度约束保留
    pinView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40).isActive = true
    pinView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -40).isActive = true
    pinView.heightAnchor.constraint(equalToConstant: 50).isActive = true
    
    // 删掉原来的centerY约束，换成下面这行，间距20可以根据设计稿调整
    pinView.topAnchor.constraint(equalTo: hintLabel.bottomAnchor, constant: 20).isActive = true
    
    pinView.onSettingStyle = { UnderlineStyle() }
    pinView.becomeFirstResponder()
    
    pinView.onComplete = { code, pinView in
        self.buttonStatus()
        
        if code.count == 6 {
            print("code: \(code)")
            self.pinCode = code
            self.buttonStatus()
        }
    }
}

注意：如果你的文字控件是用storyboard/xib搭建的，要确保它本身的约束是完整的，没有歧义，不然绑定它的bottomAnchor也会出现约束冲突。

内容的提问来源于stack exchange，提问作者Ximena Flores de la Tijera