前幾天在做一個Gradle使用者指南的應用程式，使用的是TextView來載入HTML內容（至於為什麼不用WebView，我也沒有認真使用並比較過，也許以後會換吧），其中遇見了一些糾結的問題，所幸主要的問題都一一解決了。

下面說一下遇見的幾個問題及我的解決方法。

TextView非同步載入HTML中的圖片及圖文重疊

在TextView中載入HTML圖片，需要實現Html.ImageGetter介面，然後在public Drawable getDrawable(String source)中去獲取圖片。圖片獲取我是直接使用了ImageLoader，一來載入圖片省事，二來帶快取功能，正是我想要的。但是getDrawable方法是在主執行緒中呼叫的，且要求返回Drawable物件用於顯示，而我們是不能在主執行緒中進行網路訪問的，所以需要非同步載入。ImageLoader本身已經有非同步載入的功能，所以我們需要將它與getDrawable方法結合起來。這裡用的方法與百度上常見到的方法略有不同，因為百度上的方法在我這裡會有BUG，在第二次進入時圖片經常載入不出來。

首先，寫一個類繼承BitmapDrawable，程式碼如下：

package com.githang.gradledoc.chapter;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;

/**
 * User: Geek_Soledad([email protected])
 * Date: 2014-11-30
 * Time: 00:09
 * FIXME
 */
public class URLDrawable extends BitmapDrawable {
    protected Bitmap bitmap;

    @Override
    public void draw(Canvas canvas) {
        if (bitmap != null) {
            canvas.drawBitmap(bitmap, 0, 0, getPaint());
        }
    }
}
 

這個類用於在getDrawable中返回的物件。

然後寫一個類實現Html.ImageGetter介面，程式碼如下：

    public class URLImageParser implements Html.ImageGetter {
        TextView mTextView;

        public URLImageParser(TextView textView) {
            this.mTextView = textView;
        }

        @Override
        public Drawable getDrawable(String source) {
            final URLDrawable urlDrawable = new URLDrawable();
            Log.d("ChapterActivity", Consts.BASE_URL + source);
            ImageLoader.getInstance().loadImage(Consts.BASE_URL + source, new SimpleImageLoadingListener() {
                @Override
                public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                    urlDrawable.bitmap = loadedImage;
                    urlDrawable.setBounds(0, 0, loadedImage.getWidth(), loadedImage.getHeight());
                    mTextView.invalidate();
                    mTextView.setText(mTextView.getText()); // 解決圖文重疊
                }
            });
            return urlDrawable;
        }
    }
 

這裡的mTextView是我們要載入圖片的TextView物件。這裡我暫未對圖片做自適應螢幕的適配，做的比較簡單，只是把載入後的圖片設定到之前返回的URLDrawable物件中的urlDrawable去，然後呼叫mTextView.invalidate()方法更新介面。

但是這樣寫完之後，還有一個問題。儘管我們對urlDrawable呼叫了setBounds設定它的邊框，但是還是會出現圖片重疊的問題。需要重新設定一下mTextView的內容，如上面程式碼中的：

mTextView.setText(mTextView.getText());

設定HTML到TextView的程式碼如下：

mDocView.setText(Html.fromHtml(doc, new URLImageParser(mDocView), null));

顯示的程式碼格式全亂

TextView雖然可以顯示html，但許多標籤並不能支援。比如用於顯示程式碼的<pre>,<code>這些標籤。原本以為TagHandler可以解決這個問題，但是我在看了網上對TagHandler的用法介紹之後，發現這種用法並不能處理我遇見的這個問題，因為它只能處理解析到的標籤之前的內容，無法處理標籤之後的內容。好在我在設定HTML的內容到TextView之前是有用jsoup進行一些處理的，於是決定用jsoup進行處理。 處理方法很簡單，對<pre>裡的標籤，把換行符替換成<br/>，把空格替換成&nbsp;，程式碼如下：

    /**
     * 處理程式碼顯示問題.
     *
     * @param chapter 章節內容的html元素。
     */
    private void handlerPreTag(Element chapter) {
        Elements preElems = chapter.select("pre");
        for (Element elem : preElems) {
            elem.html(elem.html().replaceAll("\n", "<br/>").replaceAll(" ", " "));
        }
    }

最後上兩張解決這個問題後的效果圖：
本文原創，轉載請註明出處：http://blog.csdn.net/maosidiaoxian/article/details/41673425