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