實(shí)際上android中的textview是提供了加載html代碼的功能的，使用的方法也很簡(jiǎn)單

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

這樣調(diào)用應(yīng)對(duì)簡(jiǎn)單的html文本是沒(méi)有問(wèn)題的，但是遇到包含圖片的html代碼就會(huì)導(dǎo)致圖片加載失敗，顯示一個(gè)小方框

圖片加載失敗

類(lèi)似上面這樣，雖然可以加載html，但是會(huì)導(dǎo)致圖片加載失敗。
那么，問(wèn)題來(lái)了，怎么才能加載圖片呢？不要心急，咱們一一道來(lái)。

加載圖片

仔細(xì)看上面的代碼可以發(fā)現(xiàn)，最后兩個(gè)參數(shù)傳入的是null，本來(lái)應(yīng)該傳入什么呢？查看一下源碼發(fā)現(xiàn)第二個(gè)參數(shù)傳入的是 Html.ImageGetter ，這個(gè)接口的作用就是當(dāng)解析到<img>標(biāo)簽時(shí)就會(huì)回調(diào)getDrawable()方法，并返回一個(gè)Drawable對(duì)象；那就簡(jiǎn)單了，寫(xiě)一個(gè)類(lèi)實(shí)現(xiàn)這個(gè)接口吧。

public class URLImageGetter implements ImageGetter {
    Context c;
    TextView tv_image;
    private List<Target> 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;
    }
}

構(gòu)造方法就不用講了，著重看一下getDrawable(final String source) 這個(gè)方法。
提供一個(gè)img路徑，返回一個(gè)drawable對(duì)象，這不就是圖片加載嗎。好辦，正好項(xiàng)目中導(dǎo)入了Picasso，查文檔法發(fā)現(xiàn)可以是實(shí)現(xiàn)的方法有兩個(gè)，一個(gè)是picasso同步的get方式，另外一個(gè)就是傳入一個(gè)Target 實(shí)現(xiàn)回調(diào)。
但是問(wèn)題出現(xiàn)了，怎么把異步回調(diào)的drawable返回呢？簡(jiǎn)單，自己包裝一個(gè)drawable，當(dāng)返回正確drawable的時(shí)候填充進(jìn)去，刷新一下顯示內(nèi)容不就好了嗎。

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
構(gòu)造一個(gè)Target實(shí)例實(shí)現(xiàn)三個(gè)方法，onBitmapLoaded加載成功的回調(diào)方法，onBitmapFailed加載失敗的回調(diào)，onPrepareLoad加載中的回調(diào)，用于占位圖。

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); 里面是怎么實(shí)現(xiàn)的

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);
    }

很簡(jiǎn)單，就幾行代碼，看一下就明白。
其中transform(new ImageTransform()) 是圖片變換的，可以自定義實(shí)現(xiàn)圖片展示的樣子，這里我加了一個(gè)圖片比例縮放的變換，和屏幕寬度匹配。

注意，這里有坑了。

Picasso中的target為弱引用，如果虛擬機(jī)發(fā)生GC，target就會(huì)被系統(tǒng)回收，導(dǎo)致收不到回調(diào)，圖片加載失敗，解決的辦法就是把target改變?yōu)閺?qiáng)引用，不讓系統(tǒng)回收，構(gòu)造一個(gè)list，把target放到list中設(shè)置為傳入textview的tag，解決問(wèn)題。
然后把新建的ImageGetter 實(shí)例化傳入

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

編譯，運(yùn)行

加載成功

撒花，鼓掌。

添加點(diǎn)擊事件

既然圖片已經(jīng)加載成功，接下來(lái)的步驟就是添加點(diǎn)擊事件了。
點(diǎn)擊事件的實(shí)現(xiàn)需要用到

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

中第三個(gè)參數(shù)，自定義一個(gè)類(lèi)實(shí)現(xiàn)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) {
        // 處理標(biāo)簽<img>
        if (tag.toLowerCase(Locale.getDefault()).equals("img")) {
            // 獲取長(zhǎng)度
            int len = output.length();
            // 獲取圖片地址
            ImageSpan[] images = output.getSpans(len - 1, len, ImageSpan.class);
            String imgURL = images[0].getSource();
            // 使圖片可點(diǎn)擊并監(jiān)聽(tīng)點(diǎn)擊事件
            output.setSpan(new ClickableImage(mContext, imgURL), len - 1, len, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
    }
}

handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) 方法中獲取到圖片的路徑并添加點(diǎn)擊事件，set一個(gè)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) {
            // 進(jìn)行圖片點(diǎn)擊之后的處理
        }
    }

注意，添加點(diǎn)擊事件，textview必須設(shè)置

//設(shè)置超鏈接可以打開(kāi)網(wǎng)頁(yè)//click must
textView.setMovementMethod(LinkMovementMethod.getInstance());

否則不能獲取點(diǎn)擊焦點(diǎn)
那么圖片放大怎么搞呢？參考了網(wǎng)上的解決思路，使用popwindow。

//popwindow layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image_scale_rll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66000000"
    android:clickable="true">

    <com.yuan.htmldemo.html.ZoomImageView
        android:id="@+id/image_scale_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="matrix"
        android:layout_centerInParent="true" />

</RelativeLayout>

重新寫(xiě)TarHandler的實(shí)現(xiàn)類(lèi)

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);// 設(shè)置允許在外點(diǎn)擊消失
        ColorDrawable dw = new ColorDrawable(0x50000000);
        popupWindow.setBackgroundDrawable(dw);
    }

    @Override
    public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {
        // 處理標(biāo)簽<img>
        if (tag.toLowerCase(Locale.getDefault()).equals("img")) {
            // 獲取長(zhǎng)度
            int len = output.length();
            // 獲取圖片地址
            ImageSpan[] images = output.getSpans(len - 1, len, ImageSpan.class);
            String imgURL = images[0].getSource();
            // 使圖片可點(diǎn)擊并監(jiān)聽(tīng)點(diǎn)擊事件
            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) {
            // 進(jìn)行圖片點(diǎn)擊之后的處理
            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展示圖片放大即可，編譯運(yùn)行

圖片縮放

完美收工！??！

最后，在介紹一種同步加載方法，這樣加載的好處是不用把target設(shè)置為強(qiáng)引用，但是有bug，圖片顯示不完整，drawable的setBound 方法無(wú)效，暫時(shí)沒(méi)找到原因。其他代碼省略，只展示加載圖片的代碼

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，如果項(xiàng)目中使用的其他圖片加載庫(kù)也沒(méi)關(guān)系，只要能把url加載成drawable 就可以了。核心思想是一樣的。
github 代碼