為了增加應(yīng)用的閱讀體驗(yàn)，一種友好的圖文排版必不可少。查看市場(chǎng)上各類應(yīng)用疮跑，大體上有兩種方式來(lái)展現(xiàn)圖文，一種是很簡(jiǎn)單的方式凸舵，即加載H5頁(yè)祸挪，另一種便是根據(jù)事先約定好的數(shù)據(jù)格式使用TableView來(lái)進(jìn)行展現(xiàn)。使用第二種方式為了讓文字段落更加優(yōu)美更具多樣性贞间，也不得用到CoreText贿条。
這兩天查看分析了下蟬游記的圖文排版，忍不住寫了一個(gè)Demo增热。
瀏覽蟬游記圖文展現(xiàn)界面可以發(fā)現(xiàn)整以，其中圖文是以一定格式進(jìn)行排版的。如下圖中藍(lán)線框所示峻仇，它是以幾種類型的cell來(lái)組合展示圖文公黑，比如第一個(gè)框中的cell包含一個(gè)標(biāo)題和一段文字，第二個(gè)框中的cell包含圖片段落文字摄咆。當(dāng)然凡蚜，定義好cell類型之后，還需根據(jù)數(shù)據(jù)的具體格式來(lái)進(jìn)行展現(xiàn)吭从，比如服務(wù)器下發(fā)的某條數(shù)據(jù)僅包含一個(gè)標(biāo)題并沒有文字段落朝蜘，那第一個(gè)框中的cell則只展現(xiàn)標(biāo)題，總之每個(gè)cell需根據(jù)數(shù)據(jù)內(nèi)容調(diào)整布局涩金。
蟬游記圖文中的段落文字十分美觀谱醇，免不了使用CoreText，CoreText的渲染原理可以查閱相關(guān)文檔步做，相關(guān)開源框架Github上也不少副渴，請(qǐng)自行搜索。同時(shí)全度，展現(xiàn)優(yōu)美的文字煮剧，需要加入第三方字體庫(kù)，怎么加入請(qǐng)查看相關(guān)資料将鸵。
為了更靈活組裝圖文布局勉盅，cell的種類可以更小粒度定義。本Demo作為參考咨堤，僅定義三種基本的cell類型菇篡，分別是標(biāo)題cell、圖片cell以及文字段落cell一喘，如下圖藍(lán)線框所示驱还。通過這三種基本的cell即可組合很友好的圖文了嗜暴，當(dāng)然，如果頁(yè)面元素較復(fù)雜议蟆，可以定義出更多豐富的cell類型闷沥。相比蟬游記的cell類型定義，我想咐容，cell粒度越小越好舆逃，比如某條數(shù)據(jù)中只包含圖片或者只包含文字時(shí)，就不需去特意調(diào)整cell的布局戳粒。
定義好了三種cell路狮，就需要定義一下數(shù)據(jù)格式了。服務(wù)器以定義好的數(shù)據(jù)格式下發(fā)蔚约，客戶端解析后進(jìn)行圖文展現(xiàn)奄妨。數(shù)據(jù)采用JSON格式下發(fā)，擬定某條數(shù)據(jù)的格式如下：
{
"type":xx,
"info":{
"param1":"xxx",
"param1":"xxx",
...
}
}
根據(jù)三種cell類型的定義苹祟，本Demo中對(duì)應(yīng)的數(shù)據(jù)格式分別如下：
{
"type":0, // 標(biāo)題
"info":{
"title":"xxx",
}
}
{
"type":1,
"info":{
"text":"xxx", // 鍛煉文字
"user":"xxx", // 用戶名砸抛，如果有則會(huì)以@的方式顯示，無(wú)則不展示
...
}
}
{
"type":2, // 圖片
"info":{
"image":"http://xx", //圖片鏈接
"ratio":xx, // 圖片高寬比
}
}
那么树枫，服務(wù)器下發(fā)的是一個(gè)多條基本數(shù)據(jù)組成的列表直焙，如：
[{
"type":0,
"info":{
"title":"xxx",
}
},
{
"type":2, // 圖片
"info":{
"image":"http://xx", //圖片鏈接
"ratio":xx, // 圖片高寬比
}
},
...
]
這些工作確定好后，就可開始編寫代碼了砂轻。另外奔誓，為了實(shí)現(xiàn)蟬游記的導(dǎo)航欄變化效果，需要生成對(duì)應(yīng)的高斯模糊圖片舔清，具體實(shí)現(xiàn)細(xì)節(jié)丝里，可參考本文 demo源碼 吧。下圖為demo截圖（有需要的朋友請(qǐng)下載體驗(yàn)哦）：
本Demo僅實(shí)現(xiàn)了圖文排版的展開体谒，相對(duì)比較簡(jiǎn)單，但對(duì)于圖文編輯并怎么保存數(shù)據(jù)以及怎樣同步到服務(wù)器就不是這么簡(jiǎn)單了臼婆，分析相關(guān)應(yīng)用目前圖文編輯有使用TableView來(lái)插入圖片文字的抒痒，有使用CoreText框架的，有使用WebView來(lái)實(shí)現(xiàn)的颁褂。
（寫于2016/03/06故响，現(xiàn)同步到簡(jiǎn)書）
