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

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

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

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

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

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

快速了解演示项目

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

同时,将用户头像图像(UIImageView)与ProfileViewController.h中的profileImageView属性关联起来。

创建圆形用户头像

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

打开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才能生效。

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

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

添加边框

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

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

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

创建圆角图片

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

self.profileImageView.layer.cornerRadius = 10.0f;

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱塘大数据

中国互联网协会发布:《2018中国互联网发展报告》

在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

13750
来自专栏前端桃园

知识体系解决迷茫的你

最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

22340
来自专栏怀英的自我修炼

考研英语-1-导学

英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

12110
来自专栏腾讯高校合作

【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

16020
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

30140
来自专栏腾讯社交用户体验设计

ISUX Xcube智能一键生成H5

51420
来自专栏钱塘大数据

理工男图解零维到十维空间,烧脑已过度,受不了啦!

让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

34430
来自专栏微信公众号:小白课代表

不只是软件,在线也可以免费下载百度文库了。

不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

44730
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.2K20
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

18230

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励