Create colorful text display effect with SpannableString

https://www.jianshu.com/p/84067ad289d2

Textview should be familiar to everyone. Text display controls! Just use textview to display ordinary text. OK, it's very simple. Those who get started with Android can look at it outside the door. Ha ha, I'm kidding. What if the design requires inserting emoticons in textview like wechat chat emoticons in the development requirements? Some friends will say, "I can add pictures to textview. It's drawableLeft and drawableRight!" well, it's OK. It's a method, but there is a limitation. First, pictures can only be set at both ends of textview. Second, only one picture can be set at both ends. What if the picture is in the middle of the text? There's nothing you can do. If you can use SpannableString, it's not difficult to solve this problem. It's Just So So.

Therefore, whether you are experiencing the above problems or not, please stop and read this short article carefully and patiently. It can not only easily realize the above design requirements, but also harvest other cool effects, which may help you solve the problems you are troubled with.

SpannableString, like String, is a String type. Similarly, TextView can directly set SpannableString as display text. The difference is that SpannableString can display strings in various forms and styles by using its method setSpan. The important thing is to specify the set interval, That is, format the substring within the specified subscript interval of the String.

The setSpan(Object what, int start, int end, int flags) method requires the user to enter four parameters. What indicates the format to be set, which can be foreground color, background color, clickable text, etc. start indicates the start subscript of the substring to be formatted. Similarly, end indicates the end subscript. The flags attribute is interesting. There are four attributes:

Spanned.SPAN_INCLUSIVE_EXCLUSIVE   From start subscript to end subscript, including start subscript
Spanned.SPAN_INCLUSIVE_INCLUSIVE   From start subscript to end subscript, including both start subscript and end subscript
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE   From start subscript to end subscript, but excluding start subscript and end subscript
Spanned.SPAN_EXCLUSIVE_INCLUSIVE   From start subscript to end subscript, including end subscript

Let's interpret several common Span formats one by one:

• ForegroundColorSpan

ForegroundColorSpan sets the foreground color for the text. The effect is similar to setTextColor() of TextView. The implementation method is as follows:

SpannableString spannableString = new SpannableString("Sets the foreground color of the text to light blue"); ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#0099EE")); spannableString.setSpan(colorSpan, 9, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setText(spannableString);

The set interval is 9 to the end of the string, that is, the three words "light blue" in the figure.

• BackgroundColorSpan

BackgroundColorSpan, which sets the background color and effect for the text and the setBackground() class of TextView. The implementation method is as follows:

SpannableString spannableString = new SpannableString("Set the background color of text to light green"); BackgroundColorSpan colorSpan = new BackgroundColorSpan(Color.parseColor("#AC00FF30")); spannableString.setSpan(colorSpan, 9, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setText(spannableString);

• RelativeSizeSpan

RelativeSizeSpan: set the relative size of text. Based on the original text size of TextView, set the relative size of text. The implementation method is as follows:

SpannableString spannableString = new SpannableString("Ten thousand tall buildings rise from the ground"); RelativeSizeSpan sizeSpan01 = new RelativeSizeSpan(1.2f); RelativeSizeSpan sizeSpan02 = new RelativeSizeSpan(1.4f); RelativeSizeSpan sizeSpan03 = new RelativeSizeSpan(1.6f); RelativeSizeSpan sizeSpan04 = new RelativeSizeSpan(1.8f); RelativeSizeSpan sizeSpan05 = new RelativeSizeSpan(1.6f); RelativeSizeSpan sizeSpan06 = new RelativeSizeSpan(1.4f); RelativeSizeSpan sizeSpan07 = new RelativeSizeSpan(1.2f); spannableString.setSpan(sizeSpan01, 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(sizeSpan02, 1, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(sizeSpan03, 2, 3, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(sizeSpan04, 3, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(sizeSpan05, 4, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(sizeSpan06, 5, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(sizeSpan07, 6, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setText(spannableString);

• StrikethroughSpan

Strikethrough span is used to set the middle dash line for the text, which is often called the strikethrough. The implementation method is as follows:

SpannableString spannableString = new SpannableString("Set strikeout for text"); StrikethroughSpan strikethroughSpan = new StrikethroughSpan(); spannableString.setSpan(strikethroughSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setText(spannableString);

Is there any excitement to see that tmall can realize the discount effect every minute?

• UnderlineSpan

UnderlineSpan, which sets the underline for the text. The specific implementation method is as follows:

SpannableString spannableString = new SpannableString("Underline text"); UnderlineSpan underlineSpan = new UnderlineSpan(); spannableString.setSpan(underlineSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setText(spannableString);

• SuperscriptSpan

Superscript span, set superscript. The specific implementation method is as follows:

SpannableString spannableString = new SpannableString("Superscript text"); SuperscriptSpan superscriptSpan = new SuperscriptSpan(); spannableString.setSpan(superscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setText(spannableString);

It can be seen from the effect drawing that the text size set as superscript is the same as that of the following text. As long as we modify it a little and set small font text as superscript in combination with RelativeSizeSpan, we can realize the exponential formula every minute. We don't need 2 ^ 2 + 3 ^ 2 = 13, which is lack of aesthetic mathematical formula. Is it super practical?

• SubscriptSpan

SubscriptSpan is used to set subscripts. Its function is similar to that of setting superscripts. It will not be described too much. The specific implementation methods are as follows:

SpannableString spannableString = new SpannableString("Subscript text"); SubscriptSpan subscriptSpan = new SubscriptSpan(); spannableString.setSpan(subscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setText(spannableString);

• StyleSpan

StyleSpan sets the style (bold and italic) for text, which is similar to TextView property textStyle. The implementation method is as follows:

SpannableString spannableString = new SpannableString("Set bold and italic style for text"); StyleSpan styleSpan_B = new StyleSpan(Typeface.BOLD); StyleSpan styleSpan_I = new StyleSpan(Typeface.ITALIC); spannableString.setSpan(styleSpan_B, 5, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); spannableString.setSpan(styleSpan_I, 8, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setHighlightColor(Color.parseColor("#36969696")); textView.setText(spannableString);

• ImageSpan

ImageSpan is used to set text images. The implementation method is as follows:

SpannableString spannableString = new SpannableString("Add emoticons to text (emoticons)"); Drawable drawable = getResources().getDrawable(R.mipmap.a9c); drawable.setBounds(0, 0, 42, 42); ImageSpan imageSpan = new ImageSpan(drawable); spannableString.setSpan(imageSpan, 6, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setText(spannableString);

Isn't this one cool? Add an analysis algorithm to convert the specific text in the text into specific expression pictures, and realize the chat expression display effect in minutes. There are wooden friends!

• ClickableSpan

ClickableSpan: set the clickable text. The text with this attribute can correspond to the user's click event. As for the click event, the user can customize it. Just like the effect picture display, the user can click to jump to the page. The specific implementation methods are as follows:

SpannableString spannableString = new SpannableString("Set click events for text"); MyClickableSpan clickableSpan = new MyClickableSpan("http://www.jianshu.com/users/dbae9ac95c78"); spannableString.setSpan(clickableSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setMovementMethod(LinkMovementMethod.getInstance()); textView.setHighlightColor(Color.parseColor("#36969696")); textView.setText(spannableString); /***************************************************************/ class MyClickableSpan extends ClickableSpan { private String content; public MyClickableSpan(String content) { this.content = content; } @Override public void updateDrawState(TextPaint ds) { ds.setUnderlineText(false); } @Override public void onClick(View widget) { Intent intent = new Intent(MainActivity.this, OtherActivity.class); Bundle bundle = new Bundle(); bundle.putString("content", content); intent.putExtra("bundle", bundle); startActivity(intent); } }

In the code, we customize the MyClickableSpan class, inherit it to ClickableSpan, and override some of its methods. ds.setUnderlineText() controls whether to make clickable text display underline. Obviously, in the above code, I selected false to not display underline. The specific implementation method of onClick click event is written in it. In the above code, we rewrite the onClick method of ClickableSpan to achieve the jump effect of Activity and pass the jump data.

Note: if you want to really click the text using ClickableSpan, you must set the setMovementMethod method method for TextView, otherwise you don't click the corresponding. As for the setHighlightColor method, you control the background color of the click.

• URLSpan

URLSpan, set hyperlink text. In fact, smart guys can achieve the effect of hyperlink text when talking about ClickableSpan. Just rewrite the onClick click event, and indeed read the source code of URLSpan. URLSpan inherits from ClickableSpan, which is the same as imagined, that is, rewrite the onClick event of the parent class and open the link with the system's own browser, The specific implementation method is as follows:

SpannableString spannableString = new SpannableString("Set hyperlink for text"); URLSpan urlSpan = new URLSpan("http://www.jianshu.com/users/dbae9ac95c78"); spannableString.setSpan(urlSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView.setMovementMethod(LinkMovementMethod.getInstance()); textView.setHighlightColor(Color.parseColor("#36969696")); textView.setText(spannableString);

The source code of URLSpanonClick event is as follows:

@Override public void onClick(View widget) { Uri uri = Uri.parse(getURL()); Context context = widget.getContext(); Intent intent = new Intent(Intent.ACTION_VIEW, uri); intent.putExtra(Browser.EXTRA_APPLICATION_ID, context.getPackageName()); try { context.startActivity(intent); } catch (ActivityNotFoundException e) { Log.w("URLSpan", "Actvity was not found for intent, " + intent.toString()); } }

In addition, MaskFilterSpan can achieve blur and relief effects, and RasterizerSpan can achieve grating effects. Because the above two are not used frequently and the effect is not very obvious, we don't need to explain in detail. Interested partners might as well try it.

Many development partners should know StringBuilder and can use the append() method to realize string splicing, which is very convenient. Similarly, SpannableStringBuilder is also included in SpannableString. As the name suggests, it is to realize a splicing effect of SpannableString. It is also the append() method, which can realize the splicing of SpannableString with various style effects. It is very practical.

After seeing so many effects, is it full of goods? Finally, I'm attaching a small colored egg. My friends can use their brains to think about how to achieve it! If you have better ideas, you might as well leave a message in the comment area to share with everyone!

github download address - contains menu implementation code

The author states: if there are improper expressions or wrong explanations in the article, you can help point out those who are reading the article. If you have doubts, you can also ask questions or private letters in the comment area. We look forward to your opinions and suggestions. You are welcome to pay attention to the exchange.

6 November 2021, 00:11 | Views: 3848