Android——ImageSpan图片和文字实现垂直居中

默认情况,图片是底部对齐,如下图:

这里先抛出一个问题,怎么获取TextView最终显示的高度???

由于上面那个问题我还没有找到答案,所以本节暂时以两个情况来分析,如何实现图片文字垂直居中。

1、图片高度大于文字高度:

这时,我们不需要处理图片,只需要处理文字显示的位置即可,可以使用上一节(Android——SpannableString字体大小不一致垂直居中)中的VerticalAlignTextSpan,具体代码这里就不贴了,请各位参考上一章。

SpannableString ss = new SpannableString("请输入 x 闪现的个数");

VerticalAlignTextSpan verticalAlignTextSpan = new VerticalAlignTextSpan(20, true);
ss.setSpan(verticalAlignTextSpan, 0, ss.length(), SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);

Drawable drawable = getResources().getDrawable(R.drawable.cattle);
drawable.setBounds(0, 0, 50, 50);
ImageSpan verticalAlignImageSpan = new ImageSpan(drawable);
ss.setSpan(verticalAlignImageSpan, 4, 5, SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);

tvImageSpan.setText(ss);

效果如下:
在这里插入图片描述

注意:
这里我们需要注意几个地方:
1、一定要给drawable设置大小,否则,图片将不显示;
2、一定要先设置VerticalAlignTextSpan,否则文字垂直居中将无效,原因跟我上面抛出的如何获取TextView最终显示高度有关。

2、图片高度小于文字高度:

这种情况,我们只需考虑图片显示的位置即可,所以这里我们要给图片做一个位移。代码如下:
VerticalAlignImageSpan.java

public class VerticalAlignImageSpan extends ImageSpan {

    public VerticalAlignImageSpan(Drawable d) {
        super(d);
    }

    public VerticalAlignImageSpan(Drawable d, int verticalAlignment) {
        super(d, verticalAlignment);
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint
            paint) {
        Drawable drawable = getDrawable();
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        int transY = (int) ((y + fontMetrics.ascent + y + fontMetrics.descent) / 2 - (drawable.getBounds().bottom + drawable
                        .getBounds().top) / 2);
        Log.d("VerticalAlignImageSpan", "transY-> " + transY);
        canvas.save();
        canvas.translate(x, transY);
        drawable.draw(canvas);
        canvas.restore();
    }
}

MainActivity.java

SpannableString ss = new SpannableString("请输入 x 闪现的个数");

Drawable drawable = getResources().getDrawable(R.drawable.cattle);
drawable.setBounds(0, 0, 20, 20);
VerticalAlignImageSpan verticalAlignImageSpan = new VerticalAlignImageSpan(drawable);
ss.setSpan(verticalAlignImageSpan, 4, 5, SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);

tvImageSpan.setText(ss);

效果如下:
在这里插入图片描述

你可能感兴趣的:(Android)