iOS-圓角圖片,下載網(wǎng)絡(luò)上的圖片并顯示成圓形

1.利用xib建立圓角圖片:

只需要在xib中選擇你要弄成圓角的控件,按照圖片中那樣設(shè)置就可以。(避免輸入錯誤,建議復(fù)制layer.cornerRadiuslayer.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];

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,117評論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,860評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,128評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,291評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 72,025評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,421評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,477評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,642評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,177評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,970評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,157評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,717評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,410評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,821評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,053評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,896評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,157評論 2 375

推薦閱讀更多精彩內(nèi)容