TextView加载HTML数据(网络图片以及图片点击事件的实现)

TextView加载HTML数据网络图片以及图片点击事件的实现

1 前言

申明:博主原创
转载请 注明出处:http://blog.csdn.net/qq_33804553/article/details/52196055

TextView可以通过Html.fromHtml()方法加载 网页数据,但是在4.0以后 加载的网络图片,就不能显示了,只有一个很小的方块,这篇文章就是为了解决这个问题,并且 为 图片加上点击事件,就比如说加载下面的网页数据

<p style=\"text-align:center;color:#3E3E3E;font-family:"font-size:16px;background-color:#FFFFFF;\"> <span style=\"font-size:18px;\"><img src=\"http://img4.imgtn.bdimg.com/it/u=42046925,1559346389&fm=11&gp=0.jpg" /><br /></span> </p><p style=\"color:#3E3E3E;font-family:"font-size:16px;background-color:#FFFFFF;\"><span style=\"font-size:18px;\">今年6月份，XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。</span> </p>

基础知识的话,大家可以去百度,这里只说实现.时间有限,而且 是在 公司的项目 里 实现的,SO,没有demo,没有效果图

2 前提

• 采用ImageLoader作为加载网络图片框架,方便快捷
• 为了实现点击事件,TextView必须进行 一下两行代码的初始化

 tv.setClickable(true); tv.setMovementMethod(LinkMovementMethod.getInstance());

3 详细实现

3.1首先定义一个Drable类,用来绘制图片

import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.drawable.BitmapDrawable;public class URLDrawable extends BitmapDrawable {    protected Bitmap bitmap;    @Override    public void draw(Canvas canvas) {        if (bitmap != null) {            canvas.drawBitmap(bitmap, getBounds().left, getBounds().top, getPaint());        }    }}

3.2 定义自己的Html.ImageGetter,实现图片的加载,缩放等

import android.content.Context;import android.graphics.Bitmap;import android.graphics.Matrix;import android.graphics.drawable.Drawable;import android.text.Html;import android.util.Log;import android.view.View;import android.widget.TextView;import com.nostra13.universalimageloader.core.ImageLoader;import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;public class URLImageParser implements Html.ImageGetter {    TextView mTextView;    Context context;    public URLImageParser(TextView textView, Context context) {        this.mTextView = textView;        this.context = context;    }    @Override    public Drawable getDrawable(String source) {        final URLDrawable urlDrawable = new URLDrawable();        Log.d("ChapterActivity", source);        ImageLoader.getInstance().loadImage(source, new SimpleImageLoadingListener() {            @Override            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {//                Bitmap resultBitMap = zoomBitMap(loadedImage);                Bitmap resultBitMap = loadedImage;                urlDrawable.bitmap = resultBitMap;                urlDrawable.setBounds((mTextView.getWidth()-resultBitMap.getWidth())/2, 0, (mTextView.getWidth()-resultBitMap.getWidth())/2+resultBitMap.getWidth(), resultBitMap.getHeight());                mTextView.invalidate();                mTextView.setText(mTextView.getText()); // 解决图文重叠            }        });        return urlDrawable;    }    /**     * 完成适配     * 缩放 bitmap,由于还要考虑到放大倍数越大清晰度越低 和 图片太大显示不完整 的问题,还需要做详细的设计     *     * @param bitmap     * @return     */    public Bitmap zoomBitMap(Bitmap bitmap) {        float withTV = mTextView.getWidth();        float withBM = bitmap.getWidth();        Log.e("aaa", "withTV:" + withTV + "--withBM:" + withBM);        float zoomNumb = withTV / withBM;        Log.e("aaa", "zoomNumb:" + zoomNumb);        Matrix matrix = new Matrix();        matrix.postScale(zoomNumb, zoomNumb); //长和宽放大缩小的比例        Bitmap resizeBmp = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);        return resizeBmp;    }}

3.3 最后实现 TagHandler,实现 图片 点击事件 的绑定

import android.content.Context;import android.text.Editable;import android.text.Html;import android.text.Spanned;import android.text.style.ClickableSpan;import android.text.style.ImageSpan;import android.util.Log;import android.view.View;import android.widget.Toast;import org.xml.sax.XMLReader;import java.util.Locale;public class MyTagHandler implements Html.TagHandler {    private Context mContext;    public MyTagHandler(Context context) {        mContext = context.getApplicationContext();    }    @Override    public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {        //处理标签<img>        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();            Log.e("imgURL", imgURL);            // 使图片可点击并监听点击事件            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) {            // 进行图片点击之后的处理            Toast.makeText(context, "图片点击", Toast.LENGTH_SHORT).show();            Log.e("img_click", url);        }    }}

4 最后在代码中使用

 MyTagHandler myTagHandler=new MyTagHandler(this); String urlDataString="<p style=\"text-align:center;color:#3E3E3E;font-family:'font-size:16px;background-color:#FFFFFF;\'>  <span style=\"font-size:18px;\"><img src=\"http://img4.imgtn.bdimg.com/it/u=42046925,1559346389&fm=11&gp=0.jpg\" alt=\"\" /><br /></span> </p><p style=\"color:#3E3E3E;font-family:'font-size:16px;background-color:#FFFFFF;\'><span style=\"font-size:18px;\">今年6月份，国家卫计委会同药监局、中医药管理局、工商总局、中央军委后勤保障部卫生局、武警部队后勤部、全国妇联等部门联合召开会议，部署在全国整治“两非”，也即整治“非医学需要的胎儿性别鉴定和选择性别人工终止妊娠”行为。</span> </p>"; tv.setText(Html.fromHtml(urlDataString, new URLImageParser(tv,this), myTagHandler));