Android的图文混合实现之TextView+html加载图片

Android的图文混合实现之TextView+html加载图片

最近在进行notepad的拓展开发，就想要能够在里面进行图片的添加删除，图文混合一起。这种应该要怎么才能实现呢？于是而我在网上搜索了大量的资料。发现实现这种有好几种方法。

TextView：文本展示控件，相信大家肯定都很熟悉了。
在textview中可以用这几种方式实现图片的显示

1.XML文件中指定属性值（activity_main.xml）

在TextView的左上右下显示图片，可用

android:drawableLeft
android:drawableTop
android:drawableRight
android:drawableBottom

代码：

<TextView  
android:id="\@+id/textview_01"  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:drawableTop="\@drawable/ic_thumb_up_black_24dp"  
android:text="Hello World!"  
app:layout_constraintBottom_toBottomOf="parent"  
app:layout_constraintLeft_toLeftOf="parent"  
app:layout_constraintRight_toRightOf="parent"  
app:layout_constraintTop_toTopOf="parent"  
app:layout_constraintVertical_bias="0.382" \>

效果图：

2. 通过解析HTML来显示图片

直接调用textView的setText(Html.fromHtml(html))的方法，会导致图片加载不出来，形成一个个小方块，

textView.setText(Html.fromHtml(“html”,null,null));

在htmldemo的文件夹下再创建两个子文件夹：html（里面是html的拓展类）

Imageload（里面是图片加载类）

文件目录如下：

各个类的作用：

html	HtmlUtils：	调用接口Spanned，在TextView中显示html
	URLDrawable：	返回异步回调的drawable对象
	URLImageGetter:	加载获取图片<img>标签，获得图片内容
	URLTagHandler:	标签解析器：处理未知标签
	ZoomImageView:	多点触控，手势图片缩放控件
imageload	CompressTransformation:	图片压缩转换
	ImageLoad :	图片加载url
	ImageTransform:	图片缩放转换

（1）加载图片：

用一个类实现接口 Html的ImageGetter

继承于 ImageGetter，重写 getDrawable (String source)
方法。当解析到<img>标签时就会回调getDrawable()方法，通过异步操作，读取本地/网络资源，获得Drawable
对象

URLImageGetter

//URLImageGetter：实现Html类中一个接口ImageGetter，用于检索获取HTML中的<img>标签，给img标签获取图片内容

//URLImageGetter：实现Html类中一个接口ImageGetter，用于检索获取HTML中的<img>标签，给img标签获取图片内容
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) {
        // 获取图片的url和标签
        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;
    }

（2）返回异步回调的drawable

怎么把异步回调的drawable返回，因为图片是异步加载的，所以我们要先建立一个BitmapDrawable，当没有异步加载的时候用来getDrawable的返回。可以包装一个drawable，继承于html.drawable,当返回正确drawable的时候填充进去，刷新一下就可以显示内容

URLDrawable

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

加载出来效果：