随笔博文

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

2022-12-02 11:24:08 michael007js 703

先解释一个类:Paint.FontMetrics,它表示绘制字体时的度量标准。google的官方api文档对它的字段说明如下:

img


ascent: 字体最上端到基线的距离,为负值。

descent:字体最下端到基线的距离,为正值。

看下图:

img


中间那条线就是基线,基线到上面那条线的距离就是ascent,基线到下面那条线的距离就是descent。


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

复制代码

@Override
public void draw(@NonNull Canvas canvas, CharSequence text,
                int start, int end, float x,
                int top, int y, int bottom, @NonNull 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函数,代码如下:

复制代码

public class CenteredImageSpan extends ImageSpan {
   
 public CenteredImageSpan(Context context, final int drawableRes) {
     super(context, drawableRes);
 }

 @Override
 public void draw(@NonNull Canvas canvas, CharSequence text,
                    int start, int end, float x,
                    int top, int y, int bottom, @NonNull 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();
 }
}

复制代码


最后看一下效果图:

img


首页
关于博主
我的博客
搜索