自定义ImageSpan实现简单的文字图片背景效果

自定义ImageSpan实现简单的文字图片背景效果

---

要实现这样一个效果

最节省时间的办法就是一个水平的LinearLayout中嵌套三个textview来分别设置background和text
但这太low了
为了节省TextView来减少布局的层级
我们可以通过 使用SpannableStringBuilder来实现用一个TextView来实现这个功能
并且封装一个工具类来使用，只用传入TextView对象和背景图就可以了。

实现起来比较简单，但是踩了不少坑，我觉得值得记录一下。

首先要知道如何使用图文混排

通过SpannableStringBuilder这个类可以构造一个可以用来设置不同样式(Span)的SpannableStringBuilder对象， 方法如下（还有一个SpannableString，这两个类的关系就像String 与 StringBuilder一样，具体区别 我也没用过0_0）：

            //可以通过构造方法来初始化
            SpannableStringBuilder ssb = new SpannableStringBuilder("这是一个字符串");
            //也同样可以进行拼接
            SpannableStringBuilder ssb1 = new SpannableStringBuilder();
            ssb1.append("这是另一个字符串");

• 然后就是进行样式的修改 通过setSpan方法可以设置不同的样式，系统预设了很多样式的实现可以选择
  

  ---

• 下面演示一些常用的预设样式例如：

        SpannableStringBuilder ssb = new SpannableStringBuilder("这是一个字符串");
        //第一个参数是样式，第二和第三个参数是要改变的区间，最后一个参数对TextView没有用
        //当是EditText的时候决定是否会对两侧新输入的文字进行同样的改变
        //这里的设置是对两侧都不改变
        ssb.setSpan(new UnderlineSpan(),0,2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        ssb.setSpan(new BackgroundColorSpan(Color.GREEN),0,1,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        ssb.setSpan(new ForegroundColorSpan(Color.RED),1,2,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);