在TableViewCell中设置宽高比的多个圆形UIImageView的自动布局

Question

我有一个带有五个imageViews的tableViewCell。我希望五个imageViews具有相同的宽度和高度。如果我将每个图像视图设置为宽度和高度= 60，并将它们放置在单元格中水平和垂直居中的堆栈视图中，则图像视图将在iPhone X上正确显示。但是，在iPhone SE上，图像也是如此大

以下是它在X上的显示方式。

以下是它在SE上的显示方式。您可以看到两个外部图像在屏幕边缘被切断。

为了尝试解决此问题，我将自动布局更新为以下配置。我删除了锁定的60x60宽度/高度，而是增加了1：1的宽高比。希望圆形imageViews可以根据每个不同的屏幕尺寸进行缩放。

它在SE上运行良好，但在X上，imageView变得扭曲，不再是完美的圆形。下面是X看起来如何使用这些自动布局约束。这是我的代码，使imageView循环。

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

如果我删除此代码，此imageViews会按比例显示。我无法弄清楚为什么我的imageViews没有显示完美的圆圈。有没有人知道如何更新我的约束和/或代码来实现这个目标？

Answer 1

在自动布局设置视图大小后，需要设置cornerRadius的设置代码。确保发生这种情况的一种简单方法是继承UIImageView并放置代码以将cornerRadius设置为覆盖layoutSubviews()：

class RoundImageView: UIImageView {

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

}

然后，只需将UIImageView中的类更改为 Identity Inspector 中的RoundImageView即可。