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)系作者
  • 序言:七十年代末斑芜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子祟霍,更是在濱河造成了極大的恐慌杏头,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沸呐,死亡現(xiàn)場離奇詭異醇王,居然都是意外死亡,警方通過查閱死者的電腦和手機崭添,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門寓娩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人呼渣,你說我怎么就攤上這事棘伴。” “怎么了屁置?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵焊夸,是天一觀的道長。 經(jīng)常有香客問我缰犁,道長淳地,這世上最難降的妖魔是什么怖糊? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任帅容,我火速辦了婚禮,結(jié)果婚禮上伍伤,老公的妹妹穿的比我還像新娘并徘。我一直安慰自己,他們只是感情好扰魂,可當(dāng)我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布麦乞。 她就那樣靜靜地躺著蕴茴,像睡著了一般。 火紅的嫁衣襯著肌膚如雪姐直。 梳的紋絲不亂的頭發(fā)上倦淀,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天,我揣著相機與錄音声畏,去河邊找鬼撞叽。 笑死,一個胖子當(dāng)著我的面吹牛插龄,可吹牛的內(nèi)容都是我干的愿棋。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼均牢,長吁一口氣:“原來是場噩夢啊……” “哼糠雨!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起徘跪,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤甘邀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后真椿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鹃答,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年突硝,在試婚紗的時候發(fā)現(xiàn)自己被綠了测摔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡解恰,死狀恐怖锋八,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情护盈,我是刑警寧澤挟纱,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站腐宋,受9級特大地震影響紊服,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜胸竞,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一欺嗤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧卫枝,春花似錦煎饼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽筒溃。三九已至,卻和暖如春沾乘,著一層夾襖步出監(jiān)牢的瞬間怜奖,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工翅阵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留烦周,地道東北人。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓怎顾,卻偏偏與公主長得像读慎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子槐雾,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,601評論 2 353

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

  • 在iOS中隨處都可以看到絢麗的動畫效果夭委,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌募强。在這里你可以看...
    每天刷兩次牙閱讀 8,485評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果株灸,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺iOS動畫全貌擎值。在這里你可以看...
    F麥子閱讀 5,110評論 5 13
  • 1慌烧、設(shè)置UILabel行間距 NSMutableAttributedString* attrString = [[...
    十年一品溫如言1008閱讀 1,647評論 0 3
  • *7月8日上午 N:Block :跟一個函數(shù)塊差不多,會對里面所有的內(nèi)容的引用計數(shù)+1鸠儿,想要解決就用__block...
    炙冰閱讀 2,485評論 1 14
  • 文| 黎露 蘭臺讀書 今日采訪健身達(dá)人:黎露屹蚊,健身達(dá)人,通過健身进每,從160斤減到116斤汹粤。 接下來我們看一下黎露怎...
    藍(lán)楓123閱讀 5,136評論 25 76