创建圆形头像和圆角图片

转载 2015年07月09日 19:46:53

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-profile1

创建圆形用户头像

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

打开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

Bootstrap—实现圆角、圆形头像和响应式图片

Bootstrap提供了四种用于类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角; .img-circle:圆形 (IE...
  • nongweiyilady
  • nongweiyilady
  • 2016年12月13日 10:53
  • 7947

Android中使用Picasso将图片直接转换为圆形

圆形头像现在很流行了,Github上也有很多开源的库,最经典的是直接使用一个自定义的圆形ImageViwe,比较有代表性的有这个项目:hdodenhof/CircleImageView。但是,如果你的...
  • codezjx
  • codezjx
  • 2016年05月04日 23:10
  • 6391

<Unity3D UGUI>用UGUI方式实现图片的遮罩,圆角图片,圆形图片效果

实现图片的圆角效果,圆形图片效果,是一个很常见的功能,如下 很多人会使用shader来做,但是太麻烦了,网上关于UGUI实现这种效果的方法我也一直没有找到 我这里知道一个很简单的方法,不用写一行...
  • jjjjjj123321
  • jjjjjj123321
  • 2017年01月05日 19:30
  • 4691

Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果

Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果附录1简单介绍了Android开源的图片加载框架。在实际的开发中,虽然Glide解决了快速加载图片的问题,但还有一个问题悬而未...
  • zhangphil
  • zhangphil
  • 2016年10月13日 14:00
  • 19697

WPF圆形头像显示

不知何时开始,大多数软件的头像采用了圆形头像,使用WPF进行圆形头像显示比较简单,并不是将图像裁剪成圆形头像后显示. 思路是裁剪出一个正方形的头像,然后在显示的时候,只显示正方形中的内切圆部分即可.W...
  • u013376417
  • u013376417
  • 2015年01月30日 14:06
  • 2306

canvas处理图片为圆形或圆角矩形

将bitmap处理为圆形或圆角矩形可以使用canvas重新绘图,通过设置背景与图片的相交部分显示来得到圆形或圆角矩形图片处理为圆形图片的方法public static Bitmap getCircle...
  • okm6666
  • okm6666
  • 2015年12月12日 19:33
  • 2140

利用 BitmapShader 制作自带边框圆形头像

Shader 制作 自定义边框 圆形头像
  • Hwaphon
  • Hwaphon
  • 2016年05月13日 10:52
  • 4622

cocos2dx中ClippingNode实现带边框圆形头像

有个小需求,需要实现一个圆形的头像。要ui设计直接给圆形的png当然可以,但这种解决方式总是不优雅。然后就在网上查了半天,最终找到了使用ClippingNode来实现的方法。 关于ClippingNo...
  • pur_e
  • pur_e
  • 2016年01月19日 10:09
  • 3647

php生成圆角图片

  • sugang_ximi
  • sugang_ximi
  • 2014年06月14日 17:58
  • 12347

如何创建圆形头像和圆角图片

IOS7的一个变化是相对于方形图像,更偏爱于使用圆形图像。在内置的应用中可以看到圆形图标或圆形图像,如联系人和电话应用。这篇短文中,我们将探讨CALayer类,以及如何运用它来创建圆形图像或圆角图像。...
  • pilqc2009
  • pilqc2009
  • 2015年08月12日 10:03
  • 594
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:创建圆形头像和圆角图片
举报原因:
原因补充:

(最多只允许输入30个字)