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

Question

在故事板中（xcode 6），我想要一个从Facebook获取的圆形用户头像。

因此，我在故事板中使用自动布局创建了这个界面：

然后，使用Facebook iOS sdk获取用户资料（使用Swift）：

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

在Storyboard中，我将图像设置为“缩放以适应”模式。 要使图像视图成为圆形，我使用以下代码：

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

当我运行代码时，图片看起来并不是圆形: 我想问题可能出在自动布局上，但我不确定。如何使图片完美圆形呢？

- Tom

---

你使用Storyboard解决了吗？ - Arslan Kaleem

Answer 1

两个步骤：

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

为什么？因为Auto Layout需要考虑到您在UIImageView上设置的前导和尾随约束，所以UIImageView被拉伸了。为了证明我的观点，将前导和尾随约束的优先级设为小于高度和宽度约束的优先级。您应该会看到一个像您期望的圆形图像，但它可能不是居中的。

- s.ka

Answer 2

更多步骤：

1. 添加宽高比约束 1:1
2. 在属性检查器中标记“剪裁到 边界”属性
3. 将您的视图制作成控制器类的输出口

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

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

- Y_Y

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;

- raistlin

Answer 4

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
    }
}

- SPatel

Answer 5

在添加约束时，请确保检查高度和宽度，以便其固定。至少这是我经常做的。

- Faiz Mokhtar

Answer 6

你已经设置了“前导约束、后继约束”和“宽度约束”。所以图像将尝试在图像之前和之后留下130个像素，这将增加图像的宽度。

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

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

- Ramaraj T

Answer 7

在Storyboard中，我将图像设置为“缩放以适应”模式。但这是一个问题，不是吗？这意味着：“拉伸图像以匹配图像视图的拉伸方式。”如果这不是你想要的，请不要这样做！使用居中对齐，或者至少使用其中一个带有“Aspect”名称的内容模式，以便您的图像不会被拉伸。

至于圆形本身，设置cornerRadius不能制作圆形。创建图像周围的圆形边界的方法是对图像进行遮罩。您可以使用圆形遮罩作为剪辑边界重新绘制图像，也可以将圆形遮罩应用于图像视图。（例如，请参见我的答案：https://dev59.com/znHYa4cB1Zd3GeqPRvGJ#16475824。）

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

- matt

---

你能详细说明一下你的评论吗？设置圆角不是制作圆形的正确方法吗？我看到很多人都在使用这种技术，它显然有效，那么问题出在哪里呢？ - rdelmar

@rdelmar，你会看到很多人在使用它，但如果你仔细看，你会发现同样有很多人抱怨它存在缺陷——就像这个问题一样。这只是懒惰。如果你想要圆角，而且你不在意精度（平直的边缘）或拉伸（如此处），那么可以将角落变圆。但如果你想要一个圆形，请直接要求一个圆形。这只是常识。 - matt