Android webview加載HTML,CSS等語言的案例

這篇文章將為大家詳細講解有關Android webview加載HTML,CSS等語言的案例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

前言

這個題目可能取得不大好，想了很久沒想出更合適的了。在android開發webview的時候，有的時候后臺不一定給的就是一個url，而是把一些HTML，css，js語言代碼給你，然后你自行組裝出webview能夠識別的語言，并加載到頁面當中。

加載html無非有三種情況：一、存放在assets文件夾下的html文件；二、直接加載某個指定的網頁。 三、從網絡上解析得到的html代碼，注意此處是代碼，即字符串格式。

示例

/**
   * body : <div class="main-wrap content-wrap">...</div>
   * image_source : 《四月物語》
   * title : 我喜歡你，但你別喜歡我：囚禁在單相思中的性單戀者
   * image : http://pic3.zhimg.com/4d37a2dff96d07f6a01e7b8aabd63032.jpg
   * share_url : http://daily.zhihu.com/story/9100667
   * js : []
   * ga_prefix : 122713
   * images : ["http://pic4.zhimg.com/a32e73507ebe9a963f48c3bcc9808773.jpg"]
   * type : 0
   * id : 9100667
   * css : ["http://news-at.zhihu.com/css/news_qa.auto.css?v=4b3e3"]
   */

假如后臺給你一個url，而url實則是json數據對應的連接，并不能直接加載到webview當中，此時該如何解決。這個問題我可以說是一年前就遇到了，后來一是不知道怎么查，在網上沒有找到相應的資料，二是身邊沒有前端的人來指導，今天問過了前端的同事，才明白了一二。

代碼分析

在往常前端開發當中一般都是自己寫HTML和CSS代碼，然后顯示在瀏覽器，也就android中的webview。對于android這種情況，只能拼接代碼。后臺提供相應代碼，android開發自己拼接。其實沒有那么想象中的那么難，因為說到底都是字符串，對字符串進行一定的格式化就能輕易達到效果。

代碼實現

public class HtmlUtil {
  // css樣式，隱藏header
  private static final String HIDE_HEADER_STYLE = "<style>div.headline{display:none;}</style>";

  // css style tag, 需要格式化
  private static final String NEEDED_FORMAT_CSS_TAG = "<link rel=\"stylesheet\" type=\"text/css\" href=\"%s\"/>";

  // js script tag, 需要格式化
  private static final String NEEDED_FORMAT_JS_TAG = "<script src=\"%s\"></script>";

  public static final String MIME_TYPE = "text/html; charset=utf-8";

  public static final String ENCODING = "utf-8";

  public HtmlUtil() {
  }

  /**
   * 根據css鏈接生成Link標簽
   * @param url String
   * @return String
   */
  public static String createCssTag(String url) {
    return String.format(NEEDED_FORMAT_CSS_TAG, url);
  }

  /**
   * 根據多個css鏈接生成Link標簽
   * @param urls List<String>
   * @return String
   */
  public static String createCssTag(List<String> urls) {
    final StringBuilder sb = new StringBuilder();
    for (String url : urls) {
      sb.append(createCssTag(url));
    }
    return sb.toString();
  }

  /**
   * 根據js鏈接生成Script標簽
   *
   * @param url String
   * @return String
   */
  public static String createJsTag(String url) {

    return String.format(NEEDED_FORMAT_JS_TAG, url);
  }

  /**
   * 根據多個js鏈接生成Script標簽
   *
   * @param urls List<String>
   * @return String
   */
  public static String createJsTag(List<String> urls) {

    final StringBuilder sb = new StringBuilder();
    for (String url : urls) {
      sb.append(createJsTag(url));
    }
    return sb.toString();
  }

  /**
   * 根據樣式標簽,html字符串,js標簽
   * 生成完整的HTML文檔
   */
  public static String createHtmlData(String html, List<String> cssList, List<String> jsList) {
    final String css = HtmlUtil.createCssTag(cssList);
    final String js = HtmlUtil.createJsTag(jsList);
    return css.concat(HIDE_HEADER_STYLE).concat(html).concat(js);
  }
}

這是個工具類，專門用于將HTML，CSS等語言連接成HTML。先來看我們使用的方法createHtmlData，返回的是string連接的一個字符串，concat方法如下：

css：將json中的css代碼取出來，并加上前綴

HIDE_HEADER_STYLE：定義整體HTML的style

html：這個直接就是json數據當中的html代碼

js:將json中的js代碼取出來，并加上前綴。

加標簽前綴就是利用String.format(NEEDED_FORMAT_JS_TAG, url);方法，將前面格式中的%s，替換成后邊的代碼。

引用到webview

String htmlData = HtmlUtil.createHtmlData(entity.getBody(), entity.getCss(), entity.getJs());
webview.loadData(htmlData, HtmlUtil.MIME_TYPE, HtmlUtil.ENCODING);

關于“Android webview加載HTML,CSS等語言的案例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。