android

TextView使用HTML处理字体样式、显示图片等

TextView是不只可以String的，我们平常用的给setText()方法传递String参数的时候，其实是调用的public final void setText (CharSequence text)方法，String类是CharSequence的子类。

而CharSequence子类众多，其中有一个接口Spanned，即类似html的带标记的文本。我们可以用它来在TextView中显示html（自然，有很多html标记是不支持的，只支持一部分）。

android.text.Html类的一个方法：
public static Spanned fromHtml (String source)

可以将html代码转换为Spanned。

1
2
3
4
5
html = "<h1>this is h1</h1>"  
        + "<p>This text is normal</p>"  
        + "<img src='https://www.google.com.hk/intl/zh-CN/images/logo_cn.png' />";  
Spanned sp = Html.fromHtml(html);  
textView.setText(sp);

显示效果：

可以看出，字体效果基本是显示出来了，但是图片没有显示。

要实现图片的显示需要使用Html.fromHtml的另外一个重构方法：

public static Spanned fromHtml (String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler)

其中Html.ImageGetter是一个接口，我们要实现此接口，在它的getDrawable(String source)方法中返回图片的Drawable对象才可以。

修改后的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Spanned sp = Html.fromHtml(html, new Html.ImageGetter() {  
    @Override  
    public Drawable getDrawable(String source) {  
        InputStream is = null;  
        try {  
            is = (InputStream) new URL(source).getContent();  
            Drawable d = Drawable.createFromStream(is, "src");  
            d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());  
            is.close();  
            return d;  
        } catch (Exception e) {  
            return null;  
        }  
    }  
}, null);  
textView.setText(sp);

看起来有些复杂，但其实只是fromHtml()的第二个参数是一个匿名类，用以图片的获取。

其中

1
2
is = (InputStream) new URL(source).getContent();  
Drawable d = Drawable.createFromStream(is, "src");

用以通过图片的地址获取相应的Drawable实例。

由于用到了网络资源的图片，所以要在Mainifest文件中加入权限：
<uses-permission android:name="android.permission.INTERNET" />

修改后的运行结果：

图片正常显示了。

注意：通过网络获取图片是一个耗时的操作，最好不要放在主线程中，否则容易引起阻塞。在高版本的Android系统中，显示图片失效，因为在主线程中无法加载网络图片，此时可以考虑使用Glide加载图片。

通过上面的代码我们知道要想展示图片，我们可以重写fromHtml()的第二个参数ImageGetter：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public class MImageGetter implements ImageGetter{
    Context c;
    TextView container;

    public MImageGetter(TextView text,Context c) {
        this.c = c;
        this.container = text;
    }
    
    public Drawable getDrawable(String source) {
        final LevelListDrawable drawable = new LevelListDrawable();
        Glide.with(c).load(source).asBitmap().into(new SimpleTarget<Bitmap>() {
            @Override
            public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                if(resource != null) {
                     BitmapDrawable bitmapDrawable = new BitmapDrawable(resource);
                     drawable.addLevel(1, 1, bitmapDrawable);
                     drawable.setBounds(0, 0, resource.getWidth(),resource.getHeight());
                     drawable.setLevel(1);
                     container.invalidate();
                     container.setText(container.getText());
                }
            }
        });
        return drawable;
    }
}

加载图片的时候我用的是glide异步加载，其他原理一样。现在图片已经可以正常展示出来了。

上面介绍的是显示网络上的图片，但如何显示本地的图片呢：

1
2
3
4
5
6
7
8
ImageGetter imgGetter = new Html.ImageGetter() {  
    public Drawable getDrawable(String source) {  
        Drawable drawable = null;                   
        drawable = Drawable.createFromPath(source); //显示本地图片  
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());  
        return drawable;   
    }  
};

只需将source改为本地图片的路径便可，在这里我使用的是：

1
2
String source;  
source=getFilesDir()+"/ic_launcher.png";

参考：
Android TextView使用HTML处理字体样式、显示图片等
TextView显示html图片的方法
Android textView展示html图片，实现图文混排，点击查看大图片