如何解决UITextField右侧UIButton位置模糊的约束警告问题

问题根源 #

你遇到的约束警告核心原因有两点：

1. 给作为rightView的UIButton设置了translatesAutoresizingMaskIntoConstraints = false，但UITextField的rightView默认采用frame布局管理，关闭自动转约束后，系统无法生成正确的布局约束，导致约束模糊。
2. 提前手动设置button的frame无效且干扰布局——lazy加载时myTextfield的frame还未完成最终布局（比如视图控制器生命周期早期，frame还是xib/Storyboard的初始占位值）。

解决方案 #

方案1：最简修复（依赖rightView默认布局）

直接移除按钮的translatesAutoresizingMaskIntoConstraints = false设置，同时删掉手动设置的frame，让UITextField自动管理rightView的位置和大小：

private lazy var myButton : UIButton = {
    let button = UIButton()
    var config = UIButton.Configuration.plain()
    // 调整contentInsets控制按钮内部图标与边缘的间距
    config.contentInsets = NSDirectionalEdgeInsets(top: 4, leading: 4, bottom: 4, trailing: 16)
    button.configuration = config
    button.contentMode = .scaleAspectFit
    button.backgroundColor = .clear
    // 移除自动转约束关闭的代码
    button.setImage(passwordButtonImage, for: .normal)
    button.addTarget(self, action: #selector(self.toggle(_:)), for: .touchUpInside)
    // 移除手动设置frame的代码
    return button
}()

UITextField会自动让rightView垂直居中，你可以通过按钮的contentInsets或配置里的imagePadding调整图标位置，匹配需求。

方案2：自定义rightView大小（添加容器视图）

如果需要精确控制按钮的大小和位置，建议给按钮套一个容器UIView，将容器作为rightView，这样可以给按钮添加精确约束，同时避免和UITextField的布局逻辑冲突：

private lazy var myButtonContainer: UIView = {
    let container = UIView()
    // 容器开启自动转约束，UITextField会管理容器的frame
    container.translatesAutoresizingMaskIntoConstraints = true
    
    let button = UIButton()
    var config = UIButton.Configuration.plain()
    config.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
    button.configuration = config
    button.contentMode = .scaleAspectFit
    button.backgroundColor = .clear
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setImage(passwordButtonImage, for: .normal)
    button.addTarget(self, action: #selector(self.toggle(_:)), for: .touchUpInside)
    
    container.addSubview(button)
    // 给按钮添加约束：固定宽高、右侧距容器16、垂直居中
    NSLayoutConstraint.activate([
        button.widthAnchor.constraint(equalToConstant: 40),
        button.heightAnchor.constraint(equalToConstant: 30),
        button.trailingAnchor.constraint(equalTo: container.trailingAnchor, constant: -16),
        button.centerYAnchor.constraint(equalTo: container.centerYAnchor)
    ])
    // 给容器设置最小宽度，避免被挤压
    container.widthAnchor.constraint(greaterThanOrEqualToConstant: 56).isActive = true
    return container
}()

然后修改UITextField的rightView设置：

@IBOutlet private weak var mytextField: UITextField  {
    didSet {
        mytextField.rightView = myButtonContainer
        mytextField.rightViewMode = .always
    }
}

补充说明 #

• 不要给UITextField的rightView直接添加约束，因为UITextField内部对rightView的布局有专属逻辑，直接添加约束会和系统生成的约束冲突。
• 使用UIButton.Configuration时，优先通过配置里的contentInsets、imagePadding等属性调整内部布局，避免手动修改frame或添加不必要的约束。

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