手機APP開發是如何控制文本樣式的(de)

我們上網不管在手機端還(hái)是PC端，能夠看到精美(měi)的(de)網頁，是因爲浏覽器支持CSS樣式，但是在APP開發工具裏面，文本樣式的(de)控制還(hái)停留在字号大(dà)小層面上，CSS可(kě)以簡單控制的(de)文本樣式想要在APP裏面顯示的(de)一樣漂亮并非易事。而如今手機、平闆已成爲我們主要的(de)閱讀設備，隻要涉及資訊閱讀的(de)APP開發都需要解決這(zhè)一問題，本篇就簡單介紹下(xià)主流APP開發時(shí)是如何來(lái)控制文本樣式的(de)：

一、簡單粗暴的(de)使用(yòng)開發工具控制

文本展示最簡單粗暴的(de)就是用(yòng)程序語言直接呈現文本，原生iOS應用(yòng)的(de)文本樣式控制缺少常用(yòng)的(de)文字行間距控制，而且隻能以整體區(qū)域爲單位控制樣式。而Android開發工具下(xià)使用(yòng)TextView理(lǐ)論上可(kě)以寫出更多(duō)的(de)文本樣式，但也(yě)比較難控制。使用(yòng)程序語言來(lái)實現文本樣式隻能适和(hé)較少文字的(de)展示，當需要展示較多(duō)文字時(shí)，則會相當難看。

 

二、H5承載頁 + WebView

鑒于原生開發工具在文本樣式上控制的(de)局限性，行業内成熟的(de)APP開發都采用(yòng)了(le)Native+Web的(de)混合視圖，即在APP中嵌入浏覽器框架，加載HTML網頁。這(zhè)樣就可(kě)以完美(měi)的(de)呈現富文本樣式。這(zhè)樣的(de)方式需要建立獨立的(de)H5站點，考慮到資訊頁面一般都需要以鏈接的(de)方式分(fēn)享到站外，所以大(dà)都數閱讀類的(de)APP都是同時(shí)開發H5站和(hé)APP，利用(yòng)一個(gè)後台提供内容給H5站和(hé)APP。

在APP中嵌入浏覽器加載内容唯一的(de)缺點就是加載速度相對(duì)慢(màn)一些。但普通(tōng)用(yòng)戶基本上看不出區(qū)别，所以是當前最流行的(de)實現方式;

 

三、使用(yòng)DTCoreText等文字效果代碼類庫(iOS平台)

H5承載頁 + 内嵌浏覽器框架的(de)方式雖然可(kě)以完美(měi)的(de)呈現文本内容，但加載速度會慢(màn)一些，而且展示風格會有一點點突兀;那麽還(hái)有一種方法就是使用(yòng)DTCoreText;

DTCoreText 是一個(gè)功能十分(fēn)強大(dà)的(de)文字效果代碼類庫。在UITextView上實現十分(fēn)豐富的(de)文字效果，包括文字大(dà)小、顔色、字體、下(xià)劃線，鏈接，給文字加上圖片、視頻(pín)，文字任意間距等等。實現類似于CSS網頁的(de)文字效果。

 

以上分(fēn)享希望能給APP開發的(de)産品經理(lǐ)或設計師對(duì)這(zhè)方面的(de)知識有個(gè)初步了(le)解。