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);

效果如下：

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

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

更多相关文章

随机推荐