实际上android中的textview是提供了加载html代码的功能的，使用的方法也很简单

textView.setText(Html.fromHtml("html",null,null));

这样调用应对简单的html文本是没有问题的，但是遇到包含图片的html代码就会导致图片加载失败，显示一个小方框

图片加载失败

类似上面这样，虽然可以加载html，但是会导致图片加载失败。

那么，问题来了，怎么才能加载图片呢？不要心急，咱们一一道来。

加载图片

仔细看上面的代码可以发现，最后两个参数传入的是null，本来应该传入什么呢？查看一下源码发现第二个参数传入的是 Html.ImageGetter ，这个接口的作用就是当解析到标签时就会回调getDrawable()方法，并返回一个Drawable对象；那就简单了，写一个类实现这个接口吧。

public class URLImageGetter implements ImageGetter {

Context c;

TextView tv_image;

private List targets = new ArrayList<>();

public URLImageGetter(TextView t, Context c) {

this.tv_image = t;

this.c = c;

tv_image.setTag(targets);

}

@Override

public Drawable getDrawable(final String source) {

final URLDrawable urlDrawable = new URLDrawable();

final Target target = new Target() {

@Override

public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {

Drawable drawable = new BitmapDrawable(bitmap);

drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());

urlDrawable.setDrawable(drawable);

urlDrawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());

tv_image.invalidate();

tv_image.setText(tv_image.getText());

}

@Override

public void onBitmapFailed(Drawable errorDrawable) {

errorDrawable.setBounds(0, 0, errorDrawable.getIntrinsicWidth(), errorDrawable.getIntrinsicHeight());

urlDrawable.setBounds(0, 0, errorDrawable.getIntrinsicWidth(), errorDrawable.getIntrinsicHeight());

urlDrawable.setDrawable(errorDrawable);

tv_image.invalidate();

}

@Override

public void onPrepareLoad(Drawable placeHolderDrawable) {

placeHolderDrawable.setBounds(0, 0, placeHolderDrawable.getIntrinsicWidth(), placeHolderDrawable.getIntrinsicHeight());

urlDrawable.setBounds(0, 0, placeHolderDrawable.getIntrinsicWidth(), placeHolderDrawable.getIntrinsicHeight());

urlDrawable.setDrawable(placeHolderDrawable);

tv_image.invalidate();

}

};

targets.add(target);

ImageLoad.loadPlaceholder(c, source, target);

return urlDrawable;

}

}

构造方法就不用讲了，着重看一下getDrawable(final String source) 这个方法。

提供一个img路径，返回一个drawable对象，这不就是图片加载吗。好办，正好项目中导入了Picasso，查文档法发现可以是实现的方法有两个，一个是picasso同步的get方式，另外一个就是传入一个Target 实现回调。

但是问题出现了，怎么把异步回调的drawable返回呢？简单，自己包装一个drawable，当返回正确drawable的时候填充进去，刷新一下显示内容不就好了吗。

public class URLDrawable extends BitmapDrawable {

private Drawable drawable;

@Override

public void draw(Canvas canvas) {

if (drawable != null) {

drawable.draw(canvas);

}

}

public void setDrawable(Drawable drawable) {

this.drawable = drawable;

}

}

so easy

构造一个Target实例实现三个方法，onBitmapLoaded加载成功的回调方法，onBitmapFailed加载失败的回调，onPrepareLoad加载中的回调，用于占位图。

final Target target = new Target() {

@Override

public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {

Drawable drawable = new BitmapDrawable(bitmap);

drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());

urlDrawable.setDrawable(drawable);

urlDrawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());

tv_image.invalidate();

tv_image.setText(tv_image.getText());

}

@Override

public void onBitmapFailed(Drawable errorDrawable) {

errorDrawable.setBounds(0, 0, errorDrawable.getIntrinsicWidth(), errorDrawable.getIntrinsicHeight());

urlDrawable.setBounds(0, 0, errorDrawable.getIntrinsicWidth(), errorDrawable.getIntrinsicHeight());

urlDrawable.setDrawable(errorDrawable);

tv_image.invalidate();

}

@Override

public void onPrepareLoad(Drawable placeHolderDrawable) {

placeHolderDrawable.setBounds(0, 0, placeHolderDrawable.getIntrinsicWidth(), placeHolderDrawable.getIntrinsicHeight());

urlDrawable.setBounds(0, 0, placeHolderDrawable.getIntrinsicWidth(), placeHolderDrawable.getIntrinsicHeight());

urlDrawable.setDrawable(placeHolderDrawable);

tv_image.invalidate();

}

};

看一下 ImageLoad.loadPlaceholder(c, source, target); 里面是怎么实现的

public static void loadPlaceholder(Context context, String url, Target target) {

Picasso picasso = new Picasso.Builder(context).loggingEnabled(true).build();

picasso.load(url)

.placeholder(R.drawable.moren)

.error(R.drawable.moren)

.transform(new ImageTransform())

.into(target);

}

很简单，就几行代码，看一下就明白。

其中transform(new ImageTransform()) 是图片变换的，可以自定义实现图片展示的样子，这里我加了一个图片比例缩放的变换，和屏幕宽度匹配。

注意，这里有坑了。

Picasso中的target为弱引用，如果虚拟机发生GC，target就会被系统回收，导致收不到回调，图片加载失败，解决的办法就是把target改变为强引用，不让系统回收，构造一个list，把target放到list中设置为传入textview的tag，解决问题。

然后把新建的ImageGetter 实例化传入

textView.setText(Html.fromHtml("html",new URLImageGetter(textView, context),null));

编译，运行

加载成功

撒花，鼓掌。

添加点击事件

既然图片已经加载成功，接下来的步骤就是添加点击事件了。

点击事件的实现需要用到

textView.setText(Html.fromHtml("html",new URLImageGetter(textView, context),null));

中第三个参数，自定义一个类实现Html.TagHandler 接口，

public class URLTagHandler implements TagHandler {

private Context mContext;

public URLTagHandler(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);

}

}

}

handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) 方法中获取到图片的路径并添加点击事件，set一个ClickableSpan即可

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) {

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

}

}

注意，添加点击事件，textview必须设置

//设置超链接可以打开网页//click must

textView.setMovementMethod(LinkMovementMethod.getInstance());

否则不能获取点击焦点

那么图片放大怎么搞呢？参考了网上的解决思路，使用popwindow。

//popwindow layout

android:id="@+id/image_scale_rll"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#66000000"

android:clickable="true">

android:id="@+id/image_scale_image"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="matrix"

android:layout_centerInParent="true" />

重新写TarHandler的实现类

public class URLTagHandler implements TagHandler {

private Context mContext;

private PopupWindow popupWindow;

//需要放大的图片

private ZoomImageView tecent_chat_image;

public URLTagHandler(Context context) {

mContext = context.getApplicationContext();

View popView = LayoutInflater.from(context).inflate(R.layout.pub_zoom_popwindow_layout, null);

tecent_chat_image = (ZoomImageView) popView.findViewById(R.id.image_scale_image);

popView.findViewById(R.id.image_scale_rll).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

if (popupWindow != null && popupWindow.isShowing()) {

popupWindow.dismiss();

}

}

});

popupWindow = new PopupWindow(popView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

popupWindow.setFocusable(true);

popupWindow.setOutsideTouchable(true);// 设置允许在外点击消失

ColorDrawable dw = new ColorDrawable(0x50000000);

popupWindow.setBackgroundDrawable(dw);

}

@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) {

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

popupWindow.showAtLocation(widget, Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0);

final Target target = new Target() {

@Override

public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {

tecent_chat_image.setImageBitmap(bitmap);

}

@Override

public void onBitmapFailed(Drawable errorDrawable) {

tecent_chat_image.setImageDrawable(errorDrawable);

}

@Override

public void onPrepareLoad(Drawable placeHolderDrawable) {

tecent_chat_image.setImageDrawable(placeHolderDrawable);

}

};

tecent_chat_image.setTag(target);

ImageLoad.loadPlaceholder(context, url, target);

}

}

}

添加popwindow展示图片放大即可，编译运行

图片缩放

完美收工！！！

最后，在介绍一种同步加载方法，这样加载的好处是不用把target设置为强引用，但是有bug，图片显示不完整，drawable的setBound 方法无效，暂时没找到原因。其他代码省略，只展示加载图片的代码

ExecutorService executorService = Executors.newCachedThreadPool();

executorService.submit(new Runnable() {

@Override

public void run() {

try {

Bitmap bitmap = Picasso.with(c).load(source).get();

Drawable drawable = new BitmapDrawable(bitmap);

drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());

urlDrawable.setDrawable(drawable);

urlDrawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());

tv_image.invalidate();

tv_image.setText(tv_image.getText());

} catch (IOException e) {

e.printStackTrace();

}

Bitmap bitmap = null;

try {

bitmap = Picasso.with(c).load(source).get();

} catch (IOException e) {

e.printStackTrace();

//fail

Drawable drawable = c.getResources().getDrawable(R.drawable.moren);

drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

urlDrawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

urlDrawable.setDrawable(drawable);

tv_image.invalidate();

}

if(bitmap == null){

//fail

Drawable drawable = c.getResources().getDrawable(R.drawable.moren);

drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

urlDrawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

urlDrawable.setDrawable(drawable);

tv_image.invalidate();

}else {

//success

Drawable drawable = new BitmapDrawable(bitmap);

drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());

urlDrawable.setDrawable(drawable);

urlDrawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());

tv_image.invalidate();

tv_image.setText(tv_image.getText());

}

}

});

这里的例子是使用的Picasso，如果项目中使用的其他图片加载库也没关系，只要能把url加载成drawable 就可以了。核心思想是一样的。

github 代码