Android uses Span to create colorful text

1. The introduction

In the development process, you often need to use text. Sometimes, you need to change the size, color, underline, etc. of part of the text in a paragraph. In this case, using Span can easily solve these problems. This article will focus on the use of SpannableStringBuilder and various Spans.

2. Basic usage of SpannableStringBuilder

To create a new SpannableStringBuilder object, do the following:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
Copy the code

The setSpan() method for SpannableStringBuilder looks like this:

//what: various text spans, such as BackgroundColorSpan, ForegroundColorSpan, etc
//start: apply the index of the starting position of the Span text
//end: the index of the end position of the text applied to Span
/ / flags: sign
public void setSpan(Object what, int start, int end, int flags) {
    setSpan(true, what, start, end, flags, true/*enforceParagraph*/);
}
Copy the code

3. Add effects to text using Span

3.1 AbsoluteSizeSpan

This Span is used to change the absolute size of text as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new AbsoluteSizeSpan(60),3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder); 
Copy the code

3.2 BackgroundColorSpan

This Span is used to change the size of the background color of the text as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new BackgroundColorSpan(Color.GREEN),3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.3 ClickableSpan

This Span is used to add click effects to text as shown in the following example:

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);
Copy the code

3.4 DrawableMarginSpan

The padding refers to the distance between the drawable and the text. The default value is 0. The Span must be set from the start of the text, otherwise the Span will not render or will render incorrectly, as shown in the following example:

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);
Copy the code

3.5 DynamicDrawableSpan

This Span replaces the text content with a drawable as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new DynamicDrawableSpan() {
    @Override
    public Drawable getDrawable(a) {
       Drawable drawable =             
       AppCompatResources.getDrawable(MainActivity.this,R.drawable.ic_launcher);              
       drawable.setBounds(0.0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
       returndrawable; }},3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.6 ForegroundColorSpan

This Span can be used to change the color of text as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new ForegroundColorSpan(Color.GREEN), 3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.7 IconMarginSpan

This Span can add a bitmap at the beginning of the text, and it can set the padding between the bitmap and the text. The default padding value is 0px, as shown in the following example:

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);
Copy the code

3.8 ImageSpan

This Span can replace text with a Drawable. There are many constructors for creating an ImageSpan, as shown in the following example:

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);
Copy the code

3.9 MaskFilterSpan

This Span can be used to set MaskFilter to text, for example to blur text, as shown in the following example:

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);
Copy the code

3.10 QuoteSpan

This Span can add a vertical line at the beginning of the text as shown in the following example:

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

3.11 RelativeSizeSpan

This Span can be scaled to the size of the text, as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new RelativeSizeSpan(2.0 f), 3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.12 ScaleXSpan

This Span scales the size of text horizontally with a certain coefficient, as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new ScaleXSpan(2.5 f), 3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.13 StrikethroughSpan

This Span can be underlined on the text as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new StrikethroughSpan(), 3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.14 StyleSpan

Typeface.NORMAL, Typeface.BOLD, Typeface.ITALIC, Typeface.

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new StyleSpan(Typeface.BOLD), 3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.15 SubscriptSpan

This Span can move the baseline of text lower as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new SubscriptSpan(), 3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.16 SuperscriptSpan

This Span can move the baseline of text higher, as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new SuperscriptSpan(), 3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

3.17 UnderlineSpan ()

This Span can be underlined below the text as shown in the following example:

SpannableStringBuilder builder = new SpannableStringBuilder("Hello World!");
builder.setSpan(new UnderlineSpan(), 3.9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
tv_content.setText(builder);
Copy the code

4. Use multiple spans in combination

Span can be used on its own or in combination. The following example shows how to bold text, change the color of text, and add a slide line at the same time:

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);
Copy the code

5. To summarize

Span has a variety of functions, such as changing text color, size, adding click effect, underline and so on. This article introduces a variety of commonly used Span, Span can be used alone or in combination, using it to carry out various flexible operations on text, to achieve personalized needs.