TextView顯示HTML文本時標簽指定圖片的顯示處理

TextView顯示文本時是支持一些HTML標簽的（具體支持那些標簽會在下面附錄列出），不會需要先用HTML的static方法fromHtml來轉換一下。

Spanned text = Html.fromHtml(htmlString);
textView.setText(text);

這樣，TextView就會把支持的一些HTML標簽以HTML的形式顯示出來。不過，如果htmlString中含有<img>標簽，並需要在TextView中正確顯示的話就必須做進一步的處理了。

Spanned text = Html.fromHtml(htmlString, imageGetter, null);
textView.setText(text);

通過Html的另一個重載的fromHtml方法，指定ImageGetter，來獲取網絡圖片，異步加載的方式來顯示圖片。 

下面給出ImageGetter的一個實現類，大部分代碼來自網絡，只針對關鍵部分做了完善，先看代碼，后面詳細說明。

public class URLImageGetter implements ImageGetter {
    Context context;
    TextView textView;

    public URLImageGetter(Context context, TextView textView) {
        this.context = context;
        this.textView = textView;
    }
    
    @Override
    public Drawable getDrawable(String paramString) {
        final URLDrawable urlDrawable = new URLDrawable(context);
        
        ImageGetterAsyncTask getterTask = new ImageGetterAsyncTask(urlDrawable);
        getterTask.execute(paramString);
        return urlDrawable;
    }
    
    public class ImageGetterAsyncTask extends AsyncTask<String, Void, Drawable> {
        URLDrawable urlDrawable;
        
        public ImageGetterAsyncTask(URLDrawable drawable) {
            this.urlDrawable = drawable;
        }
        
        @Override
        protected void onPostExecute(Drawable result) {
            if (result != null) {
                urlDrawable.drawable = result;
                
                URLImageGetter.this.textView.requestLayout();
            }
        }
        
        @Override
        protected Drawable doInBackground(String... params) {
            String source = params[0];
            return fetchDrawable(source);
        }
        
        public Drawable fetchDrawable(String url) {
            try {
                InputStream is = fetch(url);
                
                Rect bounds = SystemInfoUtils.getDefaultImageBounds(context);
                Bitmap bitmapOrg = BitmapFactory.decodeStream(is);
                Bitmap bitmap = Bitmap.createScaledBitmap(bitmapOrg, bounds.right, bounds.bottom, true);
                
                BitmapDrawable drawable = new BitmapDrawable(bitmap);
                drawable.setBounds(bounds);
                
                return drawable;
            } catch (ClientProtocolException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            
            return null;
        }
        
        private InputStream fetch(String url) throws ClientProtocolException, IOException {
            DefaultHttpClient client = new DefaultHttpClient();
            HttpGet request = new HttpGet(url);
            
            HttpResponse response = client.execute(request);
            return response.getEntity().getContent();
        }
    }
    
}

URLDrawable的實現類

public class URLDrawable extends BitmapDrawable {
    protected Drawable drawable;
    
    public URLDrawable(Context context) {
        this.setBounds(SystemInfoUtils.getDefaultImageBounds(context));
        
        drawable = context.getResources().getDrawable(R.drawable.default_image_min);
        drawable.setBounds(SystemInfoUtils.getDefaultImageBounds(context));
    }
    
    @Override
    public void draw(Canvas canvas) {
        Log.d("test", "this=" + this.getBounds());
        if (drawable != null) {
            Log.d("test", "draw=" + drawable.getBounds());
            drawable.draw(canvas);
        }
    }
    
}

在上述兩個類中，有一點需要注意，那就是ImageGetter返回的Drawble對象的Bounds一定要設定。否則就會出現圖片顯示出來了，但和文字會出現重疊的現象。原因我想是TextView在針對spannable的html字符串中的<img>標簽渲染的時候會根據ImageGetter得到的Drawable對象的Bounds來為圖片預留出空間。所以，在URLDrawable的構造函數中設定了Bounds，其實就是設定圖片寬度為屏幕寬度，高度按照１６：９得到。在根據URL獲取網絡圖片以后還需要根據預設的圖片大小來縮放實際的圖片，參見在URLImageGetter類中的fetchDrawable()函數。

當然在URLDrawable在構造中還增加了默認圖片的顯示，這一點對用戶來講很友好，對應用來講也是一個凸顯品牌和情懷的機會：）

getDefaultImageBounds()函數的代碼如下：

    public static Rect getDefaultImageBounds(Context context) {
        Display display = ((Activity)context).getWindowManager().getDefaultDisplay();
        int width = display.getWidth();
        int height = (int) (width * 9 / 16);
        
        Rect bounds = new Rect(0, 0, width, height);
        return bounds;
    }

------------------------------------------------------------------------------------------------------------

附錄：

HTML支持的標簽