教你打造絢麗多彩的TextView
作者博客
http://www.lxweimin.com/u/dbae9ac95c78
源碼地址
https://github.com/WuLiFei/SpannableStringDemo
文章目錄
引語
了解SpannableString
ForegroundColorSpan
BackgroundColorSpan
RelativeSizeSpan
StrikethroughSpan
UnderlineSpan
SuperscriptSpan
SubscriptSpan
StyleSpan
ImageSpan
ClickableSpan
URLSpan
SpannableStringBuilder
彩蛋
1
引語
TeXtView大家應該都不陌生，文本展示控件嘛！ 就用TextView顯示普普通通的文本，OK，很簡單，Android入門的都會，沒入門的在門縫外看兩眼也都會，哈哈，開玩笑。那要是設計在開發需求中要求類似微信聊天表情一樣在TextView中插入表情圖片呢？ 有的小伙伴就會說啦，“TextView添加圖片我會啊，不就是drawableLeft，drawableRight嘛！” 嗯 ~ 也行，算是一種方法，可這有一個限制，首先，圖片只能在TextView的兩端，其次，兩端都只能設置一張圖片。要是圖片要在文本中間呢？無能為力了吧，要是你會使用SpannableString，這個問題也就不難解決了，簡直是Just So So。
所以，不論你是否正在經受以上問題的困擾，亦或是還沒有經歷到，請駐足仔細耐心的看完這篇簡短的文章。不僅能夠輕松實現以上設計需求，更能收獲其他各種炫酷的效果，也許就能幫助你解決現在你所困擾的問題。
2
了解SpannableString
SpannableString其實和String一樣，都是一種字符串類型，同樣TextView也可以直接設置SpannableString作為顯示文本，不同的是SpannableString可以通過使用其方法setSpan方法實現字符串各種形式風格的顯示,重要的是可以指定設置的區間，也就是為字符串指定下標區間內的子字符串設置格式。
setSpan(Object what, int start, int end, int flags)方法需要用戶輸入四個參數，what表示設置的格式是什么，可以是前景色、背景色也可以是可點擊的文本等等，start表示需要設置格式的子字符串的起始下標，同理end表示終了下標，flags屬性就有意思了，共有四種屬性：
Spanned.SPAN_INCLUSIVE_EXCLUSIVE從起始下標到終了下標，包括起始下標
Spanned.SPAN_INCLUSIVE_INCLUSIVE從起始下標到終了下標，同時包括起始下標和終了下標
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE從起始下標到終了下標，但都不包括起始下標和終了下標
Spanned.SPAN_EXCLUSIVE_INCLUSIVE從起始下標到終了下標，包括終了下標
下面我們一一解讀幾種Span常用的格式:
ForegroundColorSpan
ForegroundColorSpan，為文本設置前景色，效果和TextView的setTextColor()類似，實現方法如下：
設置的區間是9到字符串的最后，也就是圖中“淡藍色”三字。
BackgroundColorSpan
BackgroundColorSpan，為文本設置背景色，效果和TextView的setBackground()類，實現方法如下：
RelativeSizeSpan
RelativeSizeSpan，設置文字相對大小，在TextView原有的文字大小的基礎上，相對設置文字大小，實現方法如下：
StrikethroughSpan
StrikethroughSpan，為文本設置中劃線，也就是常說的刪除線，實現方法如下：
看到這有沒有小激動，分分鐘實現天貓打折優惠效果，有木有？
UnderlineSpan
UnderlineSpan，為文本設置下劃線，具體實現方法如下：
SuperscriptSpan
SuperscriptSpan，設置上標，具體實現方法如下：
從效果圖可以看出，被設置為上標的文字大小和下面的文本文字大小一樣，只要我們稍加修飾，結合RelativeSizeSpan設置小字體文本作為上標，分分鐘實現指數公式有木有，再也不用2^2+3^2=13這樣缺乏審美的數學公式了，是不是超實用？
SubscriptSpan
SubscriptSpan，設置下標，功能與設置上標類似，不做過多描述，具體實現方法如下：
StyleSpan
StyleSpan，為文字設置風格（粗體、斜體），和TextView屬性textStyle類似，實現方法如下：
ImageSpan
ImageSpan，設置文本圖片，實現方法如下：
這一個是不是很炫酷？再加一個解析算法，將文本中特定的文本轉換成特定的表情圖片，分分鐘實現聊天表情顯示效果有木有啊朋友們！
ClickableSpan
ClickableSpan，設置可點擊的文本，設置這個屬性的文本可以相應用戶點擊事件，至于點擊事件用戶可以自定義，就像效果圖顯示一樣，用戶可以實現點擊跳轉頁面的效果，具體實現方法如下：
代碼中我們自定義MyClickableSpan類，繼承至ClickableSpan，并重寫其中一些方法。ds.setUnderlineText()控制是否讓可點擊文本顯示下劃線，很明顯，在上面代碼中我選擇了false，不顯示下滑寫。onClick點擊事件的具體實現方法寫在其中。如上代碼，我們重寫ClickableSpan的onClick方法實現Activity的跳轉效果，并傳遞跳轉數據。
注意：使用ClickableSpan的文本如果想真正實現點擊作用，必須為TextView設置setMovementMethod方法，否則沒有點擊相應，至于setHighlightColor方法則是控制點擊是的背景色。
URLSpan
URLSpan，設置超鏈接文本，其實聰明的小伙幫在講到ClickableSpan的時候就能實現超鏈接文本的效果了，重寫onClick點擊事件就行，也確實看了URLSpan的源碼，URLSpan就是繼承自ClickableSpan，也和想象中一樣，就是重寫了父類的onClick事件，用系統自帶瀏覽器打開鏈接，具體實現方法如下：
URLSpanonClick事件的源碼如下：
除此之外，還有MaskFilterSpan可以實現模糊和浮雕效果，RasterizerSpan可以實現光柵效果，因為以上兩個使用頻率不高，而且效果也不是很明顯，就不做詳細說明，有興趣的小伙伴不妨去試一試。
SpannableStringBuilder
應該有不少開發的小伙伴知道StringBuilder，可以使用append()方法實現字符串拼接，非常方便。同樣，SpannableString中也有SpannableStringBuilder，顧名思義，就是實現對，SpannableString的一個拼接效果，同樣是append()方法，可以實現各種風格效果的SpannableString拼接，非常實用。
3
彩蛋
看了這么多的效果是不是收貨滿滿呢？最后我在附上一個個小小的彩蛋，小伙伴們可以開動腦經想一想是怎么實現的哦！ 要是有更好的創意，不妨在評論區留言跟大伙兒分享分享呢！
作者申明：如果文中有表述不當或闡述錯誤的地方，還望正在看文章的您可以幫忙指出，有疑惑也可以在評論區提問或者私信，期待您的意見和建議，歡迎關注交流。
今日推薦
