前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >iOS编程101:如何创建圆形头像和圆角图片

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

作者头像
Jace
发布于 2018-08-01 09:31:59
发布于 2018-08-01 09:31:59
2.3K00
代码可运行
举报
文章被收录于专栏:进步博客进步博客
运行总次数:0
代码可运行

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:方法中添加下面几行代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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:方法中,在设置圆角半径的代码后面加入以下两行代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
self.profileImageView.layer.borderWidth = 3.0f;
self.profileImageView.layer.borderColor = [UIColor whiteColor].CGColor;

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

创建圆角图片

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
self.profileImageView.layer.cornerRadius = 10.0f;

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

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014/05/222,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
iOS设置圆角及圆形图片
方方正正的样式往往会显得很生硬,而圆角的样式会让人产生别样的亲切感,现在越来越多地用到圆角,诸如用户头像之类的图片也大都用圆形来显示,本文就介绍如何设置按钮、文本框的圆角以及制作圆形的图片。
Cloudox
2021/11/23
1.9K0
iOS设置圆角及圆形图片
iOS学习——核心动画之Layer基础
CALayer我们又称它叫做层。在每个UIView内部都有一个layer这样一个属性,UIView之所以能够显示,就是因为它里面有这个layer才具有显示的功能。我们可以通过操作CALayer对象,可以很方便地调整UIView的一些外观属性,可以给UIView设置阴影,圆角,边框等等...
mukekeheart
2018/08/01
1.6K0
iOS学习——核心动画之Layer基础
视觉效果 -- iOS Core Animation 系列三
本片文章前三章内容大家比较常用,后面的可能会不那么常用,前面的基础内容不想看了可以直接从第4段开始
Charlie_W
2018/10/19
1.2K0
视觉效果 -- iOS Core Animation 系列三
iOS开发——制作圆形头像
在iOS7之后,我们能发现许多应用都开始使用圆形来作为用户头像的形状,代表App就是腾讯QQ了,QQ的头像就是圆形的。
Originalee
2018/08/30
1.3K0
iOS-核心动画详解之CALayer
1. CALayer的基本操作. 1. CALayer简介: CALayer我们又称为层,在每个UIView内部都有一个layer的属性,UIView之所以能够显示,就是因为它里面有layer层,才具有显示的功能,我们通过操作CALayer对象,可以很方便地调整UIView的一些外观属性,例如可以给UIView设置阴影,圆角,边框等等... 2. 操作layer改变UIView外观. 2.1 设置阴影 //默认图层是有阴影的, 只不过是透明的。1为不透明,0为透明 _RedView.layer.sha
xx_Cc
2018/05/10
2.1K0
iOS设置视图圆角失效的解决方案
1、尝试设置_numberLab.clipsToBounds = YES;2、尝试设置 [self.numberLab layoutIfNeeded]; 之后再执行cornerRadius
公众号iOS逆向
2022/08/22
2.4K0
iOS设置视图圆角失效的解决方案
图层树和寄宿图 -- iOS Core Animation 系列一
一个视图就是在屏幕上显示的一个矩形块(比如图片,文字或者视频),它能够拦截类似于鼠标点击或者触摸手势等用户输入。视图在层级关系中可以互相嵌套,一个视图可以管理它的所有子视图的位置。 在iOS中,所有的视图都是从UIView这个基类派生出来的。UIView可以处理触摸时间,支持Core Graphics绘图,可以仿射变换等等操作。
Charlie_W
2018/10/19
1.3K0
图层树和寄宿图 -- iOS Core Animation 系列一
CALayer 图层概念二、CALayer属性二、方法
概念 CA -> Core Animation (核心动画) 相对更底层. CALayer负责视图中显示内容和动画.所有动画都是作用在CALayer上的. UIView负责监听和相应事件.UIView是更高层的封装 在 iOS 中,你能看得见,摸得着的东西基本上都是UIView.比如一个按钮,一个文本标签,一个文本输入框, 一个图标等.这些都是UIView,其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时, UIView内部会自动创建一个图层 (即CALayer对象
用户2141756
2018/05/18
1.6K0
iOS 页面渲染 - 离屏渲染
上周介绍了一下iOS 页面渲染-UIView & CALayer,本周我们来聊一聊 iOS 页面渲染中的高频面试题--离屏渲染。
CoderStar
2022/08/24
2.1K0
iOS 页面渲染 - 离屏渲染
面试题型—iOS离屏渲染探索
在平时的开发过程中,我们经常会听到离屏渲染这个词,在面试中也会经常被面试官问到,那么在iOS开发中到底什么是离屏渲染?离屏渲染有什么性能问题?离屏渲染是否应该完全禁止呢?
CC老师
2021/08/25
1.2K0
iOS开发——头像设置及本地沙盒保存,圆形头像显示
现在的APP中,对于头像的设置,我们大多采用圆形头像,并且需要支持从照相机获取或者从相册中选择用户需要的头像,并且保存在本地或者服务器中。
Originalee
2018/08/30
1.8K0
高性能设置圆角,告别离屏渲染
今天来写一个老生常谈的话题,也是一个面试的高频问题,我也在面试时不止一次被问到过这个问题——如何高性能的设置圆角。就用他作为2017年春节上班之后的第一篇文章。
Originalee
2018/08/30
9740
iOS动画-CALayer基础知识
核心动画Core Animation,其实是由Layer Kit这样一个名字演变而来。它实际上是一个复合引擎,可以将存储在图层树体系中的不同独立图层,尽可能快地组合成不同的可视内容呈现于屏幕上;所以做动画只是Core Animation的特性之一;
梧雨北辰
2019/04/22
2K0
iOS动画-CALayer基础知识
Quartz2D复习(四) --- 图层CALayer和动画CAAnimation
1)、在ios中,能看得见摸得着的东西基本上都是UIView, 比如按钮、文本标签、文本输入框、图标等,这些都是UIView
tandaxia
2018/09/27
1.6K0
Quartz2D复习(四) --- 图层CALayer和动画CAAnimation
iOS从Xib中设置样式
iOS在写视图的有的人喜欢纯代码去写,从之前的绝对定位方式(Frame),到现在的自动布局(Autolayout),但这种方式的好处是便于复制修改和装X,但是缺点是代码不容易看,不便于修改
码客说
2019/10/22
2.5K0
iOS 圆角和阴影并存的方法
Because shadow is an effect done outside the View, and that masksToBounds set to YES will tell the UIView not to draw everything that is outside itself.
freesan44
2019/04/29
3.8K0
iOS开发中设置圆角的方法
设置圆角的效果图: 方法一:使用代码设置 //第一步设置圆角的大小 //如果是设置为视图的高度的一半,则为半圆弧 _circleBtn.layer.cornerRadius = 5; //第二部:设置
梧雨北辰
2018/04/24
1.8K0
iOS开发中设置圆角的方法
开源项目——『看知乎』iOS 版
前段时间无意中发现了看知乎,一个知乎答案和用户的精选站。网站开发者是知乎用户苏莉安,他写了个爬虫从知乎抓取数据,而且还提供了 API 文档。我大致看了下文档,感觉写个 iOS 客户端应该也挺不错的,于是就开始写了。
Sheepy
2018/09/10
1.3K0
开源项目——『看知乎』iOS 版
OS 圆角图片
对于xib创建的cell,不能在- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier中修改属性,因为根本不会调用该方法,但是会调用awakeFromNib , 导入系统库<QuartzCore/QuartzCore.h>,再导入xib文件后会调用该方法.
艳艳代码杂货店
2021/10/30
1K0
iOS面试题-UI篇
面试题持续整理更新中,如果你正在面试或者想一起进阶,不妨添加一下交流群1012951431一起交流。
会写bug的程序员
2020/06/29
2.2K0
iOS面试题-UI篇
相关推荐
iOS设置圆角及圆形图片
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验