Android ImageSpan与TextView中的text居中对齐问题解决（无论TextView设置行距与否）

妖狐艹你老母 2022-05-22 04:59 140阅读 0赞

[Android中ImageSpan的使用][Android_ImageSpan]

[Android ImageSpan与TextView中的text居中对齐问题解决（无论TextView设置行距与否）  
][Android ImageSpan_TextView_text_TextView_]

要让imagespan与text对齐，只需把imagespan放到descent线和ascent线之间的中间位置就可以了。实现方式为重写ImageSpan类的draw方法。最终实现方法如下：

public class CommonImagespan extends ImageSpan { 
    
    
    
     public CommonImagespan(Context context, int resourceId) {
            super(context, resourceId);
        }
    
        @Override
        public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
            // image to draw
            Drawable b = getDrawable();
            // font metrics of text to be replaced
            Paint.FontMetricsInt fm = paint.getFontMetricsInt();
            int transY = (y + fm.descent + y + fm.ascent) / 2
                    - b.getBounds().bottom / 2;
    
            canvas.save();
            canvas.translate(x, transY);
            b.draw(canvas);
            canvas.restore();
        }
    }

解释下形参：  
x，要绘制的image的左边框到textview左边框的距离。  
y，要替换的文字的基线坐标，即基线到textview上边框的距离。  
top，替换行的最顶部位置。  
bottom，替换行的最底部位置。注意，textview中两行之间的行间距是属于上一行的，所以这里bottom是指行间隔的底部位置。  
paint，画笔，包含了要绘制字体的度量信息。  
这几个参数含义在代码中找不到说明，写了个demo测出来的。top和bottom参数只是解释下，函数里面用不上。  
然后解释下代码逻辑：  
getDrawable获取要绘制的image，getBounds是获取包裹image的矩形框尺寸；  
y + fm.descent得到字体的descent线坐标；  
y + fm.ascent得到字体的ascent线坐标；  
两者相加除以2就是两条线中线的坐标；  
b.getBounds().bottom是image的高度（试想把image放到原点），除以2即高度一半；  
前面得到的中线坐标减image高度的一半就是image顶部要绘制的目标位置；  
最后把目标坐标传递给canvas.translate函数就可以了，至于这个函数的理解先不管了。  
原理上大致就这样了，最后提供本文提出问题的最终解决方案，使用自定义的ImageSpan类，只需重写它的draw函数

使用的代码如下：

SpannableString spanString = new SpannableString(s+" icon");
                        CommonImagespan imagespan=new CommonImagespan(tv.getContext(),R.drawable.icon_more_right);
                        spanString.setSpan(imagespan, s.length()+1, spanString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                        tv.setText(spanString);

实现的效果如图

![70][]

[Android_ImageSpan]: https://blog.csdn.net/isee361820238/article/details/52425700
[Android ImageSpan_TextView_text_TextView_]: http://www.cnblogs.com/withwind318/p/5541267.html
[70]: /images/20220522/7a738df134f64534aa1b8fdae75ef531.png