码迷,mamicode.com
首页 > 移动开发 > 详细

Android开发技巧——解决TextView加载HTML的一些问题

时间:2014-12-02 10:40:53      阅读:1041      评论:0      收藏:0      [点我收藏+]

标签:textview显示html   textview异步加载图片   图片文字重叠   taghandler   html的pre标签处理   

前几天在做一个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(msdx.android@qq.com)
 * 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(" ", " "));
        }
    }

最后上两张解决这个问题后的效果图:
bubuko.com,布布扣bubuko.com,布布扣

本文原创,转载请注明出处:http://blog.csdn.net/maosidiaoxian/article/details/41673425

Android开发技巧——解决TextView加载HTML的一些问题

标签:textview显示html   textview异步加载图片   图片文字重叠   taghandler   html的pre标签处理   

原文地址:http://blog.csdn.net/maosidiaoxian/article/details/41673425

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!