在 TableViewCell 中设置纵横比的多个圆形 UIImageViews 的自动布局答案

【问题标题】：Auto Layout for multiple circular UIImageViews with set aspect ratios in a TableViewCell在 TableViewCell 中设置纵横比的多个圆形 UIImageViews 的自动布局
【发布时间】：2018-07-28 06:30:39
【问题描述】：

我有一个带有五个 imageView 的 tableViewCell。我希望五个图像视图具有相同的宽度和高度。如果我将每个图像视图设置为宽度和高度 = 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 没有显示完美的圆圈。有谁知道如何更新我的约束和/或代码来实现这一点？

【问题讨论】：

您更新了它们的大小，但它们的半径没有改变。您可以以编程方式检查屏幕尺寸并根据此更改照片的宽度和角半径。

标签： ios swift uiimageview autolayout

【解决方案1】：

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

class RoundImageView: UIImageView {

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

}

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

【讨论】：