Android分别用TextView和WebView加载HTML

    后端可能会用用富文本编辑器编写生成不同样式的HTML文本传给前端显示,Android有两种方式来处理,一种是用TextView,一种是用WebView.

    先把两种方式的差异写在前面,请据此来酌情选择.TextView:TextView仅支持HTML的部分标签属性,本人亲测不支持的包括color的rgb表示形式,font-size,font-family等,此时仅仅会显示文本,不过此种方式展示的字体大小与原生的字体大小比较匹配.若不太注重文本字体大小的话可以选择此种方案. WebView:可以解析所有样式,但是其默认字体可能会比原生TextView默认字体大一些,匹配度不是很高,若是对字体样式有要求的话可以采用此种方案.

    放两张图直观地感受一下: 

WebView展示Html

TextView展示Html

 

    下面详细介绍两种方式.

一.TextView展示Html:

    用TextView展示Html需要借助Html.fromHtml(String html)方法,如果需要展示图片,则需要使用Html.fromHtml(String html, ImageGetter imageGetter, TagHandler tagHandler)方法,其中ImageGetter类需要重写其中的getDrawable(String source)方法(This methos is called when the HTML parser encounters an <img> tag. The source argument is the string from the "src" attribute; the return value should be a Drawable representation of the image or null for a generic replacement image. Make sure you call setBounds() on your Drawable if it doesn't already have its bounds set),本文通过Glide来根据url来下载得到网络图片的Drawable,关键代码如下:

private class URLDrawable extends BitmapDrawable {
        protected Bitmap bitmap;

        @Override
        public void draw(Canvas canvas) {
            if(bitmap != null) {
                canvas.drawBitmap(bitmap, 0, 0, getPaint());
            }
        }
    }

private class URLImageParser implements Html.ImageGetter {
        TextView textView;

        public URLImageParser(TextView textView) {
            this.textView = textView;
        }

        @Override
        public Drawable getDrawable(String source) {
            final URLDrawable urlDrawable = new URLDrawable();

            Glide.with(MainActivity.this).load(source).asBitmap().fitCenter().into(new SimpleTarget<Bitmap>() {
                @Override
                public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                    urlDrawable.bitmap = resource;
                    urlDrawable.setBounds(0, 0, resource.getWidth(), resource.getHeight());

                    textView.invalidate();
                    textView.setText(textView.getText());
                }
            });
            return urlDrawable;
        }
    }

 private void initTextView() {
        //tvContent.setMovementMethod(ScrollingMovementMethod.getInstance());  //可滚动
        //超链接可点击-->LinkMovementMethod继承自ScrollingMovementMethod,使用该属性时变具有可滚动属性(这种滑动不流畅,采用ScrollView嵌套)
        //tvContent.setMovementMethod(LinkMovementMethod.getInstance());

        URLImageParser imageGetter = new URLImageParser(tvContent);
        //注意添加Internet权限
        final Spanned sp = Html.fromHtml(richText, imageGetter, null);
        tvContent.setText(sp);
    }

二.WebView展示Html:

    WebView加载Html本人觉得一个坑是当有图片,而且图片比较大时,WebView会横向滚动,而且有滚动条.这里采用Jsoup来修改Html文档中图片的样式,将其宽度设置为100%,从而可以使图片自适应屏幕而不会因其过大而横向滚动.关键代码如下:

/**
  * 借用Jsoup来修改图片的宽度为100%自适应,防止图片过大造成WebView横向滚动的情况
  * @param htmlText
  * @return
  */
private String changeImageWidth(String htmlText) {
    Document document = Jsoup.parse(htmlText);
    Elements elementImages = document.getElementsByTag("img");
    if(elementImages.size() > 0) {
        for(Element elementImage : elementImages) {
            elementImage.attr("style", "width: 100%");
        }
    }
    return document.toString();
  }

private void initWebView() {
    wvContent.getSettings().setJavaScriptEnabled(true);
    wvContent.loadDataWithBaseURL(null, changeImageWidth(richText), "text/html", "utf-8", null);
    wvContent.setHorizontalScrollBarEnabled(false); //隐藏水平滚动条
    wvContent.setVerticalScrollBarEnabled(false); //隐藏竖直滚动条

    wvContent.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    });
}

    源码传送门: HtmlTextViewDemo