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

更新時(shí)間：2022年01月06日 16:01:42 作者：i小灰

在開(kāi)發(fā)過(guò)程中經(jīng)常需要使用文本，有時(shí)候需要對(duì)一段文字中的部分文字進(jìn)行特殊的處理，如改變其中部分文字的大小、顏色、加下劃線等。本文將為大家介紹如何實(shí)現(xiàn)這些效果，感興趣的可以學(xué)習(xí)一下

1.引言

在開(kāi)發(fā)過(guò)程中經(jīng)常需要使用文本，有時(shí)候需要對(duì)一段文字中的部分文字進(jìn)行特殊的處理，如改變其中部分文字的大小、顏色、加下劃線等，這個(gè)時(shí)候使用Span就能方便地解決這些問(wèn)題。本文將主要介紹SpannableStringBuilder和各種Span的使用。

2.SpannableStringBuilder的基本用法

新建一個(gè)SpannableStringBuilder對(duì)象的操作如下：

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

SpannableStringBuilder的setSpan()方法如下：

//what：各種文本Span，如BackgroundColorSpan、ForegroundColorSpan等
//start：應(yīng)用Span的文本的開(kāi)始位置索引
//end：應(yīng)用Span的文本的結(jié)束位置索引
//flags：標(biāo)志
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用來(lái)改變文本的絕對(duì)大小，示例如下：

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用來(lái)改變文本的背景顏色大小，示例如下：

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用來(lái)給文本添加點(diǎn)擊效果，示例如下：

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用來(lái)給段落添加drawable和padding，這個(gè)padding指的是drawable和文本之間的距離，默認(rèn)值是0，Span要從文本的起始位置設(shè)置，否則Span將不會(huì)渲染或者錯(cuò)誤地渲染，示例如下：

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替換文本內(nèi)容，示例如下：

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可以用來(lái)改變文本的顏色，示例如下：

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可以在文本開(kāi)始的地方添加位圖，而且可以在位圖和文本之間設(shè)置padding，padding的默認(rèn)值是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替換文本，創(chuàng)建ImageSpan的構(gòu)造方法有很多，示例如下：

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可以給文本設(shè)置MaskFilter，例如給文本設(shè)置模糊效果，示例如下：

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可以在文本開(kāi)始的地方添加一個(gè)垂直的線條，示例如下：

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以一定的系數(shù)在水平方向縮放文本的大小，示例如下：

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可以設(shè)置文本的樣式，可用的樣式有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可以將文本的基線移動(dòng)到更低的地方，示例如下：

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

3.16 SuperscriptSpan

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

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.多個(gè)Span組合使用

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

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);