ios - 在 TableViewCell 中设置纵横比的多个圆形 UIImageView 的自动布局

Question

我有一个带有五个 imageView 的 tableViewCell。我希望五个 imageViews 具有相同的宽度和高度。如果我将每个 ImageView 的宽度和高度设置为 60，并将它们放在单元格中水平和垂直居中的堆栈 View 中，则 ImageView 会在 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 的代码需要在 Auto Layout 设置 View 大小之后进行。确保发生这种情况的一种简单方法是子类化 UIImageView 并将设置 cornerRadius 的代码放在 layoutSubviews() 的重写中:

class RoundImageView: UIImageView {

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

}

然后，只需在 Identity Inspector 中将 UIImageView 的 Class 更改为 RoundImageView 即可工作。