解决TextView富文本显示时emoj或图片和文字不对齐的问题

在项目中，回复框、聊天界面的显示往往会有emoj或者图片，但是一个比较头疼的问题是，会出现emoj表情或者图片和文字的位置不对齐，总是有偏移，十分不爽，进过自己的探索和借鉴，总结出以下两种方法，以作记录和借鉴。

文章首发在我的独立博客。

方法一

借鉴一个键盘的开源项目

• 给TextView设置

/**
     * 解析评论内容，包含富文本表情
     *
     * @param textView
     * @param text
     */
    private void setRichText(TextView textView, String text) {
        // 将文本转换为span
        Spanned span = Html.fromHtml(text);
        int fontSize = UIHelper.getFontHeight(textView);
        if (TextUtils.isEmpty(text)) {
            textView.setVisibility(View.GONE);
        } else {
            textView.setFocusable(false);
            textView.setLongClickable(false);
            span = InputHelper.displayEmoji(context.getResources(), span, fontSize, Math.round(TDevice.dp2px(5.0f/2.0f)) );
//            去除下划线
            SpannableString spannableString = new SpannableString(span);
            spannableString.setSpan(new NoUnderlineSpan(),0,span.length(),Spanned.SPAN_MARK_MARK);
            textView.setText(spannableString);
        }
    }

• 展示文字和表情

 /**
     * 展示文字和表情
     * @param res
     * @param s
     * @param fontSize 字体大小
     * @param lineSpace 行间距
     * @return
     */
    public static Spannable displayEmoji(Resources res, CharSequence s, int fontSize, int lineSpace) {
        String str = s.toString();
        Spannable spannable;
        if (s instanceof Spannable) {
            spannable = (Spannable) s;
        } else {
            // 构建文字span
            spannable = new SpannableString(str);
        }
        for (int i = 0; i < str.length(); i++) {
            int index1 = str.indexOf("[", i);
            int length1 = str.indexOf("]", index1 + 1);
            int index2 = str.indexOf(":", i);
            try {
                String emojiStr = str.substring(index1, length1 + "]".length());
                int resId = getEmojiResId(emojiStr);
                if (resId > 0) {
                    // 构建图片span
                    Drawable drawable = res.getDrawable(resId);
                    if (drawable != null) {
                        int itemHeight;
                        int itemWidth;
                        if (fontSize == WRAP_DRAWABLE) {
                            itemHeight = drawable.getIntrinsicHeight();
                            itemWidth = drawable.getIntrinsicWidth();
                        } else {
                            itemHeight = fontSize;
                            itemWidth = fontSize;
                        }
                        drawable.setBounds(0, 0, itemHeight, itemWidth);
                        // 自定义ImageSpan，实现文字和表情的对齐
                        EmojiSpan imageSpan = new EmojiSpan(drawable,lineSpace);
                        spannable.setSpan(imageSpan, index1, length1 + "]".length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
                    }
                }
            } catch (Exception e) {
            }
        }
        return spannable;
    }

• 处理表情图片的工具类，主要是计算表情的显示大小和位置

public class EmojiSpan extends ImageSpan {
    private int lineSpace;
    public EmojiSpan(Drawable drawable,int lineSpace) {
        super(drawable);
        this.lineSpace = lineSpace;
    }
    public EmojiSpan(Context context, int resourceId) {
        super(context, resourceId);
    }
    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fontMetricsInt) {
        Drawable drawable = this.getDrawable();
        Rect rect = drawable.getBounds();
        if(fontMetricsInt != null) {
            Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
            int fontHeight = fmPaint.bottom - fmPaint.top;
            int drHeight = rect.bottom - rect.top;
            int top = drHeight / 2 - fontHeight / 4;
            int bottom = drHeight / 2 + fontHeight / 4;
            fontMetricsInt.ascent = -bottom;
            fontMetricsInt.top = -bottom;
            fontMetricsInt.bottom = top;
            fontMetricsInt.descent = top;
        }
        return rect.right;
    }
    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        Drawable drawable = this.getDrawable();
        canvas.save();
        int transY = (bottom - top - drawable.getBounds().bottom) / 2 + top - lineSpace;
        canvas.translate(x, (float)transY);
        drawable.draw(canvas);
        canvas.restore();
    }
}

• 获取TextView字体大小的工具

 /**
     * 获取TextView的字体大小
     * @param textView
     * @return
     */
    public static int getFontHeight(TextView textView) {
        Paint paint = new Paint();
        paint.setTextSize(textView.getTextSize());
        Paint.FontMetrics fm = paint.getFontMetrics();
        return (int) Math.ceil(fm.bottom - fm.top);
    }

方法二：扩展ImageSpan

气扩展类如下：

public class StickerSpan extends ImageSpan {
    public StickerSpan(Drawable b, int verticalAlignment) {
        super(b, verticalAlignment);
    }
    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        Drawable b = getDrawable();
        canvas.save();
        int transY = (int) (bottom - b.getBounds().bottom - TDevice.dp2px(3.0f));// 减去行间距
        if (mVerticalAlignment == ALIGN_BASELINE) {
            int textLength = text.length();
            for (int i = 0; i < textLength; i++) {
                if (Character.isLetterOrDigit(text.charAt(i))) {
                    transY -= paint.getFontMetricsInt().descent;
                    break;
                }
            }
        }
        canvas.translate(x, transY);
        b.draw(canvas);
        canvas.restore();
    }
}

在设置富文本时的应用：

Drawable drawable = res.getDrawable(resId);
// 设置图标大小
drawable.setBounds(0, 0, bound, bound);
// ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);  // 弃用
StickerSpan span = new StickerSpan(drawable,ImageSpan.ALIGN_BASELINE);// 防止只有文字时，表情上移的问题
spannable.setSpan(span, index1, length1 + "]".length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

小结

方法一基本可以解决图片和文字的对齐问题，方法二在有些机型上无用，建议采用方法一。

以上，谢谢。