圆角的UIImageView

Question

我正在尝试将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
}

有什么想法吗？

Answer 1

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

要获得一个圆，请给图像视图宽度等于高度。 发生这种情况的原因是设备的宽度不同。

Answer 2

如果您正在使用Interface Builder（即Storyboard或XIB）管理此视图，则可以通过在其中定义一个正方形来直接为该视图强制执行正方形形状（当与已有的圆角组合时变为圆形）。的纵横比约束。无需编写任何代码。

从图像视图按住Control键（就像您创建“ Outlet”，“ Actions”等操作一样）拖动到“ 自己” ，然后将出现以下弹出窗口。

选择纵横比，这将创建一个与视图的当前比率无关的约束（在此示例中为15：8）。如果视图已经是正方形，则创建的约束应该已经正确。

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

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

实际上，一个更简单的选项是，一旦您将控件从视图拖放到其本身，请按住Alt / Opt，弹出窗口中显示的选项将更改为宽高比（1：1） ，这意味着您可以直接从那里进行设置，而无需编辑约束。

Answer 3

将高度限制为等于宽度。

然后，创建一个简单的UIImageView子类：

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

框架可以（并将）根据视图生命周期进行更改。通过更新layoutSubviews()中的cornerRadius，它将使其保持“圆形”。