年前寫新功能的時候遇到了一個特殊的TextView圖文混排需求汽绢,使用安卓原生實現(xiàn)起來相對麻煩晌坤,網(wǎng)上也找不到現(xiàn)成的工具類桌粉,于是就自己鉆研了一套實現(xiàn)方案在這里共享給大家芋膘,轉(zhuǎn)載請注明出處鳞青。
工具實現(xiàn)了圖片和文字高度一致對齊,同時也解決了TextView設置行間距導致圖片下沉等控件級別的bug索赏。Demo效果如下圖(代碼鏈接會放在文末)盼玄,由于工具類的核心是使用 ImageGetter 來實現(xiàn)的,因此這個工具類也能支持網(wǎng)絡圖片的圖文混排:
如上圖未被解析的文案所示潜腻,工具類可以識別兩種占位符:一種是自定義的本地圖片占位符(需要開發(fā)者自行定義占位符內(nèi)容和占位符所對應的本地圖片id)埃儿;另一種是直接插入 ImageGetter 可直接識別的 <img src=""/> 標簽,讓 ImageGetter 直接下載網(wǎng)絡圖片并展示在TextView之中融涣。
至于工具類如何使用童番,主要通過三行代碼就可以實現(xiàn)圖文混排:
另外,文案中圖片的高度也可以通過TextView自身的屬性進行微調(diào):當 TextView 的屬性includeFontPadding 設置為 false 的時候威鹿,文案的圖片高度會稍微縮小剃斧,反之則會增加。當我們的圖文混排工具類運用到數(shù)字或英文字母與圖片混排的時候忽你,我們可以將 includeFontPadding 置為 false幼东,讓圖片的高度略微變小一些和數(shù)字高度對齊,確保圖文混排樣式的整體美觀科雳。
雖然工具類已經(jīng)盡善盡美根蟹,但目前還有兩個遺留的問題:
1、如果文字行間距過大(例如行間距在15dp以上)文字中的圖片會出現(xiàn)模糊現(xiàn)象糟秘,主要原因還是圖片 DrawBitmap 的時候沒有限定寬高的原因简逮,導致最終繪制上去的圖片等比例拉伸變糊了,這個問題后續(xù)會優(yōu)化尿赚。
2散庶、如果圖文混排中包含網(wǎng)絡高清大圖,并且 TextView 又設置了行間距凌净,那么此文案在某個設備上首次展示的時候就需要花費較長的時間悲龟。這個問題優(yōu)化起來比較費勁。因為帶有行間距的TextView 直接進行圖文混排會出現(xiàn)圖片下沉的 bug泻蚊,為了解決這個問題躲舌,就需要先將文案中所有的圖片下載下來進行第一次測量,確定每個圖片處于哪一行性雄,對圖片高度進行正確的處理之后才能展示給用戶没卸,如果此時用戶網(wǎng)絡不佳羹奉,TextView 文案就可能長時間處于空白狀態(tài)。
最后附上Demo的github鏈接约计,希望對遇到相關需求的開發(fā)者有所幫助:https://github.com/liuchenguangqnm/richTextTool/tree/master