1.利用xib建立圓角圖片:
只需要在xib中選擇你要弄成圓角的控件玄帕,按照圖片中那樣設(shè)置就可以部脚。(避免輸入錯誤,建議復(fù)制layer.cornerRadius和layer.masksToBounds)
2.在代碼中設(shè)置
在代碼中設(shè)置和在xib中設(shè)置的道理是一樣的。在ViewController里面關(guān)聯(lián)xib中的控件,然后設(shè)置其屬性值谁鳍;(如UIImageView類)
self.profileImageView.layer.cornerRadius=5.0;//圓角的半徑,一般設(shè)置成5
self.profileImageView.layer.masksToBounds=YES;//這個屬性需設(shè)置成YES锡移,否則圖片不能生效。
3創(chuàng)建圓形用戶頭像
接下來漆际,讓我們看看如何通過改變圓角半徑淆珊,使用戶頭像轉(zhuǎn)換成一個圓形圖像。和2中寫的類似奸汇,需要改變的是圓形半徑套蒂。其半徑是其長度的一半钞支。(圖片需是正方形圖片)
self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2
self.profileImageView.clipsToBounds = YES;
4為圖片添加邊框
在設(shè)置圓角半徑的代碼后面加入以下兩行代碼:
self.profileImageView.layer.borderWidth = 2.0;//邊框的寬度
self.profileImageView.layer.borderColor = [UIColor redColor].CGColor;//邊框的顏色
5可以給UIImage添加一個分類UIImage+Extension
分類中增加一個返回圓形圖片的方法,擴展性強(如果很多地方需要用到圓形圖片,如tableViewCell上的用戶頭像操刀,以上的方法就會讓程序變得很卡烁挟,推薦使用下面的方法)
#import <UIKit/UIKit.h>
@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();
// 設(shè)置一個范圍
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
// 根據(jù)一個rect創(chuàng)建一個橢圓
CGContextAddEllipseInRect(ctx, rect);
// 裁剪
CGContextClip(ctx);
// 將原照片畫到圖形上下文
[self drawInRect:rect];
// 從上下文上獲取剪裁后的照片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
// 關(guān)閉上下文
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];
需求案例-進一步應(yīng)用
請求獲取網(wǎng)絡(luò)圖片顯示到UIImageView上骨坑,并把用戶圖片改成圓形撼嗓。
這里需要用到SDWebImage框架。新建UIImageView分類欢唾,并導(dǎo)入頭文件UIImageView+WebCache.h
--------.h文件
#import <UIKit/UIkit.h>
@interface UIImageView (Extension)
- (void)setHeader:(NSString *)url;
@end
-----.m文件
#import "UIImageView+XMGExtension.h"
#import <UIImageView+WebCache.h>
@implementation UIImageView (Extension)
- (void)setHeader:(NSString *)url
{
UIImage *placeholder = [[UIImage imageNamed:@"defaultUserIcon"] circleImage];//占位圖片且警,當(dāng)URL上下載的圖片為空,就顯示該圖片
[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:placeholder completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {//當(dāng)圖片下載完會來到這個block礁遣,執(zhí)行以下代碼
self.image = image ? [image circleImage] : placeholder;
}];
}
@end
調(diào)用方式
// 設(shè)置頭像,把圖片的URL傳過去
[self.profileImageView setHeader:profile_image];