Using Autolayout Constraints programmatically to center a UIImageView inside a UIView Swift 2.3 iOS10

Question

I have added a UIView to a table cell through my storyboard with the following constraints:

Then I have the following code to programmatically add a UIImageView to the UIView above and size it according to the orientation of the screen.

            //Use half the screen size width when on an iPhone and on Landscape
            let image: UIImage = UIImage(named: HEADER_IMAGE_BATH)!
            imageView = UIImageView(image: image)
            imageView!.frame = CGRectMake(0 , 0, self.view.frame.width / 2, 185)
            imageView!.contentMode = .ScaleAspectFit
            //center image
            let centerXConst = NSLayoutConstraint(item: imageView!, attribute: .CenterX, relatedBy: .Equal, toItem: imageWrapperView, attribute: .CenterX, multiplier: 1, constant: 1)
            let centerYConst = NSLayoutConstraint(item: imageView!, attribute: .CenterY, relatedBy: .Equal, toItem: imageWrapperView, attribute: .CenterY, multiplier: 1, constant: 1)
            NSLayoutConstraint.activateConstraints([centerXConst, centerYConst])
            //add to sub view
            imageWrapperView.addSubview(imageView!)

However, my image does not get centered when in landscape. My image is only half the width of the screen and I would like to center it inside my UIView. What am I missing? Thanks

Answer 1

1. You should use Auto Layout instead of frame for width and height of imageView
2. You have to add imageView to imageWrapperView before add constraints
3. You have to set imageView.translatesAutoresizingMaskIntoConstraints to false

Then, the final code is:

    //Use half the screen size width when on an iPhone and on Landscape
    let image: UIImage = UIImage(named: "key.png")!
    let imageView = UIImageView(image: image)
    imageView.contentMode = .ScaleAspectFit
    imageView.translatesAutoresizingMaskIntoConstraints = false

    //add to sub view
    imageWrapperView.addSubview(imageView)

    //center image
    let centerXConst = NSLayoutConstraint(item: imageView, attribute: .CenterX, relatedBy: .Equal, toItem: imageWrapperView, attribute: .CenterX, multiplier: 1.0, constant: 0.0)
    let centerYConst = NSLayoutConstraint(item: imageView, attribute: .CenterY, relatedBy: .Equal, toItem: imageWrapperView, attribute: .CenterY, multiplier: 1.0, constant: 0.0)

    let heightConstraint = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 185.0)
    let widthConstraint = NSLayoutConstraint(item: imageView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: self.view.frame.width / 2)
    imageView.addConstraints([heightConstraint, widthConstraint])

    NSLayoutConstraint.activateConstraints([centerXConst, centerYConst])

Answer 2

When you're using autolayout, do not try to change the frame of the views. If you need to change the frame, better take the outlets of the constraints and change them programatically.

In your question, to center align the imageView, you can do it by putting 4 constraints. Set the height and width of the imageView and the other two are center horizontally and center vertically constraints.

This is the basic way of center aligning any type of view.