1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html5中让text中的图片可以点击 Android中Textview显示Html 图文混排 支持图片点击放大...

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

时间:2021-03-05 18:57:42

相关推荐

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

本文首发于网易云社区

对于呈现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. Thesourceargument is the

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

* a Drawable representation of the image ornull

* 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之后,则需要实现图文混排就轻而易举了

MyImageGetterimageGetter=newMyImageGetter(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;

public MyTagHandler(Context context) {

mContext = context.getApplicationContext();

}

@Override

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

// 处理标签

if (tag.toLowerCase(Locale.getDefault()).equals("img")) {

// 获取长度

int len = output.length();

// 获取图片地址

ImageSpan[] images = output.getSpans(len-1, len, ImageSpan.class);

String imgURL = images[0].getSource();

// 使图片可点击并监听点击事件

output.setSpan(new ClickableImage(mContext, imgURL), len-1, len, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

}

}

private class ClickableImage extends ClickableSpan {

private String url;

private Context context;

public ClickableImage(Context context, String url) {

this.context = context;

this.url = url;

}

@Override

public void onClick(View widget) {

// 进行图片点击之后的处理

}

}

}

实现了TagHandler之后,在formHtml传入实例则可:

MyImageGetter imageGetter = new MyImageGetter(this, contentTextView);

MyTagHandler tagHandler = new MyTagHandler(this);

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

contentTextView.setMovementMethod(LinkMovementMethod.getInstance());

网易云产品免费体验馆,无套路试用,零成本体验云计算价值。

本文来自网易云社区,经作者戚明峰授权发布

文章转载于:/p/3613f4894fc0

原著是一个有趣的人,若有侵权,请通知删除

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。