一行代碼讓TextView中ImageSpan支持Gif(一)----輕松實(shí)現(xiàn)TextView中g(shù)if圖文混排

前言

利用ImageSpan實(shí)現(xiàn)TextView的圖文混排的教程數(shù)不勝數(shù)悦施,但是當(dāng)?shù)腎mageSpan中的drawable是一張動(dòng)圖的時(shí)候,卻往往發(fā)現(xiàn)這張圖并沒有像預(yù)期一樣動(dòng)起來笆环。
我在做聊天功能的時(shí)候也碰到了這個(gè)問題,網(wǎng)上搜索半天,大體的思路倒是有了啼器,不過并沒有發(fā)現(xiàn)一個(gè)較為全面和完整的總結(jié)及代碼實(shí)現(xiàn)。
于是自己寫了一個(gè)使用極其簡(jiǎn)單的方法并分析總結(jié)一下實(shí)現(xiàn)的思路以及實(shí)現(xiàn)過程中碰到的坑俱萍,好讓要做同樣功能的同學(xué)少走彎路端壳。

ScreenShot

emojiSp.gif

解決方案

先上解決方案,有興趣的可以繼續(xù)往下看我的分析

項(xiàng)目地址 https://github.com/sunhapper/SpEditTool
用法說明 SpEditTool使用指南
歡迎star枪蘑,提PR损谦、issue

  • 先引入上面的庫SpEditTool
  • 使用其中GifTextUtil.setText(TextView textView,CharSequence text)代替TextView的setText

GifTextUtil.setText方法會(huì)將TextView和包含動(dòng)圖的Spannable字符串綁定并在動(dòng)圖刷新時(shí)刷新TextView以實(shí)現(xiàn)gif的圖文混排

重要說明

  • 這段代碼功能只是幫助有g(shù)if圖文混排的TextView設(shè)置回調(diào)使其動(dòng)起來,至于如何利用Glide或者GifDrawable產(chǎn)生一個(gè)可以動(dòng)的drawable,請(qǐng)看一行代碼讓TextView中ImageSpan支持Gif(三)
  • 個(gè)人能力有限,一行代碼實(shí)現(xiàn)不了drawable復(fù)用場(chǎng)景(RecyclerView,ListView及多個(gè)TextView使用同一個(gè)Drawable對(duì)象)下的TextView刷新,但解決方案會(huì)在一行代碼讓TextView中ImageSpan支持Gif(四)中給出,只需要多實(shí)現(xiàn)一個(gè)接口,有需要的可以看看
  • 只對(duì)ImageSpan及其子類添加回調(diào)

原理分析

動(dòng)圖不刷新的原因

動(dòng)圖只是一個(gè)drawable,并不知道是哪個(gè)View持有了它岳颇,所以drawable只能刷新它自己照捡,而外部的View沒有刷新的話顯示在屏幕上的還是drawable刷新之前的樣子。

解決方法

  • 最初寫這個(gè)功能的時(shí)候话侧,項(xiàng)目時(shí)間緊栗精,所以直接寫了一個(gè)每隔100ms自己刷新一次的自定義TextView,這種方式稍顯粗暴瞻鹏,如果文本內(nèi)容不包括gif的話TextView還是會(huì)自己刷新悲立,浪費(fèi)CPU資源
  • 好一些的方法,drawable可以設(shè)置一個(gè)Drawable.Callback,drawable刷新自己的時(shí)候會(huì)回調(diào)invalidateDrawable,可以在這個(gè)方法中刷新TextView

一個(gè)不完善的思路

最初的思路來源于android平臺(tái)TextView使用ImageSpan展示GIF圖片 ,雖然最終實(shí)現(xiàn)的時(shí)候發(fā)現(xiàn)這篇文章的代碼大部分是紙上談兵,不能真正完成功能,不過思路還是給了我很大的啟示,對(duì)作者表示感謝

簡(jiǎn)單總結(jié)下這篇文章的思路

  • 繼承TextView/EditText
  • 覆蓋setText方法,對(duì)新設(shè)置的文本,遍歷其中的ImageSpan,對(duì)其中的drawable設(shè)置刷新回調(diào)
  • 在setText方法中設(shè)置SpanWatcher,監(jiān)聽I(yíng)mageSpan的移除,在ImageSpan移除時(shí)移除其中drawable的回調(diào)
  • 在drawable刷新回調(diào)中使用removeSpan,setSpan去刷新TextView

錯(cuò)誤分析

  • 文章中在super.setText之前設(shè)置SpanWatcher,然而SpanWatcher繼承自NoCopySpan,在setText時(shí)不會(huì)被復(fù)制到TextView中的Spannale對(duì)象中,所以設(shè)置永遠(yuǎn)不會(huì)成功.
  • removeSpan是個(gè)耗時(shí)操作,文章中在setText和刷新時(shí)都會(huì)調(diào)用多次removeSpan,插入的ImageSpan一多就會(huì)非承虏卡

改進(jìn)

  • 不使用繼承,因?yàn)閖ava的單繼承,所以個(gè)人建議除非必要不在要給別人使用的代碼中使用繼承
  • 在setText之后,取出TextView的Spannable再對(duì)其設(shè)置SpanWatcher,保證設(shè)置成功
  • 取消已經(jīng)被移除的drawable的監(jiān)聽不使用removeSpan,而只是將監(jiān)聽設(shè)置disable,減少耗時(shí)
  • 直接刷新TextView,而不是先removeSpan再setSpan

總結(jié)

讓TextView中的gif動(dòng)起來,一句話總結(jié)就是先設(shè)置drawable的Drawable.Callback,然后在invalidateDrawable回調(diào)中刷新TextView,使用GifTextUtil.setText一行代碼就可以實(shí)現(xiàn)這一功能了
具體如何實(shí)現(xiàn)請(qǐng)看一行代碼讓TextView中ImageSpan支持Gif(二)

索引

一行代碼讓TextView中ImageSpan支持Gif(一)
第一篇給出解決方案并分析整體思路

一行代碼讓TextView中ImageSpan支持Gif(二)
第二篇對(duì)實(shí)現(xiàn)中的細(xì)節(jié)和踩過的坑進(jìn)行說明

一行代碼讓TextView中ImageSpan支持Gif(三)
第三篇介紹如何使用android-gif-drawable和Glide實(shí)現(xiàn)遠(yuǎn)程gif圖片在TextView中的圖文混排

一行代碼讓TextView中ImageSpan支持Gif(四)
第四篇介紹在RecyclerView等需要drawable復(fù)用的場(chǎng)景下的gif動(dòng)圖顯示

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末粟耻,一起剝皮案震驚了整個(gè)濱河市业簿,隨后出現(xiàn)的幾起案子非剃,更是在濱河造成了極大的恐慌慈参,老刑警劉巖玩讳,帶你破解...
    沈念sama閱讀 210,978評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異嚼贡,居然都是意外死亡熏纯,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門粤策,熙熙樓的掌柜王于貴愁眉苦臉地迎上來樟澜,“玉大人,你說我怎么就攤上這事叮盘≈确。” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵柔吼,是天一觀的道長(zhǎng)毒费。 經(jīng)常有香客問我,道長(zhǎng)愈魏,這世上最難降的妖魔是什么觅玻? 我笑而不...
    開封第一講書人閱讀 56,324評(píng)論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮培漏,結(jié)果婚禮上溪厘,老公的妹妹穿的比我還像新娘。我一直安慰自己牌柄,他們只是感情好畸悬,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著珊佣,像睡著了一般蹋宦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上咒锻,一...
    開封第一講書人閱讀 49,741評(píng)論 1 289
  • 那天妆档,我揣著相機(jī)與錄音,去河邊找鬼虫碉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛胸梆,可吹牛的內(nèi)容都是我干的敦捧。 我是一名探鬼主播,決...
    沈念sama閱讀 38,892評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼碰镜,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼兢卵!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起绪颖,我...
    開封第一講書人閱讀 37,655評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤秽荤,失蹤者是張志新(化名)和其女友劉穎甜奄,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體窃款,經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡课兄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了晨继。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片烟阐。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖紊扬,靈堂內(nèi)的尸體忽然破棺而出蜒茄,到底是詐尸還是另有隱情,我是刑警寧澤餐屎,帶...
    沈念sama閱讀 34,254評(píng)論 4 328
  • 正文 年R本政府宣布檀葛,位于F島的核電站,受9級(jí)特大地震影響腹缩,放射性物質(zhì)發(fā)生泄漏屿聋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3 312
  • 文/蒙蒙 一庆聘、第九天 我趴在偏房一處隱蔽的房頂上張望胜臊。 院中可真熱鬧,春花似錦伙判、人聲如沸象对。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽勒魔。三九已至,卻和暖如春菇曲,著一層夾襖步出監(jiān)牢的瞬間冠绢,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評(píng)論 1 264
  • 我被黑心中介騙來泰國打工常潮, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留弟胀,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2 360
  • 正文 我出身青樓喊式,卻偏偏與公主長(zhǎng)得像孵户,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子岔留,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2 348

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