故事板和自动版式：如何做一个圆形图像 [英] Storyboard and autolayout: how make a circular image

问题描述

在故事板（X code 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";

在故事板我已经设置了形象缩放以适合模式。
为了让我用下面的code中的图像视图通告：

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;

当我运行code，反正图像看起来不圆：

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屋！