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

Question

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

这是它在 X 上的显示方式。

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

为了解决这个问题，我将自动布局更新为以下配置。我删除了锁定的 60x60 width/height，而是添加了纵横比 1:1。希望圆形 imageViews 可以随着每个不同的屏幕尺寸进行缩放。

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

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

如果我删除此代码，此 imageViews 将按比例显示。我不明白为什么我的 imageViews 没有显示完美的圆圈。有谁知道如何更新我的约束 and/or 代码来实现这一点？

Answer 1

设置 cornerRadius 的代码需要在 Auto Layout 设置视图大小之后发生。确保发生这种情况的一种简单方法是继承 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 24=] 它将起作用。

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

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

uiimageview

ios

autolayout

swift