前言:
現(xiàn)在眾多App中,用戶頭像,BBS帖子詳情,為了美觀好多都是采用的原形圖片來顯示,QQ和微信的用戶頭像也是原形,廢話不多說,下面講一下怎么實現(xiàn)圖片圓角,自己總結的幾種方法,大家互相學習一下.
方法一:(適用于Xib
或者Storyboard
中):
首先是選中要設置的圖片(或者其他空間),這種方法當然也適用于其他控件,因為它們都是繼承與UIView的,選中要空間之后,下面看圖說話:
Paste_Image.png
設置如上圖所示,注意上面的Key不要寫錯哦,然后Number對應的10是所要設置的圓角的大小,根據(jù)需求而定
方法二:
這種方法也是針對大眾的控件(button或者label)都可以實現(xiàn)
view.layer.masksToBounds = YES;
// 設置圓角大小
view.layer.cornerRadius = 6.0 ;
// 設置控件邊框的寬度
view.layer.borderWidth = 1.0;
// 設置控件邊框的顏色
view.layer.borderColor = [[UIColor redColor] CGColor];
方法三:
考慮到工程中會設置大量的圖片圓角,以上兩種方法雖然可以實現(xiàn)圓角的效果,但是會印象性能,為了以后用起來方便還是自己封裝一套設置圖片圓角的方法比較實用些,接下來我們就來封裝一下實現(xiàn)圖片圓角功能的代碼:
可以為UIImage
添加分類,代碼如下:
#import <UIKit/UIKit.h>
@interface UIImage (PDExtension)
/**
* 返回原型圖片
*/
- (instancetype)circleImage;
/**
* 返回原型圖片
*/
+ (instancetype)circleImage:(NSString *)image;
@end
方法的實現(xiàn):
#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
方法的實現(xiàn)
#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];