html5中让text中的图片可以点击,Android中Textview显示Html，图文混排，支持图片点击放大...

最新推荐文章于 2023-03-30 11:15:18 发布

GAMKER攻壳

最新推荐文章于 2023-03-30 11:15:18 发布

阅读量365

点赞数

文章标签： html5中让text中的图片可以点击

本文首发于网易云社区

对于呈现Html文本来说，Android提供的Webview控件可以得到很好的效果，但使用Webview控件的弊端是效率相对比较低，对于呈现简单的html文本的话，杀鸡不必使用牛刀。另外如果是在Listview中使用的Webview的话，效率则更是低下。

然而，Android还提供了android.text.Html类来支持Html的解析，利用这个类，我们可以通过Textview来呈现Html文件。不过Html类并不是只是所有的标签。Html的描述如下：

This class processes HTML strings into displayable styledtext.

Not all HTML tags are supported.

一、解析Html标签

对于纯文字的Html文本来说，使用Textview来呈现很方便，一行代码就可以轻松搞定了，具体如下：

contentTextView.setText(Html.formHtml(htmlString));

二、处理img图片标签，实现图文混排

一般来说，html文件常常是含有图片，如果需要在Textview中实现文字和图片的混排，需要使用ImageGetter。ImageGetter是Html类中一个接口，作用是给img标签获取图片内容，主要提供了一个getDrawable的方法。

/**

* Retrieves images for HTML tags.

public static interface ImageGetter {

/**

* This methos is called when the HTML parser encounters an

* tag. The source argument is the

* string from the "src" attribute; the return value should be

* a Drawable representation of the image or null

* for a generic replacement image. Make sure you call

* setBounds() on your Drawable if it doesn't already have

* its bounds set.

public Drawable getDrawable(String source);

}

解析来需要实现一个ImageGetter，具体如下：

public class MyImageGetter implements ImageGetter {

WeakReference mTextViewReference;

Context mContext;

public MyImageGetter(Context context, TextView textView, int with) {

mContext = context.getApplicationContext();

mTextViewReference = new WeakReference(textView);

}

@Override

public Drawable getDrawable(String url) {

URLDrawable urlDrawable = new URLDrawable(mContext);

// 异步获取图片，并刷新显示内容

new ImageGetterAsyncTask(url, urlDrawable).execute();

return urlDrawable;

}

public class ImageGetterAsyncTask extends AsyncTask {

WeakReference mURLDrawableReference;

String mUrl;

public ImageGetterAsyncTask(String url, URLDrawable drawable) {

mURLDrawableReference = new WeakReference(drawable);

mUrl = url;

}

@Override

protected Drawable doInBackground(String... params) {

// 下载图片，并且使用缓存

Bitmap bitmap = DownlaodUtils.getNetworkImageWithCache(mContext, mUrl);

BitmapDrawable bitmapDrawable = new BitmapDrawable(mContext.getResources(), bitmap);

Rect bounds = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

if (mURLDrawableReference.get() != null) {

mURLDrawableReference.get().setBounds(bounds);

}

bitmapDrawable.setBounds(bounds);

return bitmapDrawable;

}

@Override

protected void onPostExecute(Drawable result) {

if (null != result) {

if (mURLDrawableReference.get() != null) {

mURLDrawableReference.get().drawable = result;

}

if (mTextViewReference.get() != null) {

// 加载完一张图片之后刷新显示内容

mTextViewReference.get().setText(mTextViewReference.get().getText());

}

public class URLDrawable extends BitmapDrawable {

protected Drawable drawable;

public URLDrawable(Context context) {

// 设置默认大小和默认图片

Rect bounds = new Rect(0, 0, 100, 100);

setBounds(bounds);

drawable = context.getResources().getDrawable(R.drawable.default_image);

drawable.setBounds(bounds);

}

@Override

public void draw(Canvas canvas) {

if (drawable != null) {

drawable.draw(canvas);

}

实现了MyImageGetter之后，则需要实现图文混排就轻而易举了

MyImageGetter imageGetter = new MyImageGetter(this, contentTextView);

contentTextView.setText(Html.formHtml(htmlString, imageGetter, null));

三、图片的点击放大

前面已经实现了Textview呈现html文本，并且能够图文混排。但很多情况下，需要支持点击图片后将图片放大显示。这样，我们需要支持img标签的点击处理，能够监听到点击事件就可以实现这个功能了。这里我们可以通过实现TagHandler接口来实现这个功能。首先看下android.text.Html类中的Taghandler接口：

/**

* Is notified when HTML tags are encountered that the parser does

* not know how to interpret.

public static interface TagHandler {

/**

* This method will be called whenn the HTML parser encounters

* a tag that it does not know how to interpret.

public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader);

}

我们只需实现TagHandler的handleTag方法来处理img标签则可，主要是给内容设置一个ClickableSpan，具体如下：

public class MyTagHandler implements TagHandler {

private mContext;