iOS 專(zhuān)用圖層學(xué)習(xí)-CATextLayer

CATextLayer

用戶(hù)界面是無(wú)法從一個(gè)單獨(dú)的圖片里面構(gòu)建的惋增。一個(gè)設(shè)計(jì)良好的圖標(biāo)能夠很好地表現(xiàn)一個(gè)按鈕或控件的意圖忽你,不過(guò)你遲早都要需要一個(gè)不錯(cuò)的老式風(fēng)格的文本標(biāo)簽。

如果你想在一個(gè)圖層里面顯示文字,完全可以借助圖層代理直接將字符串使用Core Graphics寫(xiě)入圖層的內(nèi)容(這就是UILabel的精髓)输瓜。如果越過(guò)寄宿于圖層的視圖,直接在圖層上操作芬萍,那其實(shí)相當(dāng)繁瑣尤揣。你要為每一個(gè)顯示文字的圖層創(chuàng)建一個(gè)能像圖層代理一樣工作的類(lèi),還要邏輯上判斷哪個(gè)圖層需要顯示哪個(gè)字符串柬祠,更別提還要記錄不同的字體北戏,顏色等一系列亂七八糟的東西。

萬(wàn)幸的是這些都是不必要的瓶盛,Core Animation提供了一個(gè)CALayer的子類(lèi)CATextLayer最欠,它以圖層的形式包含了UILabel幾乎所有的繪制特性,并且額外提供了一些新的特性惩猫。

同樣芝硬,CATextLayer也要比UILabel渲染得快得多。很少有人知道在iOS 6及之前的版本轧房,UILabel其實(shí)是通過(guò)WebKit來(lái)實(shí)現(xiàn)繪制的拌阴,這樣就造成了當(dāng)有很多文字的時(shí)候就會(huì)有極大的性能壓力。而CATextLayer使用了Core text奶镶,并且渲染得非吵僭撸快。

用CATextLayer來(lái)實(shí)現(xiàn)一個(gè)UILabel

code


效果

注:CATextLayer的font屬性不是一個(gè)UIFont類(lèi)型厂镇,而是一個(gè)CFTypeRef類(lèi)型纤壁。這樣可以根據(jù)你的具體需要來(lái)決定字體屬性應(yīng)該是CGFontRef類(lèi)型還是CTFontRef類(lèi)型(Core Text字體)。同時(shí)字體大小也是fontSize屬性單獨(dú)設(shè)置捺信,因?yàn)镃TFontRef和CGFontRef并不像UIFont一樣包含點(diǎn)大小酌媒。這個(gè)列子會(huì)告訴你如何將UIFont轉(zhuǎn)換成CGFontRef。

另外迄靠,CATextLayer的string屬性并不是NSString類(lèi)型秒咨,而是id類(lèi)型。這樣就可以用NSString和NSAttributedString來(lái)制定文本了(NSAttributedString并不是NSString的子類(lèi),它是NSObject的子類(lèi)并且實(shí)現(xiàn)了NSCopying, NSMutableCopying, NSSecureCoding)掌挚。屬性化字符串是iOS來(lái)渲染字體風(fēng)格的機(jī)制雨席,他以特定的方式來(lái)決定指定范圍內(nèi)的字符串的原始信息,比如字體吠式、顏色陡厘、字重抽米、斜體等。

富文本

iOS 6中雏亚,Apple給UILabel和其他UIKit文本視圖添加了直接的屬性化字符串的支持缨硝,應(yīng)該說(shuō)這是一個(gè)很方便的特性。不過(guò)事實(shí)上從iOS3.2開(kāi)始CATextLayer就已經(jīng)支持屬性化字符串了罢低。這樣的話查辩,如果你想要支持更低版本的iOS系統(tǒng),CATextLayer無(wú)疑是你向界面中增加富文本的好辦法网持,而且也不用去跟復(fù)雜的Core Text打交道宜岛,也省了用UIWebView的麻煩。

讓我們編輯一下示例使用到NSAttributedString(見(jiàn)清單6.3).iOS 6及以上我們可以用新的NSTextAttributeName實(shí)例來(lái)設(shè)置我們的字符串屬性功舀,但是練習(xí)的目的是為了演示在iOS 5及以下萍倡,所以我們用了Core Text,也就是說(shuō)你需要把Core Text framework添加到你的項(xiàng)目中辟汰。否則列敲,編譯器是無(wú)法識(shí)別屬性常量的。

其實(shí)iOS7給我們帶了新的內(nèi)容:TextKit來(lái)實(shí)現(xiàn)富文本等相應(yīng)的功能帖汞。簡(jiǎn)單易用戴而。不會(huì)像Core Text繁瑣。

代碼
效果

行距和字距

有必要提一下的是翩蘸,由于繪制的實(shí)現(xiàn)機(jī)制不同(Core Text和WebKit)所意,用CATextLayer渲染和用UILabel渲染出的文本行距和字距也不是不盡相同的。

二者的差異程度(由使用的字體和字符決定)總的來(lái)說(shuō)挺小催首,但是如果你想正確的顯示普通便簽和CATextLayer就一定要記住這一點(diǎn)扶踊。

UILabel的替代品

我們已經(jīng)證實(shí)了CATextLayer比UILabel有著更好的性能表現(xiàn),同時(shí)還有額外的布局選項(xiàng)并且在iOS 5上支持富文本郎任。但是與一般的標(biāo)簽比較而言會(huì)更加繁瑣一些秧耗。如果我們真的在需求一個(gè)UILabel的可用替代品,最好是能夠在Interface Builder上創(chuàng)建我們的標(biāo)簽舶治,而且盡可能地像一般的視圖一樣正常工作绣版。

我們應(yīng)該繼承UILabel,然后添加一個(gè)子圖層CATextLayer并重寫(xiě)顯示文本的方法歼疮。但是仍然會(huì)有由UILabel的-drawRect:方法創(chuàng)建的空寄宿圖。而且由于CALayer不支持自動(dòng)縮放和自動(dòng)布局诈唬,子視圖并不是主動(dòng)跟蹤視圖邊界的大小韩脏,所以每次視圖大小被更改,我們不得不手動(dòng)更新子圖層的邊界铸磅。

我們真正想要的是一個(gè)用CATextLayer作為宿主圖層的UILabel子類(lèi)赡矢,這樣就可以隨著視圖自動(dòng)調(diào)整大小而且也沒(méi)有冗余的寄宿圖啦杭朱。

就像我們?cè)诘谝徽隆簣D層樹(shù)』討論的一樣,每一個(gè)UIView都是寄宿在一個(gè)CALayer的示例上吹散。這個(gè)圖層是由視圖自動(dòng)創(chuàng)建和管理的弧械,那我們可以用別的圖層類(lèi)型替代它么?一旦被創(chuàng)建空民,我們就無(wú)法代替這個(gè)圖層了刃唐。但是如果我們繼承了UIView,那我們就可以重寫(xiě)+layerClass方法使得在創(chuàng)建的時(shí)候能返回一個(gè)不同的圖層子類(lèi)界轩。UIView會(huì)在初始化的時(shí)候調(diào)用+layerClass方法画饥,然后用它的返回類(lèi)型來(lái)創(chuàng)建宿主圖層。

下面是繼承UILabel實(shí)現(xiàn)的浊猾,當(dāng)然可以把操作寫(xiě)成方法抖甘,自己在外部調(diào)用。

代碼
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末葫慎,一起剝皮案震驚了整個(gè)濱河市衔彻,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌偷办,老刑警劉巖艰额,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異爽篷,居然都是意外死亡悴晰,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)逐工,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)铡溪,“玉大人,你說(shuō)我怎么就攤上這事泪喊∽亓颍” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵袒啼,是天一觀的道長(zhǎng)哈扮。 經(jīng)常有香客問(wèn)我,道長(zhǎng)蚓再,這世上最難降的妖魔是什么滑肉? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮摘仅,結(jié)果婚禮上靶庙,老公的妹妹穿的比我還像新娘。我一直安慰自己娃属,他們只是感情好六荒,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布护姆。 她就那樣靜靜地躺著,像睡著了一般掏击。 火紅的嫁衣襯著肌膚如雪卵皂。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1 302
  • 那天砚亭,我揣著相機(jī)與錄音灯变,去河邊找鬼。 笑死钠惩,一個(gè)胖子當(dāng)著我的面吹牛柒凉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播篓跛,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼膝捞,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了愧沟?” 一聲冷哼從身側(cè)響起蔬咬,我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎沐寺,沒(méi)想到半個(gè)月后林艘,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡混坞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年狐援,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片究孕。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡啥酱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出厨诸,到底是詐尸還是另有隱情镶殷,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布微酬,位于F島的核電站绘趋,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏颗管。R本人自食惡果不足惜陷遮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望垦江。 院中可真熱鬧拷呆,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)梗逮。三九已至项秉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間慷彤,已是汗流浹背娄蔼。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留底哗,地道東北人岁诉。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像跋选,于是被迫代替她去往敵國(guó)和親涕癣。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

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