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);
  複製代碼