在Textview左边或右边添加图标 ，换行不错位（非DrawableLeft）

如题，在textview左边或右边添加一个小图标，并且换行时显示效果不会出错，效果如下图。

 

 

刚开始看到这个需求，我也没有在意，觉得用drawableLeft或者横向布局即可搞定，但是当我做完之后，发现事情并不简单！

 

首先如果使用以上两种方法，换行后，图标就会单独居中，显示效果错位。

 

所以我们就要用到了 SpannableString  

上代码：

        SpannableString spannableString = new SpannableString(" " + item.getGod_des());
        Drawable drawable = mContext.getResources().getDrawable(R.drawable.jianjie);
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
        spannableString.setSpan(new VerticalImageSpan(drawable), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv_jianjie.setText(spannableString);

 

我们对上面代码做一个简单的解释：

1.创建出SpannableString后，参数的item.getGod_des()为你的textview要显示的内容，为什么要在前面加上一个空格呢？

因为这个空格就是你的图标要占的位置，所以多加一个空格为图标腾出一个位置，否则图标会默认占用第一个字来显示

2.把你的图标转成一个drawable，并且给drawable设置最小宽高，这个不多说了，大家都懂的

3.VerticalImageSpan： 这个是一个可以垂直居中的ImageSpan，代码会在下方放出

4.解释一下0,1： 开始位置从0开始，到第一个位置结束。 如果大家想在最后面加上图标，可以把0换成字符串长度-1，把1换成字符串长度，切记要在后面加一个空格占位，否则会切割掉你原本的字符串哦。

5.设置textview，不多说了

 

 

下面是VerticalImageSpan的代码：

public class VerticalImageSpan extends ImageSpan {

    public VerticalImageSpan(Drawable drawable) {
        super(drawable);

    }

    public VerticalImageSpan(Bitmap b) {
        super(b);
    }

    @Override
    public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
                     @NonNull Paint paint) {

        Drawable b = getDrawable();
        Paint.FontMetricsInt fm = paint.getFontMetricsInt();
        int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//计算y方向的位移
        canvas.save();
        canvas.translate(x, transY);//绘制图片位移一段距离
        b.draw(canvas);
        canvas.restore();
    }
}