引語
TeXtView大家應(yīng)該都不陌生，文本展示控件嘛分扎！ 就用TextView顯示普普通通的文本澄成，OK，很簡單畏吓，Android入門的都會(huì)墨状，沒入門的在門縫外看兩眼也都會(huì)，哈哈菲饼，開玩笑肾砂。那要是設(shè)計(jì)在開發(fā)需求中要求類似微信聊天表情一樣在TextView中插入表情圖片呢？ 有的小伙伴就會(huì)說啦巴粪，“TextView添加圖片我會(huì)啊通今，不就是drawableLeft，drawableRight嘛肛根！” 嗯 ~ 也行辫塌，算是一種方法，可這有一個(gè)限制派哲，首先臼氨，圖片只能在TextView的兩端，其次芭届，兩端都只能設(shè)置一張圖片储矩。要是圖片要在文本中間呢感耙？無能為力了吧，要是你會(huì)使用SpannableString持隧，這個(gè)問題也就不難解決了即硼，簡直是Just So So。
所以屡拨，不論你是否正在經(jīng)受以上問題的困擾只酥，亦或是還沒有經(jīng)歷到，請(qǐng)駐足仔細(xì)耐心的看完這篇簡短的文章呀狼。不僅能夠輕松實(shí)現(xiàn)以上設(shè)計(jì)需求裂允，更能收獲其他各種炫酷的效果，也許就能幫助你解決現(xiàn)在你所困擾的問題哥艇。
首先我們先來了解SpannableString
SpannableString其實(shí)和String一樣绝编，都是一種字符串類型，同樣TextView也可以直接設(shè)置SpannableString作為顯示文本貌踏，不同的是SpannableString可以通過使用其方法setSpan方法實(shí)現(xiàn)字符串各種形式風(fēng)格的顯示,重要的是可以指定設(shè)置的區(qū)間十饥，也就是為字符串指定下標(biāo)區(qū)間內(nèi)的子字符串設(shè)置格式。
setSpan(Object what, int start, int end, int flags)方法需要用戶輸入四個(gè)參數(shù)哩俭，what表示設(shè)置的格式是什么绷跑，可以是前景色、背景色也可以是可點(diǎn)擊的文本等等凡资，start表示需要設(shè)置格式的子字符串的起始下標(biāo)，同理end表示終了下標(biāo)谬运，flags屬性就有意思了隙赁，共有四種屬性：
Spanned.SPAN_INCLUSIVE_EXCLUSIVE 從起始下標(biāo)到終了下標(biāo)，包括起始下標(biāo)
Spanned.SPAN_INCLUSIVE_INCLUSIVE 從起始下標(biāo)到終了下標(biāo)梆暖，同時(shí)包括起始下標(biāo)和終了下標(biāo)
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 從起始下標(biāo)到終了下標(biāo)伞访，但都不包括起始下標(biāo)和終了下標(biāo)
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 從起始下標(biāo)到終了下標(biāo)，包括終了下標(biāo)
下面我們一一解讀幾種Span常用的格式:
- ForegroundColorSpan
ForegroundColorSpan轰驳，為文本設(shè)置前景色厚掷，效果和TextView的setTextColor()類似，實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("設(shè)置文字的前景色為淡藍(lán)色");
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#0099EE"));
spannableString.setSpan(colorSpan, 9, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
設(shè)置的區(qū)間是9到字符串的最后级解，也就是圖中“淡藍(lán)色”三字冒黑。
- BackgroundColorSpan
BackgroundColorSpan，為文本設(shè)置背景色勤哗，效果和TextView的setBackground()類抡爹，實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("設(shè)置文字的背景色為淡綠色");
BackgroundColorSpan colorSpan = new BackgroundColorSpan(Color.parseColor("#AC00FF30"));
spannableString.setSpan(colorSpan, 9, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
- RelativeSizeSpan
RelativeSizeSpan，設(shè)置文字相對(duì)大小芒划，在TextView原有的文字大小的基礎(chǔ)上冬竟，相對(duì)設(shè)置文字大小欧穴，實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("萬丈高樓平地起");
RelativeSizeSpan sizeSpan01 = new RelativeSizeSpan(1.2f);
RelativeSizeSpan sizeSpan02 = new RelativeSizeSpan(1.4f);
RelativeSizeSpan sizeSpan03 = new RelativeSizeSpan(1.6f);
RelativeSizeSpan sizeSpan04 = new RelativeSizeSpan(1.8f);
RelativeSizeSpan sizeSpan05 = new RelativeSizeSpan(1.6f);
RelativeSizeSpan sizeSpan06 = new RelativeSizeSpan(1.4f);
RelativeSizeSpan sizeSpan07 = new RelativeSizeSpan(1.2f);
spannableString.setSpan(sizeSpan01, 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(sizeSpan02, 1, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(sizeSpan03, 2, 3, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(sizeSpan04, 3, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(sizeSpan05, 4, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(sizeSpan06, 5, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(sizeSpan07, 6, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
- StrikethroughSpan
StrikethroughSpan，為文本設(shè)置中劃線泵殴，也就是常說的刪除線涮帘，實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("為文字設(shè)置刪除線");
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
spannableString.setSpan(strikethroughSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
看到這有沒有小激動(dòng)，分分鐘實(shí)現(xiàn)天貓打折優(yōu)惠效果笑诅，有木有焚辅？
- UnderlineSpan
UnderlineSpan，為文本設(shè)置下劃線苟鸯，具體實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("為文字設(shè)置下劃線");
UnderlineSpan underlineSpan = new UnderlineSpan();
spannableString.setSpan(underlineSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
- SuperscriptSpan
SuperscriptSpan同蜻，設(shè)置上標(biāo)，具體實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("為文字設(shè)置上標(biāo)");
SuperscriptSpan superscriptSpan = new SuperscriptSpan();
spannableString.setSpan(superscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
從效果圖可以看出早处，被設(shè)置為上標(biāo)的文字大小和下面的文本文字大小一樣湾蔓，只要我們稍加修飾，結(jié)合RelativeSizeSpan設(shè)置小字體文本作為上標(biāo)砌梆，分分鐘實(shí)現(xiàn)指數(shù)公式有木有默责，再也不用2^2+3^2=13這樣缺乏審美的數(shù)學(xué)公式了，是不是超實(shí)用咸包？
- SubscriptSpan
SubscriptSpan桃序，設(shè)置下標(biāo)，功能與設(shè)置上標(biāo)類似烂瘫，不做過多描述媒熊，具體實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("為文字設(shè)置下標(biāo)");
SubscriptSpan subscriptSpan = new SubscriptSpan();
spannableString.setSpan(subscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
- StyleSpan
StyleSpan，為文字設(shè)置風(fēng)格（粗體坟比、斜體）芦鳍，和TextView屬性textStyle類似，實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("為文字設(shè)置粗體葛账、斜體風(fēng)格");
StyleSpan styleSpan_B = new StyleSpan(Typeface.BOLD);
StyleSpan styleSpan_I = new StyleSpan(Typeface.ITALIC);
spannableString.setSpan(styleSpan_B, 5, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(styleSpan_I, 8, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setHighlightColor(Color.parseColor("#36969696"));
textView.setText(spannableString);
- ImageSpan
ImageSpan柠衅，設(shè)置文本圖片，實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("在文本中添加表情（表情）");
Drawable drawable = getResources().getDrawable(R.mipmap.a9c);
drawable.setBounds(0, 0, 42, 42);
ImageSpan imageSpan = new ImageSpan(drawable);
spannableString.setSpan(imageSpan, 6, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
這一個(gè)是不是很炫酷籍琳？再加一個(gè)解析算法菲宴，將文本中特定的文本轉(zhuǎn)換成特定的表情圖片，分分鐘實(shí)現(xiàn)聊天表情顯示效果有木有啊朋友們趋急！
- ClickableSpan
ClickableSpan喝峦，設(shè)置可點(diǎn)擊的文本，設(shè)置這個(gè)屬性的文本可以相應(yīng)用戶點(diǎn)擊事件宣谈，至于點(diǎn)擊事件用戶可以自定義愈犹，就像效果圖顯示一樣，用戶可以實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)頁面的效果，具體實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("為文字設(shè)置點(diǎn)擊事件");
MyClickableSpan clickableSpan = new MyClickableSpan("http://www.reibang.com/users/dbae9ac95c78");
spannableString.setSpan(clickableSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setMovementMethod(LinkMovementMethod.getInstance());
textView.setHighlightColor(Color.parseColor("#36969696"));
textView.setText(spannableString);
/***************************************************************/
class MyClickableSpan extends ClickableSpan {
private String content;
public MyClickableSpan(String content) {
this.content = content;
}
@Override
public void updateDrawState(TextPaint ds) {
ds.setUnderlineText(false);
}
@Override
public void onClick(View widget) {
Intent intent = new Intent(MainActivity.this, OtherActivity.class);
Bundle bundle = new Bundle();
bundle.putString("content", content);
intent.putExtra("bundle", bundle);
startActivity(intent);
}
}
代碼中我們自定義MyClickableSpan類漩怎，繼承至ClickableSpan勋颖，并重寫其中一些方法。ds.setUnderlineText()控制是否讓可點(diǎn)擊文本顯示下劃線勋锤，很明顯饭玲，在上面代碼中我選擇了false，不顯示下滑寫叁执。onClick點(diǎn)擊事件的具體實(shí)現(xiàn)方法寫在其中茄厘。如上代碼，我們重寫ClickableSpan的onClick方法實(shí)現(xiàn)Activity的跳轉(zhuǎn)效果谈宛，并傳遞跳轉(zhuǎn)數(shù)據(jù)次哈。
注意：使用ClickableSpan的文本如果想真正實(shí)現(xiàn)點(diǎn)擊作用，必須為TextView設(shè)置setMovementMethod方法吆录，否則沒有點(diǎn)擊相應(yīng)窑滞，至于setHighlightColor方法則是控制點(diǎn)擊是的背景色。
- URLSpan
URLSpan恢筝，設(shè)置超鏈接文本哀卫，其實(shí)聰明的小伙幫在講到ClickableSpan的時(shí)候就能實(shí)現(xiàn)超鏈接文本的效果了，重寫onClick點(diǎn)擊事件就行撬槽，也確實(shí)看了URLSpan的源碼此改，URLSpan就是繼承自ClickableSpan，也和想象中一樣侄柔，就是重寫了父類的onClick事件共啃，用系統(tǒng)自帶瀏覽器打開鏈接，具體實(shí)現(xiàn)方法如下：
SpannableString spannableString = new SpannableString("為文字設(shè)置超鏈接");
URLSpan urlSpan = new URLSpan("http://www.reibang.com/users/dbae9ac95c78");
spannableString.setSpan(urlSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setMovementMethod(LinkMovementMethod.getInstance());
textView.setHighlightColor(Color.parseColor("#36969696"));
textView.setText(spannableString);
URLSpanonClick事件的源碼如下：
@Override
public void onClick(View widget) {
Uri uri = Uri.parse(getURL());
Context context = widget.getContext();
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
intent.putExtra(Browser.EXTRA_APPLICATION_ID, context.getPackageName());
try {
context.startActivity(intent);
} catch (ActivityNotFoundException e) {
Log.w("URLSpan", "Actvity was not found for intent, " + intent.toString());
}
}
除此之外勋拟，還有MaskFilterSpan可以實(shí)現(xiàn)模糊和浮雕效果勋磕，RasterizerSpan可以實(shí)現(xiàn)光柵效果，因?yàn)橐陨蟽蓚€(gè)使用頻率不高敢靡，而且效果也不是很明顯，就不做詳細(xì)說明苦银，有興趣的小伙伴不妨去試一試啸胧。
SpannableStringBuilder
應(yīng)該有不少開發(fā)的小伙伴知道StringBuilder，可以使用append()方法實(shí)現(xiàn)字符串拼接幔虏，非常方便纺念。同樣，SpannableString中也有SpannableStringBuilder想括，顧名思義陷谱，就是實(shí)現(xiàn)對(duì)，SpannableString的一個(gè)拼接效果，同樣是append()方法烟逊，可以實(shí)現(xiàn)各種風(fēng)格效果的SpannableString拼接渣窜，非常實(shí)用。
彩蛋
看了這么多的效果是不是收貨滿滿呢宪躯？最后我在附上一個(gè)個(gè)小小的彩蛋乔宿，小伙伴們可以開動(dòng)腦經(jīng)想一想是怎么實(shí)現(xiàn)的哦！ 要是有更好的創(chuàng)意访雪，不妨在評(píng)論區(qū)留言跟大伙兒分享分享呢详瑞！
github下載地址-內(nèi)含菜單實(shí)現(xiàn)代碼
作者申明：如果文中有表述不當(dāng)或闡述錯(cuò)誤的地方，還望正在看文章的您可以幫忙指出臣缀，有疑惑也可以在評(píng)論區(qū)提問或者私信坝橡，期待您的意見和建議，歡迎關(guān)注交流精置。
