[iOS]UIImageView增加圓角完整版

54b71b4f68442.png

最早關(guān)注到這個問題是一位老前輩在分享如何面試一個合格的iOS開發(fā)上,提出來的:

"如何給一個UIImageView增加圓角过蹂?有幾種方法十绑?各自區(qū)別?"

這種問題酷勺,其實(shí)已經(jīng)有很多回答了本橙,這里只是簡單總結(jié)下,出于實(shí)踐優(yōu)先的原則脆诉,這里不會詳細(xì)解釋各個方法背后的原理甚亭,只是將常見的幾種方法做以簡單的對比,讓大家心里理清什么場景該用什么

備注:本文參考自cocoachina


UIImageView *poImgView = [[UIImageView alloc]init];

方案A(基本方案):


poImgView.layer.cornerRadius = poImgView.frame.size.width/2.0;

poImgView.layer.masksToBounds = YES;
(或者 poImgView.clipsToBounds = YES;)

備注:clipsToBounds是對view的切割击胜,masksToBounds是對layer的切割

性能消耗:
這個是離屏渲染(off-screen-rendering)亏狰,對性能消耗比較大
fps大致在45幀左右(每個cell 做2個imageview)

正常fps是60幀,越小偶摔,用戶體驗(yàn)越差

|

離屏渲染暇唾,指的是GPU在當(dāng)前屏幕緩沖區(qū)以外新開辟一個緩沖區(qū)進(jìn)行渲染操作。由上面的一個結(jié)論視圖和圓角的大小對幀率并沒有什么卵影響,數(shù)量才是傷害的核心輸出啊策州∪澄叮可以知道離屏渲染耗時是發(fā)生在離屏這個動作上面,而不是渲染够挂。為什么離屏這么耗時旁仿?原因主要有創(chuàng)建緩沖區(qū)和上下文切換。創(chuàng)建新的緩沖區(qū)代價都不算大孽糖,付出最大代價的是上下文切換枯冈。

方案B:

CAShapeLayer *layer = [CAShapeLayer layer];  
UIBezierPath *aPath = [UIBezierPath bezierPathWithOvalInRect:aImageView.bounds];  
layer.path = aPath.CGPath;  
poImgView.layer.mask = layer;

性能消耗:
測試fps大致在20幀左右,比方案A的消耗更大

方案C:

- (UIImage *)imageWithCornerRadius:(CGFloat)radius {
CGRect rect = (CGRect){0.f, 0.f, self.size};
 
UIGraphicsBeginImageContextWithOptions(self.size, NO, UIScreen.mainScreen.scale);
CGContextAddPath(UIGraphicsGetCurrentContext(),
 [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius].CGPath);
CGContextClip(UIGraphicsGetCurrentContext());
 
[self drawInRect:rect];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
 
UIGraphicsEndImageContext();
 
return image;
}

性能消耗:
這個是on-screen-rendering
相當(dāng)于時時去做渲染办悟,相比于A.B方案的離線渲染尘奏,此方法對性能消耗最低,推薦用此方案誉尖。

說明

方案A和方案B都是比較常見的方式罪既,但是都不推薦,對此的優(yōu)化方案是是用C铡恕,但是如果費(fèi)用使用A或者B方案琢感,補(bǔ)救措施是:

self.layer.shouldRasterize = YES;  
self.layer.rasterizationScale = [UIScreen mainScreen].scale;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市探熔,隨后出現(xiàn)的幾起案子驹针,更是在濱河造成了極大的恐慌,老刑警劉巖诀艰,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件柬甥,死亡現(xiàn)場離奇詭異,居然都是意外死亡其垄,警方通過查閱死者的電腦和手機(jī)苛蒲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來绿满,“玉大人臂外,你說我怎么就攤上這事±洌” “怎么了漏健?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長橘霎。 經(jīng)常有香客問我蔫浆,道長,這世上最難降的妖魔是什么姐叁? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任瓦盛,我火速辦了婚禮洗显,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谭溉。我一直安慰自己墙懂,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布扮念。 她就那樣靜靜地躺著,像睡著了一般碧库。 火紅的嫁衣襯著肌膚如雪柜与。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天嵌灰,我揣著相機(jī)與錄音弄匕,去河邊找鬼。 笑死沽瞭,一個胖子當(dāng)著我的面吹牛迁匠,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播驹溃,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼城丧,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了豌鹤?” 一聲冷哼從身側(cè)響起亡哄,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎布疙,沒想到半個月后蚊惯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡灵临,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年截型,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片儒溉。...
    茶點(diǎn)故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡宦焦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出睁搭,到底是詐尸還是另有隱情赶诊,我是刑警寧澤,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布园骆,位于F島的核電站舔痪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏锌唾。R本人自食惡果不足惜锄码,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一夺英、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧滋捶,春花似錦痛悯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至巡扇,卻和暖如春扭仁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背厅翔。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工乖坠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人刀闷。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓熊泵,卻偏偏與公主長得像,于是被迫代替她去往敵國和親甸昏。 傳聞我的和親對象是個殘疾皇子顽分,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評論 2 354

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