WebView 显示HTML富文本

WebView 显示HTML富文本

首先说明下富文本是什么：富文本的定义是一种跨平台的文本处理方式。

浏览大多数的论坛博客，发现 android 显示富文本的途径主要有两种：

1. 将 Html 文本转成 SpannableString ，经过 TextView 显示。
2. 利用 Webview 显示 Html

Html 文本转成 SpannableString

这里简单的提一下 Html 文本转成 SpannableString ，这种方式主要是经过识别 html 的标签，而后将内容转成 SpannableString 。

android sdk 中有现成的方法可使用 Html.fromhtml 不过它并不能识别全部的 Html 标签。

若是本身处理 Html 标签的太费时间，并且本人对 Html 并非太熟，因此选择第二种，使用Webview 显示

使用 Webview 显示 Html 文本

github

多说无益看效果：

若是你的 html 文本中使用到了网络上的图片请先把网络请求权限加上

• 核心方法

  webView.loadData(htmlStr, "text/html", "UTF-8");
  webView.loadDataWithBaseURL(null, htmlStr, "text/html", "UTF-8", null);
  复制代码

  上面的 htmlStr 即你的 Html 文本字符串

  实际使用中发现：webView.loadData() 这个方法中文显示存在乱码，使用webView.loadDataWithBaseURL() 时一切正常，暂时还不清楚里面的缘由。因此这里主要介绍下 webView.loadDataWithBaseURL（）方法

  public void loadDataWithBaseURL( String baseUrl, String data, String mimeType, String encoding, String historyUrl) 复制代码

  • baseUrl —— 在 html 文本中一些的图片的 src 地址多是相对地址。像这样

    https://upload.jianshu.io/users/upload_avatars/5382223/a.jpg
    若是 data 中图片的地址是 /users/upload_avatars/5382223/a.jpg
    那么你须要在 baseUrl 赋值 https://upload.jianshu.io
    复制代码

  • data —— html 文本

  • mimeType —— 文本类型

  • encoding —— 编码格式

  • historyUrl —— 不知道

上手使用

• 简单的使用

  WebView webView = findViewById(R.id.web_view);
  //设置 webView
  webView.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);//取消滚动条
  webView.getSettings().setSupportZoom(false);//不支持缩放功能
  //加载 html 文本
  webView.loadDataWithBaseURL(null, htmlStr, "text/html", "UTF-8", null);
  复制代码

• 图片的处理

  固然这简单的使用并不能知足咱们的需求，当图片尺寸太大的时候还能横滑，这怎么行，

  //依赖的库
  compile 'org.jsoup:jsoup:1.11.2'
  复制代码

  //这里咱们使用 jsoup 修改 img 的属性:
  final Document doc = Jsoup.parse(htmltext);
  
  final Elements imgs = doc.getElementsByTag("img");
  for (int i = 0; i < imgs.size(); i++) {
     	//宽度填充手机，高度自适应
  	imgs.get(finalI).attr("style", "width: 100%; height: auto;");
  }
  复制代码

  //这里咱们使用 jsoup 修改 embed 的属性:
  Elements embeds = doc.getElementsByTag("embed");
  for (Element element : embeds) {
      //宽度填充手机，高度自适应
      element.attr("width", "100%").attr("height", "auto");
  }
  
  //webview 没法正确识别 embed 为视频，因此这里把这个标签改为 video 手机就能够识别了
  doc.select("embed").tagName("video");
  复制代码

• 如今全部的图片都是宽度跟手机同样宽，高度自适应，像一些比较小的图若是还跟屏幕同样宽，这画质不能忍啊，若是不满意咱们则须要再次处理。

  分两种状况：

  1. 标签中带有图片的宽高属性
  2. 跟我同样只有一个 src

  两个的处理是同样的，都须要知道图片的宽高，经过对比图片的宽度和手机的宽度

  if(图片的宽度>手机的宽度){
  	//宽度填充手机，高度自适应
    	imgs.get(finalI).attr("style", "width: 100%; height: auto;");
  }else {
    	//不须要任何改动
  }
  复制代码

  第一种状况下咱们能够经过 jsoup 来获取定义的 width height

  第二种状况下因为只有 src ，咱们须要获取网络图片的宽高，我这里是直接经过 Glide 来获取它的宽高，这里的宽高是须要请求网络获取的，因此咱们能够在处理到最后一张图片的时候通知，webview 去加载 Html 文本，而不是直接就加载。

  //依赖的库
  compile 'com.github.bumptech.glide:glide:3.8.0'
  复制代码

  Glide.with(this)
     	.load(src)
     	.asBitmap()
     	.skipMemoryCache(true)
     	.diskCacheStrategy(DiskCacheStrategy.NONE)
     	.into(new SimpleTarget<Bitmap>() {
     		@Override
     		public void onResourceReady( Bitmap bitmap, GlideAnimation<? super Bitmap> glideAnimation) {
          	int width = bitmap.getWidth();
              int height = bitmap.getHeight();
                          }
      });
  复制代码

• 使用 jsoup 处理完后，就不是加载原来的 htmlStr 而是 Jsoup 的 Document

  webView.loadDataWithBaseURL(null, doc.toString(), "text/html", "UTF-8", null);
  复制代码