美文网首页自定义控件android技术
Android TextView 部分文字高亮显示

Android TextView 部分文字高亮显示

作者: 雨落川川 | 来源:发表于2020-06-12 11:33 被阅读0次

今天得到一个需求,要求在一段文字中,被“《》”括中的内容需要高亮显示,具体效果如下


A12C3F3B4C6A8F0CD99F5DA7CC6CEA40.jpg

如何实现?

SpannableString 其实和String一样的,都是一种字符串类型,所以SpannableString 可以直接作为TextView的显示文本,不同的是SpannableString 可以通过其提供的方法setSpan()实现个中国形式风格的显示,重要的是可以指定设置的区域,话不多说,先看属性:
Spanned.SPAN_INCLUSIVE_EXCLUSIVE从起始下标到终了下标,包括起始下标
Spanned.SPAN_INCLUSIVE_INCLUSIVE从起始下标到终了下标,同时包括起始下标和终了下标
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 从起始下标到终了下标,但都不包括起始下标和终了下标
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 从起始下标到终了下标,包括终了下标

SpannableString 的 setSpan()方法可以多个同时使用,实现多种效果的叠加;

常见简单的用法:

 SpannableString spannableString = new SpannableString("给字体设置前景色为淡蓝色");
        ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor(("#0099ee")));
        spannableString.setSpan(colorSpan, 3, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        textView.setText(spannableString);
ForegroundColorSpan

为文本设置前景色,效果等同于TextView 的 setTextColor()
上面实现了效果为文本中的第三个字开始到结束设置颜色为#0099ee

BackgroundColorSpan

顾名思义,设置文本的背景色,效果等同于setBackground()方法。

RelativeSizeSpan

设置文字的相对大小,在TextView原有的文字大小基础上,相对设置文字大小,实现方法如下:

SpannableString spannableString = new SpannableString("万丈高楼平地起");

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);
StrikethroughtSpan

为文字设置删除线

SpannableString spannableString = new SpannableString("为文字设置删除线");
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
spannableString.setSpan(strikethroughSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
SuperscriptSpan SubscriptSpan

为文字设置上标,为文字设置下标.

SpannableString spannableString = new SpannableString("为文字设置上标");
SuperscriptSpan superscriptSpan = new SuperscriptSpan();
spannableString.setSpan(superscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
StyleSpan

为文字设置粗体,斜体风格

SpannableString spannableString = new SpannableString("为文字设置粗体、斜体风格");
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

惊喜的事情,给文字中加入表情图

SpannableString spannableString = new SpannableString("在文本中添加表情(表情)");
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);
ClickableSpan

设置文本中的可点击部分,响应点击事件,这个效果可以配合高亮来使用,点击“《》”选中的部分,跳转查看详情,也是我需要的效果,具体使用如下:

SpannableString spannableString = new SpannableString("为文字设置点击事件");
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);

点击事件可以自定义,但是注意
注意:使用ClickableSpan的文本如果想真正实现点击作用,必须为TextView设置setMovementMethod方法,否则没有点击响应,至于setHighlightColor方法则是控制点击是的背景色。

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);
    }
}

还有很多效果,用到这么多就写这么多,不写了,因为懒。

相关文章

网友评论

    本文标题:Android TextView 部分文字高亮显示

    本文链接:https://www.haomeiwen.com/subject/eliazhtx.html