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

Question

在storyboard(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

在故事板中，我已将图像设置为“缩放以适合”模式

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

至于圆本身，设置cornerRadius是无法形成圆的。在图像周围创建圆形边界的方法是遮盖图像。您可以使用圆形蒙版作为剪切边界重绘图像，也可以将圆形蒙版应用到图像视图。（例如，请参见我的回答： https: //stackoverflow.com/a/16475824/341994。）

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