UIImageView doesn't center properly

Question

I have an image view that I set up like this:

let buttonImageView: UIImageView = {
    let iv = UIImageView()
    iv.backgroundColor = .red
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.frame.size = CGSize(width: CGFloat(375 * (11 / 59)), height: CGFloat(375 * (11 / 59)))
    return iv
}()

Then, I add constraints:

/* center-top button */
// buttonImageView.frame = CGRect(x: 0, y: 0, width: buttonDiameter, height: buttonDiameter)
addConstraint(NSLayoutConstraint(item: buttonImageView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: buttonDiameter))
addConstraint(NSLayoutConstraint(item: buttonImageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: buttonDiameter))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[v0]", options: NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: ["v0": buttonImageView]))
// addConstraintsWithFormat("H:[v0]", views: buttonImageView)
addConstraintsWithFormat("V:|-\(buttonSpacing)-[v0]", views: buttonImageView)
//addConstraint(NSLayoutConstraint(item: buttonImageView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0))

Please ignore the "Hi!" square. The red square below it, buttonImageView , should be at that vertical constraint, but centered horizontally.

Answer 1

如果以编程方式使用约束，则首先需要激活它们

blabla.constraint1.isActive = true;

Answer 2

Replace:

addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[v0]", options: NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: ["v0": buttonImageView]))

with:

NSLayoutConstraint(item: buttonImageView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1.0, constant: 0.0).isActive = true

Should do the trick.

Answer 3

addConstraint(NSLayoutConstraint(item: buttonImageView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0))