iOS圖片圓角優(yōu)化(一)

關(guān)于圖片圓角的芍瑞,用到了大量圓角圖片晨仑。然而,系統(tǒng)圓角會導(dǎo)致離屏渲染的問題,出于性能考慮洪己,于是有了圖片圓角渲染工具HJCornerRadius妥凳,其最大優(yōu)勢在于使用簡單,一行搞定圖片圓角

imageview.aliCornerRadius = 5.0f;
核心思想就是使用圓角圖片替換系統(tǒng)圓角答捕。實際使用時逝钥,確保layer對象的masksToBounds屬性為NO

imageview.layer.masksToBounds = NO
支持pod方式安裝

pod 'HJCornerRadius', :git => "https://github.com/panghaijiao/HJCornerRadius.git"
當(dāng)然,本文的目的不是介紹如何使用該工具拱镐,而是想跟大家分享開發(fā)時用到的幾點設(shè)計思想

自觀察的巧妙應(yīng)用

既然要生成圓角圖片艘款,首先要解決生成時機問題∥掷牛可能會有朋友想到swizzle類UIImageView的setImage方法哗咆,但我個人并不推薦,畢竟Swizzle類方法影響范圍太廣益眉,對于大型開發(fā)團隊岳枷,出問題后很難排查定位問題所在。定義UIImageView子類呜叫?實用性不強空繁!

還記得我在文章《“自釋放”在iOS開發(fā)中的應(yīng)用》 中提到的實現(xiàn)自釋放的三種方式嗎?其中一種方式就是動態(tài)屬性觀察者——通過創(chuàng)建一個動態(tài)屬性KVO被觀察對象的某一屬性朱庆,從而達到自監(jiān)控的目的盛泡。

通過創(chuàng)建動態(tài)屬性觀察者HJImageObserver,監(jiān)聽UIImageView的image屬性娱颊,當(dāng)image發(fā)生變化時傲诵,能夠立即觸發(fā)圓角圖片的生成,從而達到自動實現(xiàn)圓角圖片替換的目的箱硕,具體實現(xiàn)可以參考源碼 HJCornerRadius

RunLoop的適當(dāng)切換

細(xì)心的朋友可能注意到拴竹,本工具并不是直接渲染原始Image對象,而是先截取UIImageView視圖Layer生成的Image剧罩,然后再做渲染栓拜。原因很簡單,因為UIImageView呈現(xiàn)方式涉及多種ContentMode惠昔,通過渲染UIImageView視圖Layer生成的圖片可以巧妙的解決UIImageView顯示模式的問題

此外幕与,由于系統(tǒng)原因,對于像UITableViewCell的UIImageView镇防,第一次創(chuàng)建賦圖時啦鸣,可能無法獲取UIImageView視圖Layer的圖片,此時来氧,可以通過切換異步RunLoop達到延時渲染的目的

眾所周知诫给,截圖渲染的邏輯是可以運行在工作線程香拉,但是本工具并沒有把它們放在工作線程執(zhí)行,因為放在工作線程會有延遲中狂,從而導(dǎo)致圖片閃爍的現(xiàn)象

具體截圖渲染代碼如下

UIGraphicsBeginImageContextWithOptions(self.originImageView.bounds.size, NO, [UIScreen mainScreen].scale);
CGContextRef currnetContext = UIGraphicsGetCurrentContext();
CGContextAddPath(currnetContext, [UIBezierPath bezierPathWithRoundedRect:self.originImageView.bounds cornerRadius:self.cornerRadius].CGPath);
CGContextClip(currnetContext);
[self.originImageView.layer renderInContext:currnetContext];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

if ([image isKindOfClass:[UIImage class]]) {
    image.aliCornerRadius = YES;
    self.originImageView.image = image;
} else {
    dispatch_async(dispatch_get_main_queue(), ^{
        [self updateImageView];
    });
}

經(jīng)過實際測試驗證凫碌,效果還是比較理想的,即使需要顯示大量圓角圖片吃型,顯示幀數(shù)也可以穩(wěn)定在50幀以上证鸥。CPU消耗影響較小僚楞,以iPhone6測試顯示勤晚,CPU實際消耗上漲不會超過5%,屬于合理范圍之內(nèi)

本文轉(zhuǎn)自:http://www.olinone.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末泉褐,一起剝皮案震驚了整個濱河市赐写,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌膜赃,老刑警劉巖挺邀,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異跳座,居然都是意外死亡端铛,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門疲眷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來禾蚕,“玉大人,你說我怎么就攤上這事狂丝』幌” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵几颜,是天一觀的道長倍试。 經(jīng)常有香客問我,道長蛋哭,這世上最難降的妖魔是什么县习? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮谆趾,結(jié)果婚禮上准颓,老公的妹妹穿的比我還像新娘。我一直安慰自己棺妓,他們只是感情好攘已,可當(dāng)我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著怜跑,像睡著了一般样勃。 火紅的嫁衣襯著肌膚如雪吠勘。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天峡眶,我揣著相機與錄音剧防,去河邊找鬼。 笑死辫樱,一個胖子當(dāng)著我的面吹牛峭拘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播狮暑,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼鸡挠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了搬男?” 一聲冷哼從身側(cè)響起拣展,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎缔逛,沒想到半個月后备埃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡褐奴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年按脚,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片敦冬。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡辅搬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出匪补,到底是詐尸還是另有隱情伞辛,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布夯缺,位于F島的核電站蚤氏,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏踊兜。R本人自食惡果不足惜竿滨,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望捏境。 院中可真熱鬧于游,春花似錦、人聲如沸垫言。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽筷频。三九已至蚌成,卻和暖如春前痘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背担忧。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工芹缔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瓶盛。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓最欠,卻偏偏與公主長得像,于是被迫代替她去往敵國和親惩猫。 傳聞我的和親對象是個殘疾皇子芝硬,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,627評論 2 350

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

  • 轉(zhuǎn)載:http://www.reibang.com/p/32fcadd12108 每個UIView有一個伙伴稱為l...
    F麥子閱讀 6,170評論 0 13
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜帆锋,今天將帶大家一窺ios動畫全貌吵取。在這里你可以看...
    每天刷兩次牙閱讀 8,471評論 6 30
  • 轉(zhuǎn)載請注明出處:http://www.olinone.com/ Hi禽额,又到了更新博客的時間锯厢,很高興再次與大家見面。...
    龐海礁的個人空間閱讀 1,591評論 1 21
  • 每個UIView有一個伙伴稱為layer脯倒,一個CALayer实辑。UIView實際上并沒有把自己畫到屏幕上;它繪制本身...
    shenzhenboy閱讀 3,091評論 0 17
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜藻丢,今天將帶大家一窺iOS動畫全貌剪撬。在這里你可以看...
    F麥子閱讀 5,104評論 5 13