故事板和自动布局：如何制作圆形图像

Question

在情节提要 (xcode 6) 中，我想要一个从 Facebook 获取的圆形用户图像配置文件。

所以我在情节提要中制作了这个界面，使用自动布局：

然后，我使用 Facebook iOS sdk 获取用户个人资料（使用 swift）：

 var facebookProfileUrl = "http://graph.facebook.com/\(userId!)/picture?type=normal";

在情节提要中，我已将图像设置为“缩放以适应”模式。 为了使图像视图循环，我使用以下代码：

self.facebookProfileImage.layer.cornerRadius =  self.facebookProfileImage.frame.size.width / 2;
self.facebookProfileImage.clipsToBounds = true;

当我运行代码时，无论如何图像看起来不是圆形的：

我想问题是自动布局，但我不确定。 我怎样才能使图像完美圆形？？

Answer 1

两步：

1. 通过向 UIImageView 添加“容器中的水平居中”约束（编辑器 > 对齐 > 容器中的水平居中）使 UIImageView 居中。
2. 删除您当前在 UIImageView 上设置的前导和尾随约束。

为什么？ UIImageView 正在被拉伸，因为自动布局需要考虑您在 UIImageView 上设置的前导和尾随约束。为了证明我的观点，将前导和尾随约束的优先级设置为低于高度和宽度约束的优先级。您应该会看到如您所愿的圆形图像，但它可能未居中。

Answer 2

更多步骤：

1. 添加纵横比约束1:1
2. 将检查剪辑标记到属性inspector中的bounds属性
3. 将视图输出到控制器类中

4. 将圆角半径设置为高度或宽度的一半

   yourImageViewOutlet.layer.cornerRadius = yourImageViewOutlet.frame.size.width / 2.0

Answer 3

不久前我做了同样的事情，这对我有用

self.imageView.image = [ImageHelper getImage]; //retrieve image
self.imageView.layer.cornerRadius = self.imageView.frame.size.height / 2;
self.imageView.layer.masksToBounds = YES;
self.imageView.layer.borderWidth = 0;
self.imageView.contentMode = UIViewContentModeScaleAspectFill;

Answer 4

添加约束时，只需确保检查高度和宽度，以便修复。至少我一直这样做。

Answer 5

你已经给了leading constraint, trailing constraint和width constraint.所以图像会尝试在图像前后留下130像素，这会增加图像的宽度。

So the solution is, remove either one of the leading or trailing constraint.

最好的解决方法是，删除约束并添加一个水平中心约束，这就是你想要的。

Answer 6

SWIFT 3.x 只需使用此更改您的 imageView 自定义类即可享受。

@IBDesignable class RoundedImageView:UIImageView {
    @IBInspectable var borderColor:UIColor = UIColor.white {
        willSet {
            layer.borderColor = newValue.cgColor
        }
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = frame.height/2
        layer.masksToBounds = true
        layer.borderWidth = 1
        layer.borderColor = borderColor.cgColor
    }
}

Answer 7

在情节提要中，我已将图像设置为“缩放以适应”模式

但这是个问题，不是吗？这意味着：“拉伸图像，使其与图像视图的拉伸方式相匹配。”如果那不是你想要的，就不要这么说！使用居中，或者至少使用其中一种名称中带有“Aspect”的内容模式，这样您的图像就不会被拉伸。

至于圈子本身，设置cornerRadius是没有办法做圈子的。在图像周围创建圆形边界的方法是遮罩图像。您可以使用圆形蒙版作为剪切边界重新绘制图像，也可以将圆形蒙版应用于图像视图。 （例如，请参阅我的答案：https://stackoverflow.com/a/16475824/341994。）

确实，您的图像视图也被拉伸了，因为您给它的超级视图的两侧都提供了约束。您可以通过给它一个宽度约束来防止这种情况；现在它的宽度将是绝对的。但是您应该仍然在其他两个问题上做正确的事情。