一個(gè)人需要隱藏多少秘密才能巧妙地度過(guò)一生 — 倉(cāng)央嘉措
前言
上次看到一款學(xué)習(xí)的 App遍尺，有這樣一個(gè)功能钓株，在一個(gè) TextView 中有一段英文陈莽，點(diǎn)擊英文單詞通過(guò)語(yǔ)音朗讀出來(lái)互亮。語(yǔ)音先不考慮愁铺，怎么去實(shí)現(xiàn) TextView 點(diǎn)擊獲取每個(gè)單詞的內(nèi)容的呢？
肯定是用SpannableString去實(shí)現(xiàn)的唄床绪，不然你今天講它干嘛客情。嘿嘿，我說(shuō)的對(duì)不對(duì)癞己？
答案是肯定的膀斋，由于慣性我們先來(lái)看看效果圖：
我這里沒有獲取每個(gè)單詞，而是獲取的每段句子痹雅。效果圖上也展示了一些其他的SpannableString效果仰担，大多數(shù)可能你已經(jīng)見過(guò)了。那么你肯定會(huì)問SpannableString是什么绩社，SpannableString是一種字符串類型摔蓝，可以通過(guò)使用其方法setSpan方法實(shí)現(xiàn)字符串各種形式風(fēng)格的顯示。
具體案例
setSpan方法預(yù)覽：
setSpan(Object what, int start, int end, int flags)
- what ： 文本格式愉耙，可以設(shè)置成前景色贮尉，背景色，下劃線朴沿，中劃線猜谚，模糊等
- start ： 字符串設(shè)置格式的起始下標(biāo)
- end ： 字符串設(shè)置格式結(jié)束下標(biāo)
- flags ： 標(biāo)識(shí)
flags 常用的幾種屬性：
-
Spanned.SPAN_INCLUSIVE_EXCLUSIVE從起始下標(biāo)到結(jié)束下標(biāo)败砂，包括起始下標(biāo)不包含結(jié)束坐標(biāo) -
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE從起始下標(biāo)到結(jié)束下標(biāo)，但都不包括起始下標(biāo)和結(jié)束下標(biāo) -
Spanned.SPAN_INCLUSIVE_INCLUSIVE從起始下標(biāo)到終了下標(biāo)魏铅，同時(shí)包括起始下標(biāo)和結(jié)束下標(biāo) -
Spanned.SPAN_EXCLUSIVE_INCLUSIVE從起始下標(biāo)到終了下標(biāo)昌犹，包括結(jié)束下標(biāo)不包含起始坐標(biāo)
TextView點(diǎn)擊獲取部分內(nèi)容
首先我們先來(lái)看TextView點(diǎn)擊獲取部分內(nèi)容，對(duì)TextView設(shè)置Spannable览芳，設(shè)置每段單詞的響應(yīng)方法getEachParagraph()
testText.setText(getResources().getString(R.string.text), TextView.BufferType.SPANNABLE);
getEachParagraph(testText);
testText.setMovementMethod(LinkMovementMethod.getInstance());
點(diǎn)擊響應(yīng)方法getEachParagraph()：
//paragraph
public void getEachParagraph(TextView textView) {
Spannable spans = (Spannable) textView.getText();
Integer[] indices = getIndices(
textView.getText().toString().trim(), ',');
int start = 0;
int end = 0;
// recycle
for (int i = 0; i <= indices.length; i++) {
ClickableSpan clickSpan = getClickableSpan();
//setspan
end = (i < indices.length ? indices[i] : spans.length());
spans.setSpan(clickSpan, start, end,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
start = end + 1;
}
//改變選中文本的高亮顏色
textView.setHighlightColor(Color.BLUE);
}
//click
private ClickableSpan getClickableSpan() {
return new ClickableSpan() {
@Override
public void onClick(View widget) {
TextView tv = (TextView) widget;
String s = tv
.getText()
.subSequence(tv.getSelectionStart(),
tv.getSelectionEnd()).toString();
Log.e("onclick--:", s);
}
@Override
public void updateDrawState(TextPaint ds) {
ds.setColor(Color.BLACK);
ds.setUnderlineText(false);
}
};
}
//array
public static Integer[] getIndices(String s, char c) {
int pos = s.indexOf(c, 0);
List<Integer> indices = new ArrayList<Integer>();
while (pos != -1) {
indices.add(pos);
pos = s.indexOf(c, pos + 1);
}
return (Integer[]) indices.toArray(new Integer[0]);
}
首先將TextView內(nèi)容轉(zhuǎn)換為Spannable對(duì)象斜姥；然后通過(guò)getIndices方法將文本內(nèi)容通過(guò)字符c獲取每段索引數(shù)組；然后為每段添加ClickableSpan沧竟；最后onClick方法里面獲取每段內(nèi)容铸敏。
前景色ForegroundColorSpan
前景色等同于setTextColor，具體實(shí)現(xiàn)如下：
SpannableString spannableString = new SpannableString("設(shè)置文字的前景色");
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#0099EE"));
spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);
mTv.setText(spannableString);
看看效果展示：
起始下標(biāo)包含5悟泵，結(jié)束下標(biāo)spannableString長(zhǎng)度不包含搞坝。
背景色BackgroundColorSpan
背景色等同于setBackgroundColor，具體實(shí)現(xiàn)如下：
SpannableString spannableString = new SpannableString("設(shè)置文字的背景色");
BackgroundColorSpan colorSpan = new BackgroundColorSpan(Color.parseColor("#AC00FF30"));
spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
效果圖展示：
RelativeSizeSpan
先來(lái)看看效果圖：
我還清晰的記得剛開始做項(xiàng)目那會(huì)魁袜，做出這樣的效果圖需要2個(gè)TextView桩撮，9月一個(gè)；22日一個(gè)峰弹，現(xiàn)在想想真憋屈店量，要是相對(duì)字體大小在文本中間我不是要3個(gè)TextView，那真的要崩潰鞠呈。
接著看看具體實(shí)現(xiàn)：
SpannableString spannableString = new SpannableString("9月22日");
RelativeSizeSpan sizeSpan = new RelativeSizeSpan(2.0f);
spannableString.setSpan(sizeSpan, 0, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
中劃線StrikethroughSpan
中劃線用得比較多的就是過(guò)時(shí)的價(jià)格融师，看看它的具體實(shí)現(xiàn)：
方法一：
SpannableString spannableString = new SpannableString("我是文本中劃線");
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
spannableString.setSpan(strikethroughSpan, 3, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
方法二：
mTv.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG | Paint.ANTI_ALIAS_FLAG); // 設(shè)置中劃線并加清晰
我們可以通過(guò)調(diào)用mTv.getPaint().setFlags(0); // 取消設(shè)置的的劃線
效果圖登場(chǎng)：
下滑線UnderlineSpan
實(shí)現(xiàn)下滑線也有兩種方法，同上：
方法一：
SpannableString spannableString = new SpannableString("我是文本下劃線");
UnderlineSpan underlineSpan = new UnderlineSpan();
spannableString.setSpan(underlineSpan, 4, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
方法二：
mTv.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG); //下劃線
效果圖奉上：
上標(biāo)SuperscriptSpan
上標(biāo)加上前景色可以設(shè)計(jì)出未讀消息效果蚁吝，我們一起來(lái)看看它的實(shí)現(xiàn)：
SpannableString spannableString = new SpannableString("你有新消息了" + "●");
SuperscriptSpan superscriptSpan = new SuperscriptSpan();
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#FF0000"));
spannableString.setSpan(colorSpan, 6, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(superscriptSpan, 6, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
以前看看文本未讀消息感覺很高大上旱爆，還在苦苦追尋是怎么實(shí)現(xiàn)的，其實(shí)它非常easy下標(biāo)還可以用于數(shù)學(xué)公式窘茁。
效果圖：
下標(biāo)SubscriptSpan
當(dāng)然有了上標(biāo)就會(huì)出現(xiàn)下標(biāo)：
SpannableString spannableString = new SpannableString("注釋1");
SubscriptSpan subscriptSpan = new SubscriptSpan();
spannableString.setSpan(subscriptSpan, 2, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
效果圖：
設(shè)置風(fēng)格（粗體怀伦、斜體）StyleSpan
直接上代碼：
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);
mTv.setText(spannableString);
效果圖貼上：
ImageSpan
做過(guò)IM相關(guān)需求的童鞋，都對(duì)這個(gè)不會(huì)陌生山林，它的身影在聊天App軟件中隨處可見：
SpannableString spannableString = new SpannableString("在文本中添加xx");
Drawable drawable = getResources().getDrawable(R.drawable.mini_face_nine);
int drawHeight = drawable.getMinimumHeight();
drawable.setBounds(0, 0, drawHeight, drawHeight);
ImageSpan imageSpan = new ImageSpan(drawable);
spannableString.setSpan(imageSpan, 6, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
setBounds方法設(shè)置圖片的邊框大小房待，使圖片與文本居中對(duì)齊。
效果圖一覽：
ClickableSpan
從名字上就可以知道和點(diǎn)擊響應(yīng)相關(guān)的：
SpannableString spannableString = new SpannableString("為文字設(shè)置點(diǎn)擊事件");
spannableString.setSpan(new ClickableSpan() {
@Override
public void onClick(View view) {
Snackbar.make(view, "你點(diǎn)擊了我", Snackbar.LENGTH_SHORT).show();
Uri uri = Uri.parse("http://www.baidu.com");
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
intent.putExtra(Browser.EXTRA_APPLICATION_ID, _mActivity.getPackageName());
try {
_mActivity.startActivity(intent);
} catch (ActivityNotFoundException e) {
Log.e("--ClickableSpan--", "Actvity was not found for intent, " + intent.toString());
}
}
@Override
public void updateDrawState(TextPaint ds) {
ds.setColor(Color.parseColor("#abc123"));
ds.setUnderlineText(true);
}
}, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setMovementMethod(LinkMovementMethod.getInstance());
mTv.setHighlightColor(Color.parseColor("#abc123"));
mTv.setText(spannableString);
為文本設(shè)置點(diǎn)擊事件并且跳轉(zhuǎn)網(wǎng)址驼抹。
效果圖：
URLSpan
URLSpan跳轉(zhuǎn)網(wǎng)址：
SpannableString spannableString = new SpannableString("為文字設(shè)置超鏈接");
URLSpan urlSpan = new URLSpan("http://www.baidu.com/");
spannableString.setSpan(urlSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setMovementMethod(LinkMovementMethod.getInstance());
mTv.setHighlightColor(Color.parseColor("#ff0000"));
mTv.setText(spannableString);
效果圖：
模糊BlurMaskFilter
比較簡(jiǎn)單的用法桑孩，直接上代碼：
SpannableString spannableString = new SpannableString("為文字設(shè)置模糊");
MaskFilterSpan maskFilterSpan = new MaskFilterSpan(new BlurMaskFilter(10, BlurMaskFilter.Blur.NORMAL));
spannableString.setSpan(maskFilterSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
構(gòu)造方法：
BlurMaskFilter(float radius, Blur style)
- radius 模糊半徑
- style 風(fēng)格
style為枚舉類型：
BlurMaskFilter.Blur.NORMAL 默認(rèn)類型，模糊內(nèi)外邊界
BlurMaskFilter.Blur.INNER 內(nèi)部模糊
BlurMaskFilter.Blur.OUTER 外部模糊
BlurMaskFilter.Blur.SOLID 在邊界內(nèi)繪制固體框冀，模糊
浮雕EmbossMaskFilter
SpannableString spannableString = new SpannableString("為文字設(shè)置浮雕");
MaskFilterSpan maskFilterSpan = new MaskFilterSpan(
new EmbossMaskFilter(new float[]{10, 10, 10}, 0.5f, 1f, 1f));
spannableString.setSpan(maskFilterSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
構(gòu)造方法：
/**
* Create an emboss maskfilter
*
* @param direction array of 3 scalars [x, y, z] specifying the direction of the light source
* @param ambient 0...1 amount of ambient light
* @param specular coefficient for specular highlights (e.g. 8)
* @param blurRadius amount to blur before applying lighting (e.g. 3)
* @return the emboss maskfilter
*/
public EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius)
//direction 是float數(shù)組流椒，定義長(zhǎng)度為3的數(shù)組標(biāo)量[x,y,z]，來(lái)指定光源的方向
// ambient 取值在0到1之間明也，定義背景光 或者說(shuō)是周圍光
// specular 定義鏡面反射系數(shù)宣虾。
// blurRadius 模糊半徑极谊。
效果圖：
光柵LayerRasterizer
SpannableString spannableString = new SpannableString("為文字設(shè)置光柵");
LayerRasterizer layerRasterizer = new LayerRasterizer();
layerRasterizer.addLayer(new Paint(Color.CYAN), 10, 10);
RasterizerSpan rasterizerSpan = new RasterizerSpan(layerRasterizer);
spannableString.setSpan(rasterizerSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);
addLayer方法：
addLayer(Paint paint, float dx, float dy) //dx,dy便宜位置
效果圖：
看了這么多效果，你應(yīng)該知道的這些效果顯示安岂。
后續(xù)
String有StringBuilder用于字符串的拼接；那么SpannableString也有SpannableStringBuilder用于拼接SpannableString帆吻，可以把各種風(fēng)格效果拼接在一起域那。
當(dāng)然文中有什么描述錯(cuò)誤，不當(dāng)?shù)牡胤讲轮螅€請(qǐng)指出次员，歡迎關(guān)注后續(xù)博客交流，謝謝大家王带。
