iOS圖片圓角優化

轉載請注明出處:http://www.olinone.com/

Hi,又到了更新博客的時間,很高興再次與大家見面。最近,關于圖片圓角的話題討論非常激烈,出現了許多好的文章。恰逢工作需要,用到了大量圓角圖片。然而,系統圓角會導致離屏渲染的問題,出于性能考慮,于是有了圖片圓角渲染工具HJCornerRadius,其最大優勢在于使用簡單,一行搞定圖片圓角

imageview.aliCornerRadius = 5.0f;

核心思想就是使用圓角圖片替換系統圓角。實際使用時,確保layer對象的masksToBounds屬性為NO

imageview.layer.masksToBounds = NO

支持pod方式安裝,如果你在實際使用中遇到什么問題,歡迎在文章后面跟我留言

pod 'HJCornerRadius', :git => "https://github.com/panghaijiao/HJCornerRadius.git"

當然,本文的目的不是介紹如何使用該工具,而是想跟大家分享開發時用到的幾點設計思想

自觀察的巧妙應用

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

還記得我在文章《“自釋放”在iOS開發中的應用》 中提到的實現自釋放的三種方式嗎?其中一種方式就是動態屬性觀察者——通過創建一個動態屬性KVO被觀察對象的某一屬性,從而達到自監控的目的。

通過創建動態屬性觀察者HJImageObserver,監聽UIImageView的image屬性,當image發生變化時,能夠立即觸發圓角圖片的生成,從而達到自動實現圓角圖片替換的目的,具體實現可以參考源碼HJCornerRadius

RunLoop的適當切換

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

此外,由于系統原因,對于像UITableViewCell的UIImageView,第一次創建賦圖時,可能無法獲取UIImageView視圖Layer的圖片,此時,可以通過切換異步RunLoop達到延時渲染的目的

眾所周知,截圖渲染的邏輯是可以運行在工作線程,但是本工具并沒有把它們放在工作線程執行,因為放在工作線程會有延遲,從而導致圖片閃爍的現象

具體截圖渲染代碼如下

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];

});

}

經過實際測試驗證,效果還是比較理想的,即使需要顯示大量圓角圖片,顯示幀數也可以穩定在50幀以上。CPU消耗影響較小,以iPhone6測試顯示,CPU實際消耗上漲不會超過5%,屬于合理范圍之內

自從發表博客《生命不息,折騰不止——致敬逝去的2015》后,收到了許多朋友的關注和問候,在此謝謝大家的祝福。新的一年里,希望各位一如既往支持小生,多多為我點贊,本人也會更加努力,爭取為大家奉獻更多更好的東西。你可以follow本人的Github,也可以關注我的個人微博,再次感謝你的來訪

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

推薦閱讀更多精彩內容

  • 關于圖片圓角的,用到了大量圓角圖片。然而,系統圓角會導致離屏渲染的問題,出于性能考慮,于是有了圖片圓角渲染工具HJ...
    追風箏的熒火蟲閱讀 1,048評論 1 2
  • 轉載:http://www.lxweimin.com/p/32fcadd12108 每個UIView有一個伙伴稱為l...
    F麥子閱讀 6,272評論 0 13
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,545評論 6 30
  • 每個UIView有一個伙伴稱為layer,一個CALayer。UIView實際上并沒有把自己畫到屏幕上;它繪制本身...
    shenzhenboy閱讀 3,133評論 0 17
  • //畫一個圓角矩形//簡單的說就是8個點,分別是第邊的中點(不局限于中點,只要比半徑大就好)加各頂點就好,后面10...
    追風箏的熒火蟲閱讀 340評論 0 1