preface

I’ve had a job search for two weeks. Although I often work overtime, I now live a fuller and more meaningful life than my previous job. Now I have some free time to continue my sharing journey ~~

The effect

Don’t say anything. Just look cool.




The effect

‘What, that’s cool? ‘You might say what if I told you that there’s only one TextView in this page? You read that right! Just one TextView and nothing else!!

implementation

It’s time to introduce SpannableStringBuilder to everyone by looking at Google’s official introduction

This is the class for text whose content and markup can both be changed.

Unlike String, StringBuffer, etc., we can only set the text content to the TextView, and the text style can only be controlled by the TextView, and it is not very customizable.

introduce

SpannableStringBuilder has a full brother — SpannableString. Does that sound familiar? StringBuilder, String… Yes, the difference between SpannableStringBuilder and SpannableString is similar to StringBuilder and String, in that SpannableStringBuilder can be spliced, whereas SpannableString cannot be spliced.




Class General Hierarchy

Images from blog.csdn.net/fengkuanghu… As you can see from the figure, they both inherit CharSequence, so they can be used directly in TextView setText

Major methods

SpannableStringBuilder and SpannableString mainly change text styles by using setSpan(Object What, int Start, int End, int Flags). Corresponding parameters:

  • Start: Specifies the start position of the Span
  • End: Specifies the end position of a Span, not including this position.
  • Flags: There are four values
    • Spannable.SPAN_EXCLUSIVE_INCLUSIVE: Characters entered before Span do not apply the Span effect. Characters entered after Span apply the Span effect.
    • Spannable.SPAN_INCLUSIVE_EXCLUSIVE: Characters entered before Span apply the Span effect. Characters entered after Span do not apply the Span effect.
    • Spannable.SPAN_INCUJSIVE_INCLUSIVE: Applies the Span effect to all characters entered before and after the Span.
    • Spannable.SPAN_EXCLUSIVE_EXCLUSIVE: Neither before nor after.
  • What: Different spans correspond to different styles. The known available classes are:
    • BackgroundColorSpan: Text background color
    • ForegroundColorSpan: Text color
    • MaskFilterSpan: Embellish effects, such as BlurMaskFilter emboss
    • RasterizerSpanRaster effect
    • StrikethroughSpan: delete lines
    • SuggestionSpan: is equivalent to a placeholder
    • UnderlineSpan: the underline
    • AbsoluteSizeSpan: Text font (absolute size)
    • DynamicDrawableSpan: Sets images based on text baseline or bottom alignment.
    • ImageSpanImages:
    • RelativeSizeSpan: Relative size (text font)
    • ScaleXSpan: Scaling based on the x axis
    • StyleSpan: Font style: bold, italic, etc
    • SubscriptSpan: subscript (used in mathematical formulas)
    • SuperscriptSpan: superscript (used in mathematical formulas)
    • TextAppearanceSpan: Text appearance (including font, size, style, and color)
    • TypefaceSpan: Text font
    • URLSpan: Text hyperlink
    • ClickableSpan: Click event

usage

Create a TextView in XML:

    Copy the code

SpannableStringBuilder is similar to SpannableString, so here’s an example of SpannableString

  • SpannableString
    • Modify font color 
      Private void mode1() {SpannableString SpannableString = new SpannableString(" Shadow IV has gone rogue "); ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#009ad6")); spannableString.setSpan(colorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); ((TextView)findViewById(R.id.mode1)).setText(spannableString); }Copy the code

      createSpannableStringPass in the string you want to display. useForegroundColorSpanSets the color for the text.

      Effect:




      The font color

The following uses SpannableStringBuilder as an example

  • SpannableStringBuilder

    • Modify font color

      /** * Private void mode2() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); SpannableString. Append (" shadow IV "); Spannablestring.append (" already going crazy "); ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#009ad6")); spannableString.setSpan(colorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); ((TextView)findViewById(R.id.mode2)).setText(spannableString); }Copy the code

      Here you can see the splicability of SpannableStringBuilder, which also uses ForegroundColorSpan to set the color for the text. Effect:




      The font color

    • Set the background color 
      Private void mode3() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); Spannablestring.append (" Shadow IV is already running wild "); BackgroundColorSpan bgColorSpan = new BackgroundColorSpan(Color.parseColor("#009ad6")); spannableString.setSpan(bgColorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); ((TextView)findViewById(R.id.mode3)).setText(spannableString); }Copy the code

      useBackgroundColorSpanSets the background color.

      Effect:




      The background color

    • Set font size 
      /** * Private void mode4() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); Spannablestring.append (" Shadow IV is already running wild "); AbsoluteSizeSpan absoluteSizeSpan = new AbsoluteSizeSpan(20); spannableString.setSpan(absoluteSizeSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); ((TextView)findViewById(R.id.mode4)).setText(spannableString); }Copy the code

      useAbsoluteSizeSpanSet the font size.

      Effect:




      The font size

    • Set bold to italic 
      Private void mode5() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); Spannablestring.append (" Shadow IV is already running wild "); //setSpan StyleSpan StyleSpan = new StyleSpan(typeface.bold); Spannablestring. setSpan(styleSpan, 0, 3, spannable. SPAN_EXCLUSIVE_INCLUSIVE); StyleSpan styleSpan2 = new StyleSpan(Typeface.ITALIC); // Italic spannableString.setSpan(styleSpan2, 3, 6, spannable. SPAN_EXCLUSIVE_INCLUSIVE); StyleSpan styleSpan3 = new StyleSpan(Typeface.BOLD_ITALIC); Spannablestring. setSpan(styleSpan3, 6, 9, spannable. SPAN_EXCLUSIVE_INCLUSIVE); ((TextView)findViewById(R.id.mode5)).setText(spannableString); }Copy the code

      useStyleSpanSet bold \ italic, as shown in the example, to be used multiple timessetSpanIt doesn’t matter.

      Effect:




      Bold \ italic

    • Delete the line 
      /** * Private void mode6() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); Spannablestring.append (" Shadow IV is already running wild "); StrikethroughSpan strikethroughSpan = new StrikethroughSpan(); spannableString.setSpan(strikethroughSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); ((TextView)findViewById(R.id.mode6)).setText(spannableString); }Copy the code

      StrikethroughSpa useStrikethroughSpanSet the stripper.

      Effect:




      Delete the line

    • The underline 
      Private void mode7() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); Spannablestring.append (" Shadow IV is already running wild "); UnderlineSpan underlineSpan = new UnderlineSpan(); spannableString.setSpan(underlineSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); ((TextView)findViewById(R.id.mode7)).setText(spannableString); }Copy the code

      useUnderlineSpanSet underscores.

      Effect:




      The underline

    • The picture

      Not only supports text styles, but also inserts images. Oh, my godSpannableStringBuilder~ ~ 
      Private void mode8() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); Spannablestring.append (" Shadow IV is already running wild "); ImageSpan imageSpan = new ImageSpan(this, R.mipmap.ic_launcher); //Drawable Drawable = getResources().getDrawable(r.map.ic_launcher); //drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); //ImageSpan imageSpan1 = new ImageSpan(drawable); Spannablestring. setSpan(imageSpan, 6, 8, spannable. SPAN_EXCLUSIVE_INCLUSIVE); ((TextView)findViewById(R.id.mode8)).setText(spannableString); }Copy the code

      Set the image with ImageSpan and replace the index6 and 7 characters with the image, that is, the image occupies the position of Index6 and 7.

      Effect:




      The picture

    • Click on the event

      Insert image is already very perverted, but also support click events. 
      /** * Private void mode9() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); Spannablestring.append (" Shadow IV is already running wild "); ClickableSpan clickableSpan = new ClickableSpan() { @Override public void onClick(View view) { Toast.maketext (mainactivity.this, "please don't highlight me ", toast.length_short).show(); }}; spannableString.setSpan(clickableSpan, 5, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); TextView textView = (TextView)findViewById(R.id.mode9); textView.setText(spannableString); textView.setMovementMethod(LinkMovementMethod.getInstance()); }Copy the code

      useClickableSpanSet the click event, and then finally addtextView.setMovementMethod(LinkMovementMethod.getInstance());. The characters that specify index 5, 6, and 7 become clickable text; the rest of the code remains unclickable.

      Effect:




      Click on the event

      Some students said that after setting the click event part, they also need to set the click event for the whole TextView. What question do you want to know? Here is a solution I saw on CSDN to solve this problem from another Angle. — Solutions

    • Use a combination of

      Of course, all of the above can be combined. To a 🌰 
      */ private void mode10() {SpannableStringBuilder spannableString = new SpannableStringBuilder(); Spannablestring.append (" Shadow IV is already running wild "); // ImageSpan ImageSpan = new ImageSpan(this, r.map.ic_launcher); spannableString.setSpan(imageSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); ClickableSpan = new ClickableSpan() {@override public void onClick(View) { Toast.maketext (mainactivity.this, "please don't highlight me ", toast.length_short).show(); }}; spannableString.setSpan(clickableSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); ForegroundColorSpan colorSpan = new ForegroundColorSpan(color.parsecolor ("#FFFFFF")); spannableString.setSpan(colorSpan,5, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); // Text background Color BackgroundColorSpan bgColorSpan = new BackgroundColorSpan(color.parsecolor ("# 009AD6 ")); spannableString.setSpan(bgColorSpan, 5, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); TextView textView = (TextView)findViewById(R.id.mode10); textView.setText(spannableString); textView.setMovementMethod(LinkMovementMethod.getInstance()); }Copy the code

      The examplesImageSpan,ClickableSpan,ForegroundColorSpan,BackgroundColorSpanCarried out a combination of use, we can according to their own needs, to arbitrary collocation.

      Effect :(the GIF shown at the beginning)




      The effect

conclusion

After watching SpannableStringBuilder, String is much more powerful than SpannableString. Well, that’s all. Sleep on it

The source address

GitHub

The resources

SpannableString and SpannableStringBuilder API documentation (self-provided ladder) SpannableString and SpannableStringBuilder

Thank you for pointing out the above mistakes