美文网首页优秀案例
SpannableStringBuilder实现TextView

SpannableStringBuilder实现TextView

作者: 几圈年轮 | 来源:发表于2020-01-13 19:40 被阅读0次

    前言

    想要在TextView 的文本添加一些突出文字,然后点击可以进行跳转,首先想到的就是TextView拼接,但是考虑到换行后的显示又不是很合适,一番查询后发现了SpannableStringBuilder这个类,不仅可以实现想要的效果,还可以更加神奇,究竟怎么神奇呢,我们先看一下效果图:

    效果图

    每一行都只是一个TextView,既可以高亮显示文本,而且可以插入图片,并对部分内容设置点击事件,这就是SpannableStringBuilder可以达到的效果,接下来让我们详细看一下SpannableStringBuilder这个神奇的类及其使用方法。

    简介

    谷歌官方的解释是:

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

    翻译后就是:这是内容和标记都可以更改的文本的类。

    简而言之就是:可以为我们的TextView所显示的String添加各种的样式,例如:颜色、字号、删除线、斜体,甚至是图片,从而到达突出显示的目的,而且可以同时添加单独的点击样式,实现不同的点击反馈。

    SpannableStringBuilder有个相似类SpannableString,区别类似与StringBuilderString,就是SpannableStringBuilder可以使用append方法拼接,而SpannableString不可,需要初始化时传入字符串。

    方法详细

    方法setSpan(Object what, int start, int end, int flags),用指定的对象标记指定的文本范围。

    参数说明:

    1. what :String不同的Span,即不同的样式,包括以下可用类:
    • BackgroundColorSpan : 文本背景色
    • ForegroundColorSpan : 文本颜色
    • MaskFilterSpan : 修饰效果,如模糊(BlurMaskFilter),浮雕
    • RasterizerSpan : 光栅效果
    • StrikethroughSpan : 删除线
    • SuggestionSpan : 相当于占位符
    • UnderlineSpan : 下划线
    • AbsoluteSizeSpan : 文本字体(绝对大小)
    • DynamicDrawableSpan : 设置图片,基于文本基线或底部对齐。
    • ImageSpan : 图片
    • RelativeSizeSpan : 相对大小(文本字体)
    • ScaleXSpan : 基于x轴缩放
    • StyleSpan : 字体样式:粗体、斜体等
    • SubscriptSpan : 下标(数学公式会用到)
    • SuperscriptSpan : 上标(数学公式会用到)
    • TextAppearanceSpan : 文本外貌(包括字体、大小、样式和颜色)
    • TypefaceSpan : 文本字体
    • URLSpan : 文本超链接
    • ClickableSpan : 点击事件
    1. start :标识String中Span 样式的开始位置;

    2. end :标识String中Span样式的结束位置;

    3. flags:用于控制行为,如同开闭区间,通常设置为0或Spanned中定义的常量,常用的有

    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE:前后都不包括;
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE:前面不包括,后面包括;
    Spannable.SPAN_INCLUSIVE_EXCLUSIVE:前面包括,后面不包括;
    Spannable.SPAN_INCLUSIVE_INCLUSIVE:前后都包括。

    更多flag参数可以点击查看Android开发文档SpannableStringBuilder

    使用例子

    首先定义并初始化一个TextView控件,创建SpannableStringBuilder,传入需要显示的字符串内容,设置SpannableString参数内容,通过setText方法显示出来。

    (1)字体颜色设置ForegroundColorSpan

    SpannableStringBuilder spanString01 = new SpannableStringBuilder("风急天高猿啸哀");
    ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.RED);
    spanString01.setSpan(foregroundColorSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
    mTvAdvanced01.setText(spanString01);
    

    (2)字体背景颜色BackgroundColorSpan

    SpannableStringBuilder spanString02 = new SpannableStringBuilder("渚清沙白鸟飞回");
    BackgroundColorSpan backgroundColorSpan = new BackgroundColorSpan(Color.YELLOW);
    spanString02.setSpan(backgroundColorSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    mTvAdvanced02.setText(spanString02);
    

    (3)字体大小AbsoluteSizeSpan

    SpannableStringBuilder spanString03 = new SpannableStringBuilder("无边落木萧萧下");
    AbsoluteSizeSpan absoluteSizeSpan = new AbsoluteSizeSpan(30);
    spanString03.setSpan(absoluteSizeSpan, 4, 7, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    mTvAdvanced03.setText(spanString03);
    

    (4)粗体、斜体StyleSpan

    SpannableStringBuilder spanString04 = new SpannableStringBuilder("不尽长江滚滚来");
    StyleSpan styleSpan = new StyleSpan(Typeface.BOLD_ITALIC);
    spanString04.setSpan(styleSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    mTvAdvanced04.setText(spanString04);
    

    (5)删除线StrikethroughSpan

    SpannableStringBuilder spanString05 = new SpannableStringBuilder("万里悲秋常作客");
    StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
    spanString05.setSpan(strikethroughSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    mTvAdvanced05.setText(spanString05);
    

    (6)下划线UnderlineSpan

    SpannableStringBuilder spanString06 = new SpannableStringBuilder("百年多病独登台");
    UnderlineSpan underlineSpan = new UnderlineSpan();
    spanString06.setSpan(underlineSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    mTvAdvanced06.setText(spanString06);
    

    (7)图片ImageSpan

    SpannableStringBuilder spanString07 = new SpannableStringBuilder("艰难苦恨繁霜鬓");
    ImageSpan span = new ImageSpan(this, R.drawable.ic_text);
    spanString07.setSpan(span, 4, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    mTvAdvanced07.setText(spanString07);
    

    (8)点击事件ClickableSpan

    SpannableStringBuilder spanString08 = new SpannableStringBuilder("潦倒新停浊酒杯");
    ClickableSpan clickableSpan = new ClickableSpan() {
        @Override
        public void onClick(@NonNull View widget) {
            Toast.makeText(AdvancedTextViewActivity.this, "杜甫", Toast.LENGTH_SHORT).show();
        }
    };
    spanString08.setSpan(clickableSpan, 4, 7, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
    mTvAdvanced08.setText(spanString08);
    mTvAdvanced08.setMovementMethod(LinkMovementMethod.getInstance());
    

    (9)SpannableStringBuilder组合使用

    SpannableStringBuilder spanString09 = new SpannableStringBuilder();
    spanString09.append("杜甫 ,字子美,自号少陵野老,后人称为'诗圣'。");
    //图片
    ImageSpan imageSpan = new ImageSpan(this, R.drawable.ic_author);
    spanString09.setSpan(imageSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
    //点击事件
    ClickableSpan cbSpan = new ClickableSpan() {
        @Override
        public void onClick(@NonNull View widget) {
            Toast.makeText(AdvancedTextViewActivity.this, "杜甫", Toast.LENGTH_SHORT).show();
        }
    };
    spanString09.setSpan(cbSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
    //文字颜色
    ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.WHITE);
    spanString09.setSpan(colorSpan, 10, 14, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
    //文字背景颜色
    BackgroundColorSpan bgColorSpan = new BackgroundColorSpan(Color.BLUE);
    spanString09.setSpan(bgColorSpan, 10, 14, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
    mTvAdvanced09.setText(spanString09);
    mTvAdvanced09.setMovementMethod(LinkMovementMethod.getInstance());
    

    关于SpannableStringBuilder的介绍及使用就到这里了,我也已经把例子上传了到了Github开发记录
    ,欢迎点击查阅及Star,我也会继续补充其它有用的知识及例子在项目上。

    欢迎点赞/评论,因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注公众号:几圈年轮,查看更多有趣的技术、工具、闲言、资源。


    公众号.png

    相关文章

      网友评论

        本文标题:SpannableStringBuilder实现TextView

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