前言:

現(xiàn)在眾多App中,用戶頭像,BBS帖子詳情,為了美觀好多都是采用的原形圖片來顯示,QQ和微信的用戶頭像也是原形,廢話不多說,下面講一下怎么實現(xiàn)圖片圓角,自己總結(jié)的幾種方法,大家互相學(xué)習(xí)一下.

方法一:(適用于Xib或者Storyboard中):

首先是選中要設(shè)置的圖片(或者其他空間),這種方法當(dāng)然也適用于其他控件,因為它們都是繼承與UIView的,選中要空間之后,下面看圖說話:

Paste_Image.png

設(shè)置如上圖所示,注意上面的Key不要寫錯哦,然后Number對應(yīng)的10是所要設(shè)置的圓角的大小,根據(jù)需求而定

方法二:

這種方法也是針對大眾的控件(button或者label)都可以實現(xiàn)

   view.layer.masksToBounds = YES;
    // 設(shè)置圓角大小
    view.layer.cornerRadius = 6.0 ;
    // 設(shè)置控件邊框的寬度
    view.layer.borderWidth = 1.0;
    // 設(shè)置控件邊框的顏色
    view.layer.borderColor = [[UIColor redColor] CGColor];

方法三:

考慮到工程中會設(shè)置大量的圖片圓角,以上兩種方法雖然可以實現(xiàn)圓角的效果,但是會印象性能,為了以后用起來方便還是自己封裝一套設(shè)置圖片圓角的方法比較實用些,接下來我們就來封裝一下實現(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的分分類方法的用法:
下面是先設(shè)置圖片圓角,然后設(shè)置按鈕的圖片

[self.iconButton setImage:[image circleImage] forState:UIControlStateNormal];

考慮到很多直接設(shè)置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];

注意點:如果是用的UIImageView是分類方法,這個類的實現(xiàn)是以UIImage為基礎(chǔ)的,里面用到了UIImage的方法,所以用的時候記得把UIImage的分類也要寫上,還有用分類方法的時候記得導(dǎo)入頭文件......