前言:
现在众多App中,用户头像,BBS帖子详情,为了美观好多都是采用的原形图片来显示,QQ和微信的用户头像也是原形,废话不多说,下面讲一下怎么实现图片圆角,自己总结的几种方法,大家互相学习一下.
方法一:(适用于Xib
或者Storyboard
中):
首先是选中要设置的图片(或者其他空间),这种方法当然也适用于其他控件,因为它们都是继承与UIView的,选中要空间之后,下面看图说话:
设置如上图所示,注意上面的Key不要写错哦,然后Number对应的10是所要设置的圆角的大小,根据需求而定
方法二:
这种方法也是针对大众的控件(button或者label)都可以实现
view.layer.masksToBounds = YES;
// 设置圆角大小
view.layer.cornerRadius = 6.0 ;
// 设置控件边框的宽度
view.layer.borderWidth = 1.0;
// 设置控件边框的颜色
view.layer.borderColor = [[UIColor redColor] CGColor];
方法三:
考虑到工程中会设置大量的图片圆角,以上两种方法虽然可以实现圆角的效果,但是会印象性能,为了以后用起来方便还是自己封装一套设置图片圆角的方法比较实用些,接下来我们就来封装一下实现图片圆角功能的代码:
可以为UIImage
添加分类,代码如下:
#import <UIKit/UIKit.h>
@interface UIImage (PDExtension)
/**
* 返回原型图片
*/
- (instancetype)circleImage;
/**
* 返回原型图片
*/
+ (instancetype)circleImage:(NSString *)image;
@end
方法的实现:
#import "UIImage+PDExtension.h"
@implementation UIImage (PDExtension)
- (instancetype)circleImage
{
UIGraphicsBeginImageContext(self.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
CGContextAddEllipseInRect(ctx, rect);
CGContextClip(ctx);
[self drawInRect:rect];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
+ (instancetype)circleImage:(NSString *)image
{
return [[self imageNamed:image] circleImage];
}
@end
UIImage的分分类方法的用法:
下面是先设置图片圆角,然后设置按钮的图片
[self.iconButton setImage:[image circleImage] forState:UIControlStateNormal];
考虑到很多直接设置UIImageView圆角,接下来就为UIImageView在添加一个分类
#import <UIKit/UIKit.h>
@interface UIImageView (PDExtension)
// 没有占位图片
- (void)setHeaderUrl:(NSString *)url;
// 带有占位图片
- (void)setHeaderUrl:(NSString *)url withplaceholderImageName:(NSString *)placeholderImageName;
@end
方法的实现
#import "UIImageView+PDExtension.h"
@implementation UIImageView (PDExtension)
- (void)setHeaderUrl:(NSString *)url
{
[self setCircleHeaderUrl:url];
}
- (void)setCircleHeaderUrl:(NSString *)url
{
[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:[UIImage imageNamed:@"img_studio_default"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
if (image == nil) return;
self.image = [image circleImage];
}];
}
- (void)setHeaderUrl:(NSString *)url withplaceholderImageName:(NSString *)placeholderImageName
{
[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:[UIImage imageNamed:placeholderImageName] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
if (image == nil) return;
self.image = [image circleImage];
}];
}
@end
UIImageView分类方法的用法:
[self.iconImageView setHeaderUrl:topic.boardheadportrait];