Android图片转换字体

需求实现过程中遇到了一个问题，模块需要同时显示文字，一个图标和带有html标签的有颜色文字，我们试用了几个方法。基本上可以作为同一类型的TextView富文本等方式设置的总结。

1. Spannable

首先使用了Spannable，看下代码：

SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(mWarehouse + " 至  ");
ImageSpan imageSpan = new ImageSpan(getContext(), R.drawable.address_icon);
spannableStringBuilder.setSpan(imageSpan, spannableStringBuilder.length() - 1, spannableStringBuilder.length(), Spannable
        .SPAN_INCLUSIVE_EXCLUSIVE);
if (StringUtils.isNotNull(goodsDelivery.getPostage())) {
    spannableStringBuilder.append(" " + goodsDelivery.getAddress() + " " + Html.fromHtml(goodsDelivery.getPostage()));
}
mPostageRulesContainer.setText(spannableStringBuilder);

这个应该网上有很多，使用的过程中发现后台传的字符串中间是有html标签的，spannable不能识别标签中的属性因此这种方法不能适用。

2. Html.ImageGetter

接着使用了Html.ImageGetter方法，先看一下代码：

Html.ImageGetter imageGetter = new Html.ImageGetter() {

    public Drawable getDrawable(String source) {
        int rId = Integer.parseInt(source);
        Drawable drawable = getResources().getDrawable(rId);
        if (drawable != null) {
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        }
        return drawable;
    }
};
String test = mWarehouse + " 至  <img src=\"" + R.drawable.address_icon_a + "\" /> " + goodsDelivery.getAddress() + goodsDelivery.getPostage();
mPostageRulesContainer.setText(Html.fromHtml(text, imageGetter, null));

这个方法可以支持将图标通过标签加入到string中，再通过Html.fromHtml()方法是用。此时显示就没有问题了，但是这个方法还有个问题就是在TextView中设置了行间距之后，会导致图标无法识别行间距，而出现视觉上看起来和文字不在同一行的问题。

之后我们想到用监听TextView的行数来解决问题，先看代码：

mPostageRulesContainer.post(new Runnable() {
        @Override
        public void run() {
            if (mPostageRulesContainer.getLineCount() > 1) {
                mPostageRulesContainer.setText(Html.fromHtml(mWarehouse + " 至  <img src=\"" + R.drawable.address_icon + "\" /> " +
                        goodsDelivery.getAddress() +
                        goodsDelivery.getPostage(), imageGetter, null));
                mTitle.setPadding(0,23,0,0);
            }else if (mPostageRulesContainer.getLineCount()==1){
                mTitle.setPadding(0,2,0,0);
            }
        }
    });

这样会有两个弊端，一是TextView要在setText之后再进行监听才管用。二是，需要区分行数使用不同的图片，这样就会存在两张图片。

3. 图片转换字体

最后选择的方法是，将图片转换成字体，通过一个特殊的字符串来代表这个图片，相当于把这个图片变成了一个字，下面详细说一下这个方法。

首先要把这个图标转换成ttf文件，可以自己生成。我是通过http://fontello.com/，在这个网站上下载到了一个一样的图标，把这个图标生成一个ttf文件，将ttf字体文件放在assets/fonts目录下。然后在demo.html中得到了这个图标的文字编码，设置在string中就可以直接使用了。

用法比较简单，看一下代码:

Typeface iconfont = Typeface.createFromAsset(getContext().getAssets(), "fonts/fontello.ttf");
String text = mWarehouse + " 至  " + getContext().getString(R.string.ic_postage) + goodsDelivery.getAddress() + " " +
        goodsDelivery.getPostage();
mPostageRulesContainer.setTypeface(iconfont);
mPostageRulesContainer.setText(Html.fromHtml(test));

这样就解决了目前遇到的所有问题，而且发现这样设置图标还有一个好处，就是可以通过颜色值和字体大小来控制图标的大小，可以完全把图标当成一个文字来处理。非常方便。