Android使用Span打造豐富多彩的文本

1.引言

在開發過程中經常需要使用文本，有時候需要對一段文字中的部分文字進行特殊的處理，如改變其中部分文字的大小、顏色、加下劃線等，這個時候使用Span就能方便地解決這些問題。本文將主要介紹SpannableStringBuilder和各種Span的使用。

2.SpannableStringBuilder的基本用法

新建一個SpannableStringBuilder對象的操作如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");

SpannableStringBuilder的setSpan()方法如下：

//what：各種文本Span，如BackgroundColorSpan、ForegroundColorSpan等
//start：應用Span的文本的開始位置索引
//end：應用Span的文本的結束位置索引
//flags：標誌
public void setSpan(Object what, int start, int end, int flags) {
    setSpan(true, what, start, end, flags, true/*enforceParagraph*/);
}

3.使用Span給文本添加效果

3.1 AbsoluteSizeSpan

此Span用來改變文本的絕對大小，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new AbsoluteSizeSpan(60),3,9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder); 

3.2 BackgroundColorSpan

此Span用來改變文本的背景顏色大小，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new BackgroundColorSpan(Color.GREEN),3,9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.3 ClickableSpan

此Span用來給文本添加點擊效果，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new ClickableSpan() {
    @Override
    public void onClick(@NonNull View widget) {
        Toast.makeText(MainActivity.this,"ClickableSpan",Toast.LENGTH_SHORT).show();
    }
}, 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
tv_content.setMovementMethod(LinkMovementMethod.getInstance());
tv_content.setHighlightColor(Color.TRANSPARENT);

3.4 DrawableMarginSpan

此Span用來給段落添加drawable和padding，這個padding指的是drawable和文本之間的距離，默認值是0，Span要從文本的起始位置設置，否則Span將不會渲染或者錯誤地渲染，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
Drawable drawable = AppCompatResources.getDrawable(MainActivity.this,R.drawable.ic_launcher);
builder.setSpan(new DrawableMarginSpan(drawable,30), 0, builder.length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.5 DynamicDrawableSpan

此Span使用drawable替換文本內容，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new DynamicDrawableSpan() {
    @Override
    public Drawable getDrawable() {
       Drawable drawable =             
       AppCompatResources.getDrawable(MainActivity.this,R.drawable.ic_launcher);              
       drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
       return drawable;
    }
}, 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.6 ForegroundColorSpan

此Span可以用來改變文本的顏色，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new ForegroundColorSpan(Color.GREEN), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.7 IconMarginSpan

此Span可以在文本開始的地方添加位圖，而且可以在位圖和文本之間設置padding，padding的默認值是0px，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
builder.setSpan(new IconMarginSpan(bitmap,30), 0, builder.length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.8 ImageSpan

此Span可以使用Drawable替換文本，創建ImageSpan的構造方法有很多，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new ImageSpan(MainActivity.this,R.drawable.ic_launcher), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.9 MaskFilterSpan

此Span可以給文本設置MaskFilter，例如給文本設置模糊效果，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
MaskFilter maskFilter = new BlurMaskFilter(10f, BlurMaskFilter.Blur.NORMAL);
builder.setSpan(new MaskFilterSpan(maskFilter), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.10 QuoteSpan

此Span可以在文本開始的地方添加一個垂直的線條，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new QuoteSpan(Color.GREEN), 0, builder.length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.11 RelativeSizeSpan

此Span可以按一定的比例縮放文本的大小，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new RelativeSizeSpan(2.0f), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.12 ScaleXSpan

此Span以一定的係數在水平方向縮放文本的大小，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new ScaleXSpan(2.5f), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.13 StrikethroughSpan

此Span可以在文本上添加下劃線，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new StrikethroughSpan(), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.14 StyleSpan

此Span可以設置文本的樣式，可用的樣式有Typeface.NORMAL、Typeface.BOLD、Typeface.ITALIC、Typeface.BOLD_ITALIC，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new StyleSpan(Typeface.BOLD), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.15 SubscriptSpan

此Span可以將文本的基線移動到更低的地方，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new SubscriptSpan(), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.16 SuperscriptSpan

此Span可以將文本的基線移動到更高的地方，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new SuperscriptSpan(), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

3.17 UnderlineSpan()

此Span可以在文本下面添加下劃線，示例如下：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new UnderlineSpan(), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

4.多個Span組合使用

Span不但可以單獨使用，還可以組合在一起使用，以下示例演示瞭如何同時加粗文字，改變文字的顏色和添加下滑線：

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new UnderlineSpan(), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
builder.setSpan(new ForegroundColorSpan(Color.GREEN), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
builder.setSpan(new StyleSpan(Typeface.BOLD), 3, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);

5.總結

Span的功能相當豐富，如改變文本顏色、大小、添加點擊效果、加下劃線等功能，本文介紹了經常用到的各種Span，Span支持單獨使用和組合使用，使用它能夠對文本進行各種靈活的操作，去實現個性化的需求。