圆形UIImageView

Posted 2021-04-11

我试图得到一个圆形的UIImageView但它似乎在不同的设备上呈现不同;

在iPhone Xr上看起来像这样：

在iPhone 7上看起来像这样：

我的高度约束为60，代码如下：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    self.userAvatar.layer.cornerRadius = self.userAvatar.frame.height / 2
    self.userAvatar.layer.masksToBounds = false
    self.userAvatar.clipsToBounds = true
    self.userAvatar.layer.borderWidth = 0
}

有任何想法吗？

答案

在我看来，您已经给出了图像前导和尾随约束而不是固定宽度。

要实现圆形，请使图像视图宽度等于高度。这是由于设备的宽度不同而发生的。

另一答案

如果您使用Interface Builder（即Storyboard或XIB）管理此视图，则可以通过为其直接定义约束来强制执行方形（在与已有的圆角结合时成为圆形）宽高比。无需编码任何东西。

从图像视图到自身的控制拖动（就像创建插座，动作等一样），将出现以下弹出窗口。

选择宽高比，它将创建一个匹配视图当前比率的约束（在本例中，它是15：8）。如果视图已经是方形，则创建的约束应该已经正确。

如果没有，您可以通过单击以下图标（对于“大小”检查器）找到该约束：

从那里，您可以双击该约束进行编辑，并将乘数更改为1：1：

事实上，一个更简单的选择是，一旦你将Control从视图拖到自身，按住Alt / Opt，弹出窗口中显示的选项将变为Aspect Ratio（1：1），这意味着你可以设置它直接从那里甚至不必编辑约束。

另一答案

约束高度等于宽度。

并且，创建一个简单的UIImageView子类：

class RoundedImageView: UIImageView {
    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.height / 2
    }
}

框架可以（并且将）基于视图生命周期而改变。通过更新layoutSubviews()中的cornerRadius，它将保持“圆”。