故事板和自动布局:如何制作圆形图像 [英] Storyboard and autolayout: how make a circular image

问题描述

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

in storyboard (xcode 6) i want a circular user image profile take from Facebook.

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

So i have make this interface in storyboard, using auto layout:

然后，我使用 Facebook iOS sdk 获取用户个人资料(使用 swift):

Then, using Facebook iOS sdk i take the user profile (using swift):

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

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

In storyboard i have set the image to "Scale to fit" mode. To make the image view circular i use the following code:

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

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

When i run the code, anyway the image doesn't look circular:

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

I suppose the problem is auto layout but i'm not sure. How can i make the image perfectly circular??

推荐答案

两步:

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

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

Why? The UIImageView is getting stretched because Auto Layout needs to account for the leading and trailing constraints you set on the UIImageView. To prove my point, set the priority of the leading and trailing constraints to something less than the priority of the height and width constraints. You should see a rounded image like you expect, but it may not be centered.

这篇关于故事板和自动布局:如何制作圆形图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！