先解釋一個類：Paint.FontMetrics，它表示繪制字體時的度量標准。google的官方api文檔對它的字段說明如下：
ascent: 字體最上端到基線的距離，為負值。
descent：字體最下端到基線的距離，為正值。
看下圖：
中間那條線就是基線，基線到上面那條線的距離就是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(); } }
最后看一下效果圖：
