Search code examples
iosswiftuiimageviewautolayout

Auto Layout for multiple circular UIImageViews with set aspect ratios in a TableViewCell

I have a tableViewCell with five imageViews. I would like the five imageViews to have equal width and heights. If I set each image view to have a width and height = 60, and put them in a stack view centered horizontally and vertically in the cell, the image views display properly on an iPhone X. However, on an iPhone SE the images are too large

Here is how it displays on the X.

iPhone X

Here is how it displays on the SE. You can see the two outer images get cut off on the edges of the screen.

iPhone SE

To try to solve this I updated my auto layout to the below configuration. I removed the locked 60x60 width/height and instead added an aspect ratio 1:1. The hope would be that the circular imageViews would scale with each different screen size. Auto Layout

It worked fine on the SE but on the X the imageView became distorted and is no longer perfectly circular. Below is how the X looks with these auto layout constraints. Here is my code to make the imageView circular.

imageView.layer.cornerRadius = imageView.bounds.size.width / 2
imageView.clipsToBounds = true

iPhone X updated auto layout

If I remove this code, this imageViews display proportionally. I cannot figure out why my imageViews are not displaying perfect circles. Does anyone have any idea how to update my constraints and/or code to achieve this?

iPhone X Square

Solution

  • The code for setting the cornerRadius needs to happen after the size of the view has been set by Auto Layout. An easy way to make sure that happens is to subclass UIImageView and place the code to set the cornerRadius in an override of layoutSubviews():

    class RoundImageView: UIImageView {

    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.cornerRadius = self.bounds.size.width / 2
        self.clipsToBounds = true
    }

}

    Then, just change the Class of your UIImageViews to RoundImageView in the Identity Inspector and it will work.