强大的SpannableStringBuilder

##前言工作找完了，已经干了两个星期。虽然经常加班，不过相比之前的工作，现在过得更加充实、更有意义。现在有点空闲时间，继续我的分享之旅~~ ##效果什么都不说，先看个炫酷的效果。

*‘什么，这也算炫酷？’*也许你会这么说如果我告诉你，这个页面中只用了一个TextView，对！只有一个，没别的。这时候你还觉得不炫酷？

##实现是时候把SpannableStringBuilder介绍给大家了先看看Google官方的介绍

This is the class for text whose content and markup can both be changed. （这是一个内容和标记都可以更改的文本类）

不同于我们平时赋值时使用的String、StringBuffer等，只能给TextView设置文本内容，而文本的样式只能用TextView来控制，而且该样式的可定制性还不大好。

介绍

SpannableStringBuilder有个亲兄弟——SpannableString。是不是觉得有点熟悉？似乎看到了StringBuilder、String的影子... 是的，SpannableStringBuilder和SpannableString的区别类似与StringBuilder、String，就是SpannableStringBuilder可以拼接，而SpannableString不可拼接。图片来自http://blog.csdn.net/fengkuanghun/article/details/7904284 由图中可以看出，他们都继承了CharSequence，因此，他们可以直接在TextView的setText中使用

主要的方法

SpannableStringBuilder和SpannableString主要通过使用setSpan(Object what, int start, int end, int flags)改变文本样式。对应的参数：

start：指定Span的开始位置
end：指定Span的结束位置，并不包括这个位置。
flags：取值有如下四个
Spannable.SPAN_EXCLUSIVE_INCLUSIVE：在 Span前面输入的字符不应用 Span的效果，在后面输入的字符应用Span效果。
Spannable.SPAN_INCLUSIVE_EXCLUSIVE：在 Span前面输入的字符应用 Span 的效果，在后面输入的字符不应用Span效果。
Spannable.SPAN_INCUJSIVE_INCLUSIVE：在 Span前后输入的字符都应用 Span 的效果。
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE：前后都不包括。
what：对应的各种Span，不同的Span对应不同的样式。已知的可用类有：
BackgroundColorSpan : 文本背景色
ForegroundColorSpan : 文本颜色
MaskFilterSpan : 修饰效果，如模糊(BlurMaskFilter)浮雕
RasterizerSpan : 光栅效果
StrikethroughSpan : 删除线
SuggestionSpan : 相当于占位符
UnderlineSpan : 下划线
AbsoluteSizeSpan : 文本字体（绝对大小）
DynamicDrawableSpan : 设置图片，基于文本基线或底部对齐。
ImageSpan : 图片
RelativeSizeSpan : 相对大小（文本字体）
ScaleXSpan : 基于x轴缩放
StyleSpan : 字体样式：粗体、斜体等
SubscriptSpan : 下标（数学公式会用到）
SuperscriptSpan : 上标（数学公式会用到）
TextAppearanceSpan : 文本外貌（包括字体、大小、样式和颜色）
TypefaceSpan : 文本字体
URLSpan : 文本超链接
ClickableSpan : 点击事件

####用法先在xml中创建一个TextView：

    <TextView
        android:id="@+id/mode1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18dp" />

SpannableStringBuilder和SpannableString的用法差不多，这边先举一个SpannableString的例子

SpannableString
修改字体颜色

    /**
     * 使用SpannableString设置样式——字体颜色
     */
    private void mode1() {
        SpannableString spannableString = new SpannableString("暗影IV已经开始暴走了");
        ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#009ad6"));
        spannableString.setSpan(colorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode1)).setText(spannableString);
    }

创建SpannableString的时候，传入需要显示的字符串。使用ForegroundColorSpan为文字设置颜色。效果：

后面都以SpannableStringBuilder为例子

SpannableStringBuilder
修改字体颜色

    /**
     * 使用SpannableStringBuilder设置样式——字体颜色
     */
    private void mode2() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV");
        spannableString.append("已经开始暴走了");
        ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#009ad6"));
        spannableString.setSpan(colorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode2)).setText(spannableString);
    }

这里就可以看出SpannableStringBuilder的可拼接性，这里同样采用了ForegroundColorSpan为文本设置颜色。效果：

设置背景颜色

    /**
     * 使用SpannableStringBuilder设置样式——背景颜色
     */
    private void mode3() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已经开始暴走了");
        BackgroundColorSpan bgColorSpan = new BackgroundColorSpan(Color.parseColor("#009ad6"));
        spannableString.setSpan(bgColorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode3)).setText(spannableString);
    }

使用BackgroundColorSpan设置背景颜色。效果：

    /**
     * 使用SpannableStringBuilder设置样式——字体大小
     */
    private void mode4() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已经开始暴走了");
        AbsoluteSizeSpan absoluteSizeSpan = new AbsoluteSizeSpan(20);
        spannableString.setSpan(absoluteSizeSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode4)).setText(spannableString);
    }

使用AbsoluteSizeSpan设置字体大小。效果：

设置粗体\斜体

    /**
     * 使用SpannableStringBuilder设置样式——粗体\斜体
     */
    private void mode5() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已经开始暴走了");
        //setSpan可多次使用
        StyleSpan styleSpan = new StyleSpan(Typeface.BOLD);//粗体
        spannableString.setSpan(styleSpan, 0, 3, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        StyleSpan styleSpan2 = new StyleSpan(Typeface.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);
    }

使用StyleSpan设置粗体\斜体，从例子中可以看出，多次使用setSpan并不影响。效果： $粗体\斜体$

删除线

    /**
     * 使用SpannableStringBuilder设置样式——删除线
     */
    private void mode6() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已经开始暴走了");
        StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
        spannableString.setSpan(strikethroughSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode6)).setText(spannableString);
    }

StrikethroughSpa使用StrikethroughSpan设置删除线。效果：

下划线

    /**
     * 使用SpannableStringBuilder设置样式——下划线
     */
    private void mode7() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已经开始暴走了");
        UnderlineSpan underlineSpan = new UnderlineSpan();
        spannableString.setSpan(underlineSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode7)).setText(spannableString);
    }

使用UnderlineSpan设置下划线。效果：

图片不仅支持文字样式，还可以插入图片。厉害了我的SpannableStringBuilder~~

   /**
     * 使用SpannableStringBuilder设置样式——图片
     */
    private void mode8() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已经开始暴走了");
        ImageSpan imageSpan = new ImageSpan(this, R.mipmap.ic_launcher);
        //也可以这样
        //Drawable drawable = getResources().getDrawable(R.mipmap.ic_launcher);
        //drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        //ImageSpan imageSpan1 = new ImageSpan(drawable);
        //将index为6、7的字符用图片替代
        spannableString.setSpan(imageSpan, 6, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode8)).setText(spannableString);
    }

使用ImageSpan设置图片，将index为6、7的字符替换成了图片，也就是说，该图片占有index6和7的位置。效果：

点击事件插入图片就已经很变态了，居然还支持点击事件。

    /**
     * 使用SpannableStringBuilder设置点击事件
     */
    private void mode9() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已经开始暴走了");
        ClickableSpan clickableSpan = new ClickableSpan() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "请不要点我", 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());
    }

使用ClickableSpan设置点击事件，最后还需要加上textView.setMovementMethod(LinkMovementMethod.getInstance());。代码中指定index为5、6、7的字符都成了可点击的文本，其他区域还是不可点击的。效果：

组合使用当然，上面的这些用法都能组合使用。来个🌰

    /**
     * 使用SpannableStringBuilder事件组合使用
     */
    private void mode10() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已经开始暴走了");
        //图片
        ImageSpan imageSpan = new ImageSpan(this, R.mipmap.ic_launcher);
        spannableString.setSpan(imageSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        //点击事件
        ClickableSpan clickableSpan = new ClickableSpan() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "请不要点我", 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);
        //文字背景颜色
        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());
    }

例子中将ImageSpan、ClickableSpan 、ForegroundColorSpan 、BackgroundColorSpan 进行了组合使用，大家根据自己的需求，来随意搭配。效果：（就是刚开始展示的那张gif）

总结

看完后，感觉SpannableStringBuilder和SpannableString相比String要强大太多了。额~~没别的了，发表睡觉

参考资料

SpannableString与SpannableStringBuilder API 文档(自备梯子) SpannableString与SpannableStringBuilder

以上有错误之处，感谢指出

gavin-zyx / spannablestringbiuldertest Goto Github PK

spannablestringbiuldertest's Introduction

强大的SpannableStringBuilder

介绍

主要的方法

总结

参考资料

spannablestringbiuldertest's People

Contributors

Stargazers

Watchers

Forkers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent