iOS编程101：如何创建圆形头像和圆角图片

IOS7的一个变化是相对于方形图像，更偏爱于使用圆形图像。在内置的应用中可以看到圆形图标或圆形图像，如联系人和电话应用。这篇短文中，我们将探讨CALayer类，以及如何运用它来创建圆形图像或圆角图像。

您可能并没有听说过CALayer类。但是，如果你曾经创建过应用程序，那么你应该以某种方式使用过它。UIKit中的每个视图（例如UIView、UIImageView）都备份在一个CALayer类的实例中（即layer对象）。layer对象用来管理视图的备份存储和处理视图相关的动画。 layer对象提供了多种属性，使用它们来控制视图的可视内容：

• 背景颜色
• 边框和边框宽度
• 阴影颜色，宽度等
• Opacity(不透明度)
• 圆角半径

Corner radius就是我们用来绘制圆角和圆形图像的属性。

circular-image-featured

与往常一样，了解CALayer是如何工作的最好方法就是使用它。我们将创建一个带有圆形用户头像的简单的profile视图。

快速了解演示项目

首先，下载此项目模板。已经预先创建了profile视图，但编译并运行应用程序时你会发现用户头像是方形的。这个演示项目非常简单，只有一个类ProfileViewController，与storyboard中的视图相关联。

同时，将用户头像图像（UIImageView）与ProfileViewController.h中的profileImageView属性关联起来。

square-corner-image-profile

创建圆形用户头像

接下来，让我们看看如何通过改变圆角半径，使用户头像转换成一个圆形图像。

打开ProfileViewController.m，并在viewDidLoad:方法中添加下面几行代码：

self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2
self.profileImageView.clipsToBounds = YES;

每一个视图，都有一个捆绑的layer属性。所以上面的第一行是设置layer对象（CALayer类的一个实例）的圆角半径。将方形图像变成圆形图像，半径应设置为UIImageView宽度的一半。例如，如果方形图像的宽度是100像素。半径应设置为50像素。其次，你必须将clipsToBounds属性设置为YES，这样layer才能生效。

现在编译和运行应用程序，你会得到一个圆形头像。

circular-image-profile

非常容易吧。只需两行代码，图像从方形变为圆形。无需Photoshop。

添加边框

接下来，我们给头像添加边框使它更漂亮点。同样，也只需要两行。在viewDidLoad:方法中，在设置圆角半径的代码后面加入以下两行代码：

self.profileImageView.layer.borderWidth = 3.0f;
self.profileImageView.layer.borderColor = [UIColor whiteColor].CGColor;

我们只是设置了边框的宽度和边框颜色。再次编译并运行应用程序，您现在应该看到一个拥有白色边框的头像。

创建圆角图片

你可以使用同样的方法来创建圆角图像。关键是要改变圆角半径，并将其设置为其他值。比如设置半径为10：

self.profileImageView.layer.cornerRadius = 10.0f;

用户头像现在应该是圆角的了。

square-corner-image-profile

在这里下载完整的Xcode项目，供大家参考 。

——————————————————————-

翻译自：iOS Programming 101: How To Create Circular Profile Picture and Rounded Corner Image