iOS - 以编程方式在具有自动布局的 UITextField 内定位 UIImageView

Posted 2023-03-15

【中文标题】iOS - 以编程方式在具有自动布局的 UITextField 内定位 UIImageView

【英文标题】：iOS - Positioning programmatically a UIImageView inside a UITextField with auto layout

【发布时间】：2015-11-09 14:55:17

【问题描述】：

我想以编程方式添加一个图像视图（复选标记）作为一个文本字段的子视图。由于我对所有视图都使用自动布局，因此我想使用约束来定位此子视图。代码如下：

class UIFormTextField: UITextField 

    lazy var checkMarkView = UIImageView(image: UIImage(named: "BarButtonItemCheck"))

    func setCheckMarkView() 
        self.addSubview(checkMarkView)
        self.addConstraints([
            NSLayoutConstraint(item: checkMarkView, attribute: .CenterY, relatedBy: .Equal, toItem: self, attribute: .CenterY, multiplier: CGFloat(1), constant: CGFloat(0)),
            NSLayoutConstraint(item: checkMarkView, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: CGFloat(1), constant: -UIStyle.Size.standardHorizontalSpacing)
            ])
    

我在 viewDidLoad 函数中调用了setCheckMarkView，但它不起作用。我收到一条警告：“可能以下列表中的至少一个约束是您不想要的。”

这是列表，但我不明白为什么其他约束会干扰新视图。

"<NSAutoresizingMaskLayoutConstraint:0x15084acf0 h=--& v=--& UIImageView:0x15089f4d0.midX == + 12>",
"<NSAutoresizingMaskLayoutConstraint:0x14f691d70 h=--& v=--& H:[UIImageView:0x15089f4d0(24)]>",
"<NSLayoutConstraint:0x1509c54e0 H:[Bruce.UIFormTextField:0x150895520]-(0)-|   (Names: '|':Bruce.UIForm:0x150998430 )>",
"<NSLayoutConstraint:0x1509a6120 H:|-(0)-[Bruce.UIFormTextField:0x150895520]   (Names: '|':Bruce.UIForm:0x150998430 )>",
"<NSLayoutConstraint:0x14f593e20 H:[Bruce.UIForm:0x150998430]-(0)-|   (Names: '|':UIView:0x1509c92d0 )>",
"<NSLayoutConstraint:0x150950f10 H:|-(0)-[Bruce.UIForm:0x150998430]   (Names: '|':UIView:0x1509c92d0 )>",
"<NSLayoutConstraint:0x14f6143b0 UIView:0x1509c92d0.width == UIView:0x15094e8f0.width>",
"<NSLayoutConstraint:0x150813210 UIImageView:0x15089f4d0.trailing == Bruce.UIFormTextField:0x150895520.trailing - 20>",
"<NSLayoutConstraint:0x150896350 'UIView-Encapsulated-Layout-Width' H:[UIView:0x15094e8f0(320)]>"

感谢您的帮助，

【问题讨论】：

我不清楚您要达到的目标。在我个人看来，对如此重要的组件进行子类化并不是一个好主意。另一种解决方案是组合您的组件，从一个视图构建，该视图具有一个文本字段，其中一个图像视图作为兄弟

你好安德里亚。我的目标是在用户输入有效时显示复选标记，并在输入无效时隐藏它。我将文本字段子类化以实现几种方法，例如“nextResponder”或“setInputAccessoryView”。我已经设法构建了一个具有 2 个视图（TextField 和 ImageView）的组件，但我必须将 ImageView 放在文本字段上方（它不透明）。或者在这种情况下，图像阻止点击文本字段。因此，我一直在寻找带有子视图的更清洁的解决方案。

【参考方案1】：

问题是您需要禁用 imageView 上的translatesAutoresizingMaskIntoConstraints 属性。这就是为什么您会看到约束存在“NSAutoresizingMaskLayoutConstraint”问题

更新后的代码：

lazy var checkMarkView: UIImageView = 
    let imageView = UIImageView(image: UIImage(named: "BarButtonItemCheck"))
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
()

编辑： 您实际上不需要禁用声明 checkMarkView 的属性。您也可以在您的函数“setCheckMarkView”中执行此操作，即

func setCheckMarkView() 
    checkMarkView.translatesAutoresizingMaskIntoConstraints = false
    self.addSubview(checkMarkView)
    self.addConstraints([
        NSLayoutConstraint(item: checkMarkView, attribute: .CenterY, relatedBy: .Equal, toItem: self, attribute: .CenterY, multiplier: CGFloat(1), constant: CGFloat(0)),
        NSLayoutConstraint(item: checkMarkView, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: CGFloat(1), constant: -UIStyle.Size.standardHorizontalSpacing)
        ])

【讨论】：

非常感谢@Lneuner。