1. 程式人生 > >TextView使用SpannableString設定某部分文字的各種屬性(點選、顏色、下劃線...)

TextView使用SpannableString設定某部分文字的各種屬性(點選、顏色、下劃線...)

public void setSpan(Object what, int start, int end, int flags) {
    super.setSpan(what, start, end, flags);
}

這個方法的引數中的start 和 end 用來擷取部分需要加特效的文字。

第一個引數 what 可以是 ① ClickableSpan物件,控制點選事件;

                                      ②ForegroundColorSpan物件,控制背景色;

                                      ③UnderlineSpan物件,控制下劃線;

上程式碼

SpannableString style = new SpannableString(text.getText().toString());
//設定指定位置文字的顏色(前景色)
style.setSpan(new ForegroundColorSpan(Color.parseColor("#ff8d29")), 15, 19, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
style.setSpan(new ClickableSpan() {
    @Override
public void updateDrawState(TextPaint ds) {
        super
.updateDrawState(ds) //設定字型顏色 //ds.setColor(Color.RED);   //去除下劃線 ds.setUnderlineText(false); } @Override public void onClick(View widget) { //點選事件 startActivity(new Intent(RegActivity.this, UseAgreeActivity.class)); } }, 15, 19, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); //去除點選時的背景色。
text.setHighlightColor(this.getResources().getColor(android.R.color.transparent));
text.setMovementMethod(LinkMovementMethod.getInstance());
text.setText(style);

TextView通常用來顯示普通文字,但是有時候需要對其中某些文字進行樣式、事件方面的設定。Android系統通過SpannableString類來對指定文字進行相關處理,具體有以下功能:

1、BackgroundColorSpan 背景色 
2、ClickableSpan 文字可點選,有點選事件
3、ForegroundColorSpan 文字顏色(前景色)
4、MaskFilterSpan 修飾效果,如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)
5、MetricAffectingSpan 父類,一般不用
6、RasterizerSpan 光柵效果
7、StrikethroughSpan 刪除線(中劃線)
8、SuggestionSpan 相當於佔位符
9、UnderlineSpan 下劃線
10、AbsoluteSizeSpan 絕對大小(文字字型)
11、DynamicDrawableSpan 設定圖片,基於文字基線或底部對齊。
12、ImageSpan 圖片
13、RelativeSizeSpan 相對大小(文字字型)
14、ReplacementSpan 父類,一般不用
15、ScaleXSpan 基於x軸縮放
16、StyleSpan 字型樣式:粗體、斜體等
17、SubscriptSpan 下標(數學公式會用到)
18、SuperscriptSpan 上標(數學公式會用到)
19、TextAppearanceSpan 文字外貌(包括字型、大小、樣式和顏色)
20、TypefaceSpan 文字字型
21、URLSpan 文字超連結

這麼多文字,為了讓你有看下去的勇氣,下面來張效果圖:

1、BackgroundColorSpan 背景色

1
2
3
4
SpannableString spanText = new SpannableString("TextView使用SpannableString設定某部分文字的各種屬性");
spanText.setSpan(new BackgroundColorSpan(Color.GREEN)0, spanText.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

3、ForegroundColorSpan 文字顏色(前景色)

1
2
3
4
spanText = new SpannableString("TextView使用SpannableString設定某部分文字的各種屬性");
spanText.setSpan(new ForegroundColorSpan(Color.BLUE)6, spanText.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

4、MaskFilterSpan 修飾效果,如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)

1
2
3
4
5
6
7
8
9
10
11
spanText = new SpannableString("TextView使用SpannableString設定某部分文字的各種屬性");
int length = spanText.length();
//模糊(BlurMaskFilter)
MaskFilterSpan maskFilterSpan = new MaskFilterSpan(new BlurMaskFilter(3, Blur.OUTER));
spanText.setSpan(maskFilterSpan, 0, length - 10, Spannable.
SPAN_INCLUSIVE_EXCLUSIVE);
//浮雕(EmbossMaskFilter)
maskFilterSpan = new MaskFilterSpan(new EmbossMaskFilter(new float[]{1,1,3}, 1.5f, 83));
spanText.setSpan(maskFilterSpan, length - 10, length, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);


PS:從上圖看,浮雕效果不明顯。把字型設定大點後可以看得清晰些。需要其他效果可以繼承MaskFilter來自定義。

6、RasterizerSpan 光柵效果

1
2
3
4
5
spanText = new SpannableString("StrikethroughSpan");
spanText.setSpan(new StrikethroughSpan()07, Spannable.
SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

PS:暫不清楚,效果不明顯。

7、StrikethroughSpan 刪除線(中劃線)

1
2
3
4
spanText = new SpannableString("StrikethroughSpan");
spanText.setSpan(new StrikethroughSpan()07, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

8、SuggestionSpan
相當於佔位符,一般用在EditText輸入框中。當雙擊此文字時,會彈出提示框選擇一些建議(推薦的)文字,選中的文字將替換此佔位符。在輸入法上用的較多。
PS:API 14新增,暫無示例。

9、UnderlineSpan 下劃線

1
2
3
4
spanText = new SpannableString("UnderlineSpan");
spanText.setSpan(new UnderlineSpan()0, spanText.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

10、AbsoluteSizeSpan 絕對大小(文字字型)

1
2
3
4
spanText = new SpannableString("AbsoluteSizeSpan");
spanText.setSpan(new AbsoluteSizeSpan(20true)0, spanText.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

PS:把字型大小設定大點,效果硬朗。

11、DynamicDrawableSpan 設定圖片,基於文字基線或底部對齊。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
DynamicDrawableSpan drawableSpan =  new DynamicDrawableSpan(DynamicDrawableSpan.ALIGN_BASELINE) {
    @Override
    public Drawable getDrawable() {
        Drawable d = getResources().getDrawable(R.drawable.ic_launcher);
        d.setBounds(005050);
        return d;
    }
};
DynamicDrawableSpan drawableSpan2 = new DynamicDrawableSpan( DynamicDrawableSpan.ALIGN_BOTTOM) {
    @Override
    public Drawable getDrawable() {
          Drawable d = getResources().getDrawable(R.drawable.ic_launcher);
          d.setBounds(005050);
                return d;
            }
        };
spanText.setSpan(drawableSpan, 34, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
spanText.setSpan(drawableSpan2, 78, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

PS:左邊圖片基於基線對齊,右邊圖片基於底部對齊

12、ImageSpan 圖片

1
2
3
4
5
6
spanText = new SpannableString("ImageSpan");
Drawable d = getResources().getDrawable(R.drawable.ic_launcher);
</strong>d.setBounds(005050);
spanText.setSpan(new ImageSpan(d)34, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

PS:和DynamicDrawableSpan差別不大

13、RelativeSizeSpan 相對大小(文字字型)

1
2
3
4
5
spanText = new SpannableString("RelativeSizeSpan");
//引數proportion:比例大小
spanText.setSpan(new RelativeSizeSpan(2.5f)34, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

PS:相對大小的比例是基於當前文字字型大小

15、ScaleXSpan 基於x軸縮放

1
2
3
4
5
spanText = new SpannableString("ScaleXSpan");
//引數proportion:比例大小
spanText.setSpan(new ScaleXSpan(3.8f)37, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

16、StyleSpan 字型樣式:粗體、斜體等

1
2
3
4
5
spanText = new SpannableString("StyleSpan ");
//Typeface.BOLD_ITALIC:粗體+斜體
spanText.setSpan(new StyleSpan(Typeface.BOLD_ITALIC)37, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

17、SubscriptSpan 下標(數學公式會用到)

1
2
3
4
spanText = new SpannableString("SubscriptSpan ");
spanText.setSpan(new SubscriptSpan()67, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

18、SuperscriptSpan 上標(數學公式會用到)

1
2
3
4
spanText = new SpannableString("SuperscriptSpan ");
spanText.setSpan(new SuperscriptSpan()67, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

19、TextAppearanceSpan 文字外貌(包括字型、大小、樣式和顏色)

1
2
3
4
5
spanText = new SpannableString("TextAppearanceSpan");
//若需自定義TextAppearance,可以在系統樣式上進行修改
spanText.setSpan(new TextAppearanceSpan(this, android.R.style.TextAppearance_Medium),  67, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

PS:系統還提供了相關值TextAppearance_Small, TextAppearance_Large等。如有需要可在以上樣式基礎上修改。

20、TypefaceSpan 文字字型

1
2
3
4
5
spanText = new SpannableString("TypefaceSpan ");
//若需使用自定義字型,可能要重寫類TypefaceSpan
spanText.setSpan(new TypefaceSpan("monospace")310, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);

PS:關於自定義字型的設定,後面將介紹如何使用

21、URLSpan 文字超連結

1
2
3
4
5
6
spanText = new SpannableString("URLSpan ");
spanText.setSpan(new URLSpan("http://orgcent.com")10, spanText.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
mTVText.append("\n");
mTVText.append(spanText);
//讓URLSpan可以點選
mTVText.setMovementMethod(new LinkMovementMethod());