Android中ImageSpan的使用

在Android中，TextView只用于显示图文混排效果，而EditText不仅可显示，也可混合输入文字和图像。这其中必不可少的一个类便是ImageSpan。

要想在TextView中设置不同颜色、大小、图文混排的效果，必须通过SpannableString的setSpan()方法来实现。

//SpannableString.java
public void setSpan(Object what, int start, int end, int flags) {
        super.setSpan(what, start, end, flags);
    }

其中：
- what传入各种Span类型的实例;
- start和end标记要替代的文字内容的范围；
- flags是用来标识在Span范围内的文本前后输入新的字符时是否把它们也应用这个效果，可以传入Spanned.SPAN_EXCLUSIVE_EXCLUSIVE、Spanned.SPAN_INCLUSIVE_EXCLUSIVE、Spanned.SPAN_EXCLUSIVE_INCLUSIVE、Spanned.SPAN_INCLUSIVE_INCLUSIVE几个参数，INCLUSIVE表示应用该效果，EXCLUSIVE表示不应用该效果，如Spanned.SPAN_INCLUSIVE_EXCLUSIVE表示对前面的文字应用该效果，而对后面的文字不应用该效果。

这里我们用ImageSpan实现图文并排效果：

SpannableString spanString = new SpannableString(str);
Drawable drawable = mContext.getResources().getDrawable(R.drawable.ic_launcher);
ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
spanString.setSpan(imageSpan, spanString.length() - 1, spanString.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);

查看源码发现ImageSpan只带有两个对齐方式，分别是：ALIGN_BASELINE、ALIGN_BOTTOM。若我们要实现图文居中对齐呢，怎么办，只能改源码了，先看下系统是怎么实现的：

//DynamicDrawableSpan.java
@Override
    public void draw(Canvas canvas, CharSequence text,
                     int start, int end, float x, 
                     int top, int y, int bottom, Paint paint) {
        Drawable b = getCachedDrawable();
        canvas.save();

        int transY = bottom - b.getBounds().bottom;
        if (mVerticalAlignment == ALIGN_BASELINE) {
            transY -= paint.getFontMetricsInt().descent;
        }

        canvas.translate(x, transY);
        b.draw(canvas);
        canvas.restore();
    }

这段绘制的代码在ImageSpan的父类中，可以看到它并没有对居中对齐进行处理，这里，我们就通过继承ImageSpan类，然后修改它的draw方法来实现图文的居中对齐：

@Override
    public void draw(Canvas canvas, CharSequence text,
                     int start, int end, float x, 
                     int top, int y, int bottom, Paint paint) {
        Drawable b = getCachedDrawable();
        canvas.save();

        int transY;
        if (mVerticalAlignment == ALIGN_BASELINE) {
            transY -= paint.getFontMetricsInt().descent;
        } else if (mVerticalAlignment == ALIGN_BOTTOM) {
            transY = bottom - b.getBounds().bottom;
        } else {
            Paint.FontMetricsInt fm = paint.getFontMetricsInt();
            transY = (y + fm.descent + y + fm.ascent) / 2
                - b.getBounds().bottom / 2;
        }

        canvas.translate(x, transY);
        b.draw(canvas);
        canvas.restore();
    }

这样，基本就能达到图文的居中效果了，使用时只要传入的不是ALIGN_BASELINE和ALIGN_BOTTOM，它就会默认显示为图文居中。

参考：http://www.cnblogs.com/withwind318/p/5541267.html