YYText之圖文混排

YYText之圖文混排

1.圖文混排的原理?

我覺(jué)得,查看代碼前彬向,最重要的一件事是知道圖文混排到底是怎么實(shí)現(xiàn)的。

核心思想:生成富文本時(shí)把攻冷,一張圖片先用一個(gè)占位符代替娃胆。實(shí)際渲染時(shí),圖片占位符的渲染處理會(huì)更多一些等曼。

根據(jù)這個(gè)原理里烦,我們開(kāi)始深入的學(xué)習(xí)。本文Demo基于YYKitExample涉兽。

2.YYTextAttachmentExample

我們先看YYTextAttachmentExample.m中的代碼實(shí)現(xiàn)招驴。self.view上有3個(gè)富文本,并且末尾都帶了圖片枷畏。我們可以看出别厘,設(shè)置富文本的核心方法如下,深入看看其中做了什么拥诡。

+ (NSMutableAttributedString *)attachmentStringWithContent:(id)content
                                               contentMode:(UIViewContentMode)contentMode
                                            attachmentSize:(CGSize)attachmentSize
                                               alignToFont:(UIFont *)font
                                                 alignment:(YYTextVerticalAlignment)alignment;

結(jié)合代碼運(yùn)行流程触趴,我們分為以下幾個(gè)部分:

2.1 生成NSMutableAttributedString實(shí)例

初始化時(shí)提供了一個(gè)占位符@"\uFFFC"氮发,用于代替圖片信息。

2.2 YYTextAttachment

說(shuō)到圖文混排冗懦,必然會(huì)用到NSTextAttachment爽冕,它是NSAttributedString的類簇,設(shè)置富文本時(shí)對(duì)應(yīng)的key是NSAttachmentAttributeName披蕉。簡(jiǎn)而言之颈畸,我們給一個(gè)NSAttributedString實(shí)例添加圖片時(shí),就是將image實(shí)例作為以上key的value没讲。YYText自身實(shí)現(xiàn)了一個(gè)YYTextAttachment眯娱,作者是這么介紹的:

YYTextAttachmentNSAttributedString的類簇,它的實(shí)例作為富文本key屬性YYTextAttachmentAttributeName的value爬凑。當(dāng)富文本包含YYTextAttachment時(shí)徙缴,它會(huì)采用文本規(guī)則展示。比如嘁信,attachment的內(nèi)容是UIImage時(shí)于样,它會(huì)被繪制為CGContextattachment的內(nèi)容是UIViewCALayer時(shí)潘靖,它會(huì)被加入到text containerview層或layer層上穿剖。

2.3 YYTextRunDelegate

在這之前我們先要知道,NSAttributedString相比于NSString多了很多attribute的概念卦溢,比如下劃線携御、背景色等。每個(gè)字符都有一個(gè)字符區(qū)域既绕,渲染每個(gè)字符多種多樣的attributes都是在這個(gè)區(qū)域的基礎(chǔ)上的。轉(zhuǎn)換成代碼是什么意思呢涮坐?CoreText的為我們提供了這個(gè)體系:

CTFrame.jpg

NSAttributedString初始化后會(huì)生成CTFramesetter凄贩,CTFramesetter根據(jù)不同的CGPath生成對(duì)應(yīng)的CTFrame,一個(gè)CTFrame由多行CTLine組成袱讹,一個(gè)CTLine會(huì)包含多個(gè)CTRun(字形繪制的最小單元)疲扎。
結(jié)合之前說(shuō)的繪制的核心思想,可以這么理解:一行帶有文字和圖片的富文本捷雕,包含若干個(gè)CTRun繪制單元椒丧,圖片的繪制單元相對(duì)特殊一些。為什么呢救巷?因?yàn)?code>CoreText并不能直接將一個(gè)圖片轉(zhuǎn)換為CTRun來(lái)繪制壶熏,所以它先用占位符預(yù)留空間,而真正的圖片繪制是交給CoreGraphics完成的浦译。
問(wèn)題又來(lái)了棒假,CoreGraphics是如何拿到這些繪圖信息(descent溯职、ascent、width等)呢帽哑?到這終于引出了CTRunDelegate谜酒。我們?yōu)楦晃谋镜?code>kCTRunDelegateAttributeName屬性賦值一個(gè)CTRunDelegate實(shí)例,CoreText可以根據(jù)它拿到它內(nèi)部的屬性,如descent、ascent晓避、width等浊吏。

2.4 小結(jié)

通過(guò)以上3個(gè)步驟,一個(gè)富文本就生成了寓辱。其中涉及到了CoreText的許多類,尤其是NSTextAttachmentCTRunDelegate。還有碉输,富文本的文本結(jié)構(gòu)。詳細(xì)內(nèi)容亭珍,推薦《Text Programming Guide for iOS》

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末敷钾,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子肄梨,更是在濱河造成了極大的恐慌阻荒,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,270評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件众羡,死亡現(xiàn)場(chǎng)離奇詭異侨赡,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)粱侣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)羊壹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人齐婴,你說(shuō)我怎么就攤上這事油猫。” “怎么了柠偶?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,630評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵情妖,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我诱担,道長(zhǎng)毡证,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,906評(píng)論 1 295
  • 正文 為了忘掉前任蔫仙,我火速辦了婚禮料睛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己秦效,他們只是感情好雏蛮,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著阱州,像睡著了一般挑秉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上苔货,一...
    開(kāi)封第一講書(shū)人閱讀 51,718評(píng)論 1 305
  • 那天犀概,我揣著相機(jī)與錄音,去河邊找鬼夜惭。 笑死姻灶,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的诈茧。 我是一名探鬼主播产喉,決...
    沈念sama閱讀 40,442評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼敢会!你這毒婦竟也來(lái)了曾沈?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,345評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤鸥昏,失蹤者是張志新(化名)和其女友劉穎塞俱,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體吏垮,經(jīng)...
    沈念sama閱讀 45,802評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡障涯,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了膳汪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唯蝶。...
    茶點(diǎn)故事閱讀 40,117評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖遗嗽,靈堂內(nèi)的尸體忽然破棺而出生棍,到底是詐尸還是另有隱情,我是刑警寧澤媳谁,帶...
    沈念sama閱讀 35,810評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站友酱,受9級(jí)特大地震影響晴音,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜缔杉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評(píng)論 3 331
  • 文/蒙蒙 一锤躁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧或详,春花似錦系羞、人聲如沸郭计。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,011評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)昭伸。三九已至,卻和暖如春澎迎,著一層夾襖步出監(jiān)牢的瞬間庐杨,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,139評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工夹供, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留灵份,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,377評(píng)論 3 373
  • 正文 我出身青樓哮洽,卻偏偏與公主長(zhǎng)得像填渠,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鸟辅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評(píng)論 2 355

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

  • 系列文章: CoreText實(shí)現(xiàn)圖文混排 CoreText實(shí)現(xiàn)圖文混排之點(diǎn)擊事件 CoreText實(shí)現(xiàn)圖文混排之文...
    老司機(jī)Wicky閱讀 40,170評(píng)論 221 432
  • CoreText是一個(gè)進(jìn)階的比較底層的布局文本和處理字體的技術(shù)氛什,CoreText API在OS X v10.5 和...
    smalldu閱讀 13,454評(píng)論 18 129
  • 最近在網(wǎng)上看了一些大牛的文章,自己也試著寫(xiě)了一下剔桨,感覺(jué)圖文混排真的很強(qiáng)大屉更。 廢話不多說(shuō),開(kāi)始整 先上效果圖跟代碼洒缀,...
    AllureJM閱讀 994評(píng)論 0 1
  • blog.csdn.net CoreText實(shí)現(xiàn)圖文混排 - 博客頻道 CoreText實(shí)現(xiàn)圖文混排 也好久沒(méi)來(lái)寫(xiě)...
    K_Gopher閱讀 603評(píng)論 0 0
  • 1,早上看了菜頭以前寫(xiě)的一篇文章《怪物都在北京上海深圳》瑰谜,讀完后我扭了扭頭想著,我不就在深圳咩树绩。說(shuō)起來(lái)我來(lái)深圳已經(jīng)...
    撩姬s閱讀 287評(píng)論 0 7