preface

Believe that a lot of friends in the daily development have encountered such a problem: there is a section of text, text need to give it the parts separately set different styles, some text is set to bold, some the color of the text set special, in some places to join expression, encounter mathematical formula may also set to subscript, then what should you do?

Some people might say: simple, use different textViews for different styles of text, and you can solve the problem perfectly. Regardless of whether or not this approach works, the fact is that when you have a text that needs a lot of styling, it’s a waste of resources, and the layout is complicated and not easy to maintain, so this approach is not usually adopted.

So is there another way? There is, and it’s very simple, and the SpannableString we introduced today is designed to solve this problem.

SpannableString

What is SpannableString?

SpannableString is a type of CharSequence. The original CharSequence is just a sequence of characters without any style. SpannableString can retouch the specified character based on the character sequence. TextView can be passed SpannableString by setText(CharSequence) to display text of different styles.

Create a way

SpannableString spannableString = new SpannableString("If I were Eason Chan");

Copy the code

How do I retouch SpannableString?

Generally, you can set the parameters in the following ways

spannableString.setSpan(Object what, int start, int end, int flags);
Copy the code

Here’s what a few parameters mean

  • What: Various SpannableString embellished spans;
  • Int: the subscript at the beginning of the paragraph that needs to be retouched;
  • End: the subscript for the end of the paragraph to be embellished;
  • Flags: Flags that determine whether the start and end subscripts contain flags. There are four optional parameters
    • SPAN_INCLUSIVE_EXCLUSIVE: Includes the start index, but not the end index
    • SPAN_EXCLUSIVE_INCLUSIVE: does not include the start subscript, but includes the end subscript
    • SPAN_INCLUSIVE_INCLUSIVE: Includes both start and end subscripts
    • SPAN_EXCLUSIVE_EXCLUSIVE: does not include start or end indices

There is an important role to play here, and that is the various spans that determine what text we want to retouch. The last three parameters determine what text to retouch. For convenience, the flags behind this use SPAN_INCLUSIVE_EXCLUSIVE mode by default.

Various Span

Let’s start with a class structure diagram to understand the relationships between the various spans

As you can see, all spans inherit from the CharacterStyle abstract class. In addition, MetricAffectingSpan, ReplacementSpan, and ClickableSpan are all abstract classes. Some commonly used spans are shown below

ForegroundColorSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.GREEN);
spannableString.setSpan(foregroundColorSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

ForegroundColorSpan: color the text, set the color to GREEN, start to 4, end to 7, should be “Eason Chan” three words in GREEN, see the actual effect

BackgroudColorSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
BackgroundColorSpan backgroundColorSpan = new BackgroundColorSpan(Color.GREEN);
spannableString.setSpan(backgroundColorSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

BackgroudColorSpan: similar to ForegroundColorSpan, color the text background

ClickableSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
ClickableSpan clickableSpan = new ClickableSpan() {
    @Override
    public void onClick(View widget) {
        Toast.makeText(MainActivity.this, "If I were Eason Chan", Toast.LENGTH_SHORT).show();
    }
    @Override
    public void updateDrawState(TextPaint ds) {
        ds.setUnderlineText(false); }}; spannableString.setSpan(clickableSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); mTextView.setMovementMethod(LinkMovementMethod.getInstance()); mTextView.setText(spannableString);Copy the code

ClickableSpan: is an abstract class that implements clickable effects. You can override the onClick method to implement clickable events. Click on the word “Eason Chan” to simply play toast

URLSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
URLSpan urlSpan = new URLSpan("https://www.baidu.com/s?ie=UTF-8&wd= Eason Chan");
spannableString.setSpan(urlSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setMovementMethod(LinkMovementMethod.getInstance());
mTextView.setText(spannableString);
Copy the code

URLSpan: Implement hyperlink effect, inherited from ClickableSpan, click to jump to the browser

MaskFilterSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
MaskFilterSpan embossMaskFilterSpan =
    new MaskFilterSpan(new EmbossMaskFilter(new float[]{10, 10, 10}, 0.5f, 1, 1); spannableString.setSpan(embossMaskFilterSpan, 0, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); RelativeSizeSpan = New RelativeSizeSpan(1.5f); spannableString.setSpan(relativeSizeSpan, 0, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); MaskFilterSpan blurMaskFilterSpan = new MaskFilterSpan(new BlurMaskFilter(10, Blur.NORMAL)); spannableString.setSpan(blurMaskFilterSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); mTextView.setText(spannableString);Copy the code

MaskFilterSpan: The constructor accepts MaskFilter as an argument, which has two subclasses: EmbossMaskFilter and BlurMaskFilter EmbossMaskFilter for embossment

EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius)
Copy the code
  • Direction: float array that defines array scalars [x,y,z] of length 3 to specify the direction of the light source
  • Ambient: Ambient brightness, 0 to 1
  • Specular: specular reflection coefficient
  • BlurRadius: blurRadius must be greater than 0

BlurMaskFilter implements the blurring effect

BlurMaskFilter(float radius, Blur style)
Copy the code
  • Radius: fuzzy radius
  • Style: Four parameters are optional
    • BlurMaskFilter. The Blur. NORMAL: fuzzy inside and outside
    • BlurMaskFilter. The Blur. OUTER: external fuzzy
    • BlurMaskFilter. The Blur. INNER: internal fuzzy
    • Internal BlurMaskFilter. The Blur. SOLID: bold, external fuzzy

RelativeSizeSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan"); RelativeSizeSpan = New RelativeSizeSpan(1.5f); spannableString.setSpan(relativeSizeSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); mTextView.setText(spannableString);Copy the code

RelativeSizeSpan: Sets the relative size of the font. In this case, set it to 1.5 times the size of the TextView

AbsoluteSizeSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
AbsoluteSizeSpan absoluteSizeSpan = new AbsoluteSizeSpan(40, true);
spannableString.setSpan(absoluteSizeSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

AbsoluteSizeSpan: Sets the absolute phase size of the font, 40 indicates the size of the text, true indicates the unit of dip, and false indicates px

ScaleXSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan"); ScaleXSpan ScaleXSpan = new ScaleXSpan (1.5 f); spannableString.setSpan(scaleXSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); mTextView.setText(spannableString);Copy the code

ScaleXSpan: Set font x axis zoom, 1.5 means x axis zoom is 1.5 times, the effect is shown in the figure

StyleSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
StyleSpan boldSpan = new StyleSpan(Typeface.BOLD);
StyleSpan italicSpan = new StyleSpan(Typeface.ITALIC);
StyleSpan boldItalicSpan = new StyleSpan(Typeface.BOLD_ITALIC);
spannableString.setSpan(boldSpan, 0, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(italicSpan, 2, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(boldItalicSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

StyleSpan: Sets the text style, such as italic or bold

TypefaceSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
TypefaceSpan monospace = new TypefaceSpan("monospace");
TypefaceSpan serif = new TypefaceSpan("serif");
TypefaceSpan sans_serif = new TypefaceSpan("sans-serif");
spannableString.setSpan(monospace, 0, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(serif, 2, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(sans_serif, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

TypefaceSpan: Sets text font types, such as Monospace, Serif, sans-serif, and so on

TextAppearanceSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
TextAppearanceSpan textAppearanceSpan = new TextAppearanceSpan(this, android.R.style.TextAppearance_Material);
spannableString.setSpan(textAppearanceSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

TextAppearanceSpan: Set the text appearance through the Style resource Settings, here use the system style resource

UnderlineSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
UnderlineSpan underlineSpan = new UnderlineSpan();
spannableString.setSpan(underlineSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

UnderlineSpan: Sets the text underline. The span can be used to highlight the text

StrikethroughSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
spannableString.setSpan(strikethroughSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

StrikethroughSpan: Sets the StrikethroughSpan

SuperscriptSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan"); SuperscriptSpan superscriptSpan = new SuperscriptSpan(); RelativeSizeSpan = New RelativeSizeSpan(0.7f); RelativeSizeSpan = New RelativeSizeSpan(0.7f); spannableString.setSpan(relativeSizeSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(superscriptSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); mTextView.setText(spannableString);Copy the code

SuperscriptSpan: Sets text to superscript

SubscriptSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan"); SubscriptSpan subscriptSpan = new SubscriptSpan(); RelativeSizeSpan = New RelativeSizeSpan(0.7f); RelativeSizeSpan = New RelativeSizeSpan(0.7f); spannableString.setSpan(relativeSizeSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(subscriptSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); mTextView.setText(spannableString);Copy the code

SubscriptSpan: Sets text as subscript

ImageSpan

code

SpannableString spannableString = new SpannableString("If I were Eason Chan");
ImageSpan imageSpan = new ImageSpan(this, R.drawable.ic_eason);
spannableString.setSpan(imageSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);
Copy the code

ImageSpan: Sets the image

conclusion

To summarize the Span mentioned above

  • ForegroundColorSpan: foreground scenery
  • BackgroundColorSpan: background color
  • ClickableSpan: Abstract class with clickable effects that override onClick methods in response to click events
  • URLSpan: hyperlinks
  • MaskFilterSpan: EmbossMaskFilter embossed effect, BlurMaskFilter blurred effect
  • RelativeSpan: Relative text size
  • AbsoluteSpan: Absolute size of text
  • ScaleXSpan: X-axis scaling
  • StyleSpan: Text style
  • TypefaceSpan: type of text font
  • TextApearanceSpan: Text appearance
  • UnderlineSpan: underline
  • StrikeThroughSpan: StrikeThroughSpan
  • SuperscriptSpan: superscript
  • SubscriptSpan: subscript
  • ImageSpan: picture

These Spans are a great way to polish your text and get complex and gorgeous text effects in a very simple way

Thanks for reading!

Charming a place to write