Android SpannableString detailed analysis

Article Directory

What is SpannableString?

SpannableString is a kind of CharSequence. The original CharSequence is just a sequence of characters without any style. It SpannableStringcan retouch the specified characters on the basis of the character sequence. In development, TextView can be setText(CharSequence)passed in SpannableStringas a parameter to achieve display The effect of different styles of text.

Creation method

SpannableString spannableString = new SpannableString("如果我是陈奕迅");

How to SpannableStringretouch?

Generally set in the following ways

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

Here to explain the meaning of several parameters

what: all kinds of polishing SpannableString Span;
int: The subscript at the beginning of the text field that needs to be polished;
end: The subscript at the end of the text field to be polished;
flags: The flag bits that determine whether the start and end subscripts are included, there are four optional parameters
- SPAN_INCLUSIVE_EXCLUSIVE: include the start subscript, but not the end subscript
- SPAN_EXCLUSIVE_INCLUSIVE: Do not include the start subscript, but include the end subscript
- SPAN_INCLUSIVE_INCLUSIVE: Include both the start subscript and the end subscript
- SPAN_EXCLUSIVE_EXCLUSIVE: Does not include the start subscript, nor the end subscript

An important role is involved here, which is a variety of spans, which determine how we want to retouch the text, and the last three parameters determine which text to retouch. For convenience, the following flags use the SPAN_INCLUSIVE_EXCLUSIVE mode by default.

Various Spans

First look at a class structure diagram to understand the relationship between various Spans
Insert picture description here

It can be seen that all Spans inherit from the abstract class CharacterStyle. In addition, MetricAffectingSpan, ReplacementSpan and ClickableSpan are all abstract classes. The following shows some commonly used Spans

ForegroundColorSpan Foreground

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.GREEN);
spannableString.setSpan(foregroundColorSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

ForegroundColorSpan: ForegroundColorSpan: Foreground color, that is to color the text, the color is set to GREEN, start is 4, end is 7, it should be "Eason Chan" and the three words are displayed in green, and see the actual effect

Insert picture description here

BackgroudColorSpan background color

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
BackgroundColorSpan backgroundColorSpan = new BackgroundColorSpan(Color.GREEN);
spannableString.setSpan(backgroundColorSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

BackgroudColorSpan: Similar to ForegroundColorSpan, color the text background

Insert picture description here

ClickableSpan click event

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
ClickableSpan clickableSpan = new ClickableSpan() {
    
    
    @Override
    public void onClick(View widget) {
    
    
        Toast.makeText(MainActivity.this, "如果我是陈奕迅", 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);

ClickableSpan: is an abstract class that achieves clickable effects. You can override the onClick method to achieve click events. Here, click the three words "Eason Chan" to simply play toast

Insert picture description here

URLSpan hyperlink

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
URLSpan urlSpan = new URLSpan("https://www.baidu.com/s?ie=UTF-8&wd=陈奕迅");
spannableString.setSpan(urlSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setMovementMethod(LinkMovementMethod.getInstance());
mTextView.setText(spannableString);

URLSpan: to achieve the effect of hyperlinks, inherited from ClickableSpan, click to jump to the browser

Insert picture description here

MaskFilterSpan fuzzy relief

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
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 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);

MaskFilterSpan: The construction method accepts MaskFilter as a parameter, which has two subclasses: EmbossMaskFilter and BlurMaskFilter
EmbossMaskFilter to achieve embossing effect

EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius)

direction: float array, define an array scalar [x,y,z] of length 3 to specify the direction of the light source
ambient: ambient light brightness, 0~1
specular: Specular reflection coefficient
blurRadius: blur radius, must be >0

BlurMaskFilter achieves blur effect

BlurMaskFilter(float radius, Blur style)

radius: blur radius
style: There are four optional parameters
- BlurMaskFilter.Blur.NORMAL: Blur inside and outside
- BlurMaskFilter.Blur.OUTER: External blur
- BlurMaskFilter.Blur.INNER: internal blur
- BlurMaskFilter.Blur.SOLID: bold inside, blurred outside

Insert picture description here

RelativeSizeSpan font relative size

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
RelativeSizeSpan relativeSizeSpan = new RelativeSizeSpan(1.5f);
spannableString.setSpan(relativeSizeSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

RelativeSizeSpan: Set the relative size of the font, here is set to 1.5 times the size of the TextView, see the picture

Insert picture description here

AbsoluteSizeSpan Absolute font size

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
AbsoluteSizeSpan absoluteSizeSpan = new AbsoluteSizeSpan(40, true);
spannableString.setSpan(absoluteSizeSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

AbsoluteSizeSpan: Set the relative absolute size of the font, 40 means the text size, true means the unit is dip, if false means px

Insert picture description here

ScaleXSpan font x-axis scaling

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
ScaleXSpan scaleXSpan= new ScaleXSpan(1.5f);
spannableString.setSpan(scaleXSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

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

Insert picture description here

StyleSpan style

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
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);

StyleSpan: Set the text style, such as italic, bold
Insert picture description here

TypefaceSpan font

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
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);

TypefaceSpan: Set the text font type, such as monospace, serif, sans-serif, etc.

Insert picture description here

TextAppearanceSpan text appearance

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
TextAppearanceSpan textAppearanceSpan = new TextAppearanceSpan(this, android.R.style.TextAppearance_Material);
spannableString.setSpan(textAppearanceSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

TextAppearanceSpan: Set the appearance of the text, through the style resource setting, here the system style resource is used

Insert picture description here

UnderlineSpan underline

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
UnderlineSpan underlineSpan = new UnderlineSpan();
spannableString.setSpan(underlineSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

UnderlineSpan: Set the text underline, you can use this span when highlighting text
Insert picture description here

StrikethroughSpan strikethrough

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
spannableString.setSpan(strikethroughSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

StrikethroughSpan: Set text strikethrough

Insert picture description here

SuperscriptSpan superscript

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
SuperscriptSpan superscriptSpan = new SuperscriptSpan();
RelativeSizeSpan relativeSizeSpan = new RelativeSizeSpan(0.8f);
spannableString.setSpan(relativeSizeSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(superscriptSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

SuperscriptSpan: Set text as superscript

Insert picture description here

SubscriptSpan subscript

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
SubscriptSpan subscriptSpan = new SubscriptSpan();
RelativeSizeSpan relativeSizeSpan = new RelativeSizeSpan(0.8f);
spannableString.setSpan(relativeSizeSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(subscriptSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

SubscriptSpan: Set text as subscript

Insert picture description here

ImageSpan Pictures

SpannableString spannableString = new SpannableString("如果我是陈奕迅");
ImageSpan imageSpan = new ImageSpan(this, R.drawable.ic_eason);
spannableString.setSpan(imageSpan, 4, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTextView.setText(spannableString);

ImageSpan: Set the picture

Insert picture description here

to sum up

Summarize the Span mentioned above

ForegroundColorSpan: Foreground color
BackgroundColorSpan: background color
ClickableSpan: abstract class, clickable effect, override onClick method to respond to click events
URLSpan: Hyperlink
MaskFilterSpan: EmbossMaskFilter embossing effect, BlurMaskFilter blur effect
RelativeSpan: Relative size of text
AbsoluteSpan: Absolute text size
ScaleXSpan: x-axis zoom
styleSpan: text style
TypefaceSpan: text font type
TextApearanceSpan: text appearance
UnderlineSpan: underline
StrikeThroughSpan: Strikethrough
SuperscriptSpan: Superscript
SubscriptSpan: Subscript
ImageSpan: Pictures

Author: CharmingWong
link: https: //www.jianshu.com/p/472fd3e32324
Source: Jane books
are copyrighted by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.