SpannableString花式文本混排

情景

使用一个TextView混排多种不同颜色、大小等风格。

效果

SpannableString

这是文本的类，其内容是不可变的，但标记对象可以附加和分离。This is the class for text whose content is immutable but to which markup objects can be attached and detached.

可以理解为一个可以设置每个字符风格的String，主要的方法在于setSpan()。

setSpan

/** * 设置指定区域的风格 * * @param what  风格类型 * @param start 开始的位置。从0开始，不包含此位置 * @param end   结束位置。包含此位置 * @param flags 可以编辑时风格是否延续 */public void setSpan(Object what, int start, int end, int flags)

what 风格

参照： Android中强大的SpannableStringBuilder

• BackgroundColorSpan : 文本背景色
• ForegroundColorSpan : 文本颜色
• MaskFilterSpan : 修饰效果
• RasterizerSpan : 光栅效果
• StrikethroughSpan : 删除线
• SuggestionSpan : 相当于占位符
• UnderlineSpan : 下划线
• AbsoluteSizeSpan : 文本字体（绝对大小）
• DynamicDrawableSpan : 设置图片，基于文本基线或底部对齐。
• ImageSpan : 图片
• RelativeSizeSpan : 相对大小（文本字体）
• ScaleXSpan : 基于x轴缩放
• StyleSpan : 字体样式：粗体、斜体等
• SubscriptSpan : 下标
• SuperscriptSpan : 上标
• TextAppearanceSpan : 文本外貌（包括字体、大小、样式和颜色）
• TypefaceSpan : 文本字体
• URLSpan : 文本超链接
• ClickableSpan : 点击事件

flags 延续范围

• SPAN_INCLUSIVE_EXCLUSIVE ： 包括前面，不包括后面
• SPAN_INCLUSIVE_INCLUSIVE ： 包括前面，包括后面
• SPAN_EXCLUSIVE_EXCLUSIVE
• SPAN_EXCLUSIVE_INCLUSIVE

举个栗子：

“字”后面，“颜”前面，输入内容会和“颜色”效果一直，而“色”后面的内容不会改变风格。（脑补画面…）

SpannableString text = new SpannableString("文字颜色改变");text.setSpan(new ForegroundColorSpan(ContextCompat.getColor(this, R.color.colorAccent)), 2, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);mEditTextColor.setText(text);

效果所有代码

/** * SpanableString 类使用 * 实现花式文本的混排 * * @author fengzhen * @version v1.0, 2017/10/12 15:41 */public class MainActivity extends AppCompatActivity {    @BindView(R.id.edit_text_color)    EditText mEditTextColor;    @BindView(R.id.tv_test_background)    TextView mTvTestBackground;    @BindView(R.id.tv_under_line)    TextView mTvUnderLine;    @BindView(R.id.tv_text_size)    TextView mTvTextSize;    @BindView(R.id.tv_image)    TextView mTvImage;    @BindView(R.id.tv_superscript)    TextView mTvSuperscript;    @BindView(R.id.tv_hyperlink)    TextView mTvHyperlink;    @BindView(R.id.tv_click)    TextView mTvClick;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        setTextColor();        setTextBackground();        setTextUnderline();        setTextSize();        setTextImage();        setTextSuperscript();        setTextHyperlink();        setTextClick();    }    private void setTextClick() {        SpannableString text = new SpannableString("文字点击效果");        text.setSpan(new ClickableSpan() {            @Override            public void onClick(View widget) {                Toast.makeText(MainActivity.this, "点击了！", Toast.LENGTH_SHORT).show();                mTvClick.setFocusable(false);            }            @Override            public void updateDrawState(TextPaint ds) {                // 文字颜色                ds.setColor(Color.RED);                // 取消下划线                ds.setUnderlineText(false);            }        }, 2, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);        mTvClick.setText(text);        mTvClick.setMovementMethod(LinkMovementMethod.getInstance());    }    private void setTextHyperlink() {        SpannableString text = new SpannableString("文字超链接效果");        text.setSpan(new URLSpan("https://www.baidu.com/?tn=57095150_2_oem_dg"), 2, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);        mTvHyperlink.setText(text);        mTvHyperlink.setMovementMethod(LinkMovementMethod.getInstance());    }    private void setTextSuperscript() {        SpannableString text = new SpannableString("文字上标效果");        text.setSpan(new SuperscriptSpan(), 2, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);        mTvSuperscript.setText(text);    }    private void setTextImage() {        SpannableString text = new SpannableString("文字变成图片效果");        text.setSpan(new ImageSpan(this, R.mipmap.ic_launcher), 4, 6, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);        mTvImage.setText(text);    }    private void setTextSize() {        SpannableString text = new SpannableString("文字大小改变");        text.setSpan(new AbsoluteSizeSpan(44), 2, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);        mTvTextSize.setText(text);    }    private void setTextUnderline() {        SpannableString text = new SpannableString("文字下划线效果");        text.setSpan(new UnderlineSpan(), 2, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);        mTvUnderLine.setText(text);    }    private void setTextBackground() {        SpannableString text = new SpannableString("文字背景变色");        text.setSpan(new BackgroundColorSpan(ContextCompat.getColor(this, R.color.colorAccent)), 2, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);        mTvTestBackground.setText(text);    }    private void setTextColor() {        SpannableString text = new SpannableString("文字颜色改变");        text.setSpan(new ForegroundColorSpan(ContextCompat.getColor(this, R.color.colorAccent)), 2, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);        mEditTextColor.setText(text);    }}