多样式文本SpannableString

最新推荐文章于 2023-10-12 16:01:53 发布

原创最新推荐文章于 2023-10-12 16:01:53 发布 · 596 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何利用SpannableString在文本中添加多种样式，包括前景和背景颜色、字体大小、样式、删除线、下划线、角标、图片以及点击事件等。通过实例展示了各种Span的用法，如ForegroundColorSpan、BackgroundColorSpan、StyleSpan等，让文本呈现丰富效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpannableString:一段文本中可有同时拥有多个样式如下图
这里写图片描述

1.Spannable创建方法：

SpannableString spannableString = new SpannableString(string);//将字符串传入新建一个SpannableString 对象
SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(string);//创建一个可拓展的append()的spannableString对象，


//上面两者的关系类似于String和StringBuilder的关系

2.为Spannable添加Span样式

spannableString.setSpan(span,startoff,endoff,flag);//span为样式，startoff为运用样式起始的
//index,endoff为用于样式结束的index,flag有以下几种：
                            Spanned.SPAN_INCLUSIVE_INCLUSIVE：包括起始index，包括结束index
                            Spanned.SPAN_INCLUSIVE_EXCLUSIVE：包括起始index，不包括结束index
                            Spanned.SPAN_EXCLUSIVE_INCLUSIVE：不包括起始index，包括结束index
                            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE：不包括起始index，不包括结束index
//注意index是从0开始的

3.Span样式的种类: （样式可叠加）

ForegroundColorSpan：前景颜色（既字体的颜色）

这里写图片描述

ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(getResources().getColor(R.color.colorBlue));//创建前景色Span样式
 spannableString.setSpan(foregroundColorSpan, 7, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

BackgroundColorSpan：背景颜色

BackgroundColorSpan backgroundColorSpan = new BackgroundColorSpan(getResources().getColor(R.color.colorBlue));//创建背景色span样式
spannableString.setSpan(backgroundColorSpan, 7, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

RelativeSizeSpan：字体相对大小

这里写图片描述


        RelativeSizeSpan relativeSizeSpan = new RelativeSizeSpan(2.0f);//创建字体相对大小span样式
        spannableString.setSpan(relativeSizeSpan,7,9, Spanned.SPAN_INCLUSIVE_INCLUSIVE);

StyleSpan：字体样式（加粗Bold，斜体）

这里写图片描述

        StyleSpan boldSpan = new StyleSpan(Typeface.BOLD);//粗体Span样式
        spannableString.setSpan(boldSpan,7,9, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
        StyleSpan italicspan = new StyleSpan(Typeface.ITALIC);//斜体span样式
        spannableString.setSpan(italicspan,7,9, Spanned.SPAN_INCLUSIVE_INCLUSIVE);

StrikethroughSpan：中删线样式

这里写图片描述

        StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
        spannableString.setSpan(strikethroughSpan,7,9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

UnderlineSpan：下划线样式

这里写图片描述

        UnderlineSpan underlineSpan = new UnderlineSpan();//创建下划线span样式
        spannableString.setSpan(underlineSpan, 7, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

SuperscriptSpan：上角标样式

这里写图片描述

        SuperscriptSpan superscriptSpan = new SuperscriptSpan();
        spannableString.setSpan(superscriptSpan,8,9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

SubscriptSpan：下角标样式

这里写图片描述

        SubscriptSpan subscriptSpan = new SubscriptSpan();
        spannableString.setSpan(subscriptSpan,8,9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

DynamicDrawableSpan：设置图片，基于文字基线或文本底部对齐

//DynamicDrawableSpan.ALIGN_BASELINE参数是图片基于文本基线对齐
//DynamicDrawableSpan.ALIGN_BOTTOM参数是图片基于文本底部对齐
 DynamicDrawableSpan dynamicDrawableSpan = new DynamicDrawableSpan(DynamicDrawableSpan.ALIGN_BASELINE) {
            @Override
            public Drawable getDrawable() {
                Drawable drawable = getResources().getDrawable(R.drawable.picture);
                drawable.setBounds(0, 0, 100, 100);
                return drawable;
            }
        };
spannableString.setSpan(dynamicDrawableSpan,7,9,Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

ImageSpan：图片样式，与DynamicDrawableSpan差不多

这里写图片描述

        Drawable drawable = getResources().getDrawable(R.drawable.picture);//获得drawable对象
        drawable.setBounds(0,0,100,100);//设置drawable的大小
        ImageSpan imageSpan = new ImageSpan(drawable);//创建图片Span样式
        spannableString.setSpan(imageSpan,7,9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

ClickableSpan：可点击的样式（可监听点击事件完成跳转）

这里写图片描述

        ClickableSpan clickableSpan = new ClickableSpan() {
            //设置点击样式的文字样式变化
            @Override
            public void updateDrawState(TextPaint ds) {
                super.updateDrawState(ds);
                //是否添加下划线
                ds.setUnderlineText(true);
            }

            //监听点击事件
            @Override
            public void onClick(View widget) {
                textView.setText("点击跳转了");

            }
        };
        textView.setMovementMethod(LinkMovementMethod.getInstance());
        textView.setHighlightColor(getResources().getColor(R.color.colorBlue));
        spannableString.setSpan(clickableSpan, 7, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        textView.setText(spannableString);

//注意：使用ClickableSpan的文本如果想真正实现点击作用，必须为TextView设置setMovementMethod方法，否则没有点击相应，至于setHighlightColor方法则是控制点击时的背景色。

URLSpan：设置超链接文本（继承与clickableSpan，在点击事件中添加了html意图跳转）

        URLSpan urlSpan = new URLSpan("http://www.qq.com");
        textView.setMovementMethod(LinkMovementMethod.getInstance());
        spannableString.setSpan(urlSpan,7,9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        textView.setText(spannableString);

MaskFilterSpan：滤镜样式（模糊滤镜BlurMaskFilter，浮雕滤镜EmbossMaskFilter）


MaskFilterSpan bluSpan = new MaskFilterSpan(new BlurMaskFilter(3, BlurMaskFilter.Blur.NORMAL));//模糊滤镜样式
spannableString.setSpan(blurMaskFilterSpan,7,9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);


MaskFilterSpan embossMaskFilterSpan = new MaskFilterSpan(new EmbossMaskFilter(new float[]{1,2}, 0.5f, 8f, 3f));//浮雕滤镜样式
spannableString.setSpan(embossMaskFilterSpan,7,9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

ScaleXSpan：x轴缩放样式
这里写图片描述

        ScaleXSpan scaleXSpan = new ScaleXSpan(2f);
        spannableString.setSpan(scaleXSpan,7,9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);