iOS-圆角图片,下载网络上的图片并显示成圆形

1.利用xib建立圆角图片:

iOS-圆角图片,下载网络上的图片并显示成圆形_第1张图片

只需要在xib中选择你要弄成圆角的控件,按照图片中那样设置就可以。(避免输入错误,建议复制layer.cornerRadiuslayer.masksToBounds

2.在代码中设置

在代码中设置和在xib中设置的道理是一样的。在ViewController里面关联xib中的控件,然后设置其属性值;(如UIImageView类)

self.profileImageView.layer.cornerRadius=5.0;//圆角的半径,一般设置成5

self.profileImageView.layer.masksToBounds=YES;//这个属性需设置成YES,否则图片不能生效。

3创建圆形用户头像

接下来,让我们看看如何通过改变圆角半径,使用户头像转换成一个圆形图像。和2中写的类似,需要改变的是圆形半径。其半径是其长度的一半。(图片需是正方形图片)

self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2

self.profileImageView.clipsToBounds = YES;

4为图片添加边框

在设置圆角半径的代码后面加入以下两行代码:

self.profileImageView.layer.borderWidth = 2.0;//边框的宽度

self.profileImageView.layer.borderColor = [UIColor redColor].CGColor;//边框的颜色

5可以给UIImage添加一个分类UIImage+Extension

分类中增加一个返回圆形图片的方法,扩展性强(如果很多地方需要用到圆形图片,如tableViewCell上的用户头像,以上的方法就会让程序变得很卡,推荐使用下面的方法)

#import

@interface UIImage (Extension)

- (UIImage *)circleImage;

@end

#import "UIImage+Extension.h"

@implementation UIImage (Extension)

- (UIImage *)circleImage {

// 开始图形上下文,NO代表透明

UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0);

// 获得图形上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

// 设置一个范围

CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);

// 根据一个rect创建一个椭圆

CGContextAddEllipseInRect(ctx, rect);

// 裁剪

CGContextClip(ctx);

// 将原照片画到图形上下文

[self drawInRect:rect];

// 从上下文上获取剪裁后的照片

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

// 关闭上下文

UIGraphicsEndImageContext();

return newImage;

}

或者这样:

- (UIImage*)cropImageWithRect:(CGRect)cropRect

{

CGRect drawRect = CGRectMake(-cropRect.origin.x , -cropRect.origin.y, self.size.width * self.scale, self.size.height * self.scale);

UIGraphicsBeginImageContext(cropRect.size);

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextClearRect(context, CGRectMake(0, 0, cropRect.size.width, cropRect.size.height));

[self drawInRect:drawRect];

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

return image;

}

具体使用:

// 获得的就是一个圆形的图片

UIImage *placeHolder = [[UIImage imageNamed:@"defaultUserIcon"] circleImage];

需求案例-进一步应用

请求获取网络图片显示到UIImageView上,并把用户图片改成圆形。

这里需要用到SDWebImage框架。新建UIImageView分类,并导入头文件UIImageView+WebCache.h

--------.h文件

#import

@interface UIImageView (Extension)

- (void)setHeader:(NSString *)url;

@end

-----.m文件

#import "UIImageView+XMGExtension.h"

#import

@implementation UIImageView (Extension)

- (void)setHeader:(NSString *)url

{

UIImage *placeholder = [[UIImage imageNamed:@"defaultUserIcon"] circleImage];//占位图片,当URL上下载的图片为空,就显示该图片

[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:placeholder completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {//当图片下载完会来到这个block,执行以下代码

self.image = image ? [image circleImage] : placeholder;

}];

}

@end

调用方式

// 设置头像,把图片的URL传过去

[self.profileImageView setHeader:profile_image];

你可能感兴趣的:(iOS-圆角图片,下载网络上的图片并显示成圆形)