Android webview如何加载HTML,CSS等语言的示例

所属分类: 软件编程 / Android 阅读数: 65
收藏 0 赞 0 分享

前言

这个题目可能取得不大好,想了很久没想出更合适的了。在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);

源代码引用:https://github.com/yiyibb/Zhihu

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

Android样式和主题之选择器的实例讲解

今天小编就为大家分享一篇关于Android样式和主题之选择器的实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Android应用动态修改主题的方法示例

今天小编就为大家分享一篇关于Android应用动态修改主题的方法示例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Flutter 网络请求框架封装详解

这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Flutter倒计时/计时器的实现代码

这篇文章主要介绍了Flutter倒计时/计时器的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Android使用google breakpad捕获分析native cash

这篇文章主要介绍了Android使用google breakpad捕获分析native cash 的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

详解Flutter WebView与JS互相调用简易指南

这篇文章主要介绍了详解Flutter WebView与JS互相调用简易指南,分为JS调用Flutter和Flutter调用JS,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android开发实现ListView和adapter配合显示图片和文字列表功能示例

这篇文章主要介绍了Android开发实现ListView和adapter配合显示图片和文字列表功能,涉及Android使用ListView结合adapter适配器实现图文显示功能相关的布局、解析、权限控制等操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Android文字基线Baseline算法的使用讲解

今天小编就为大家分享一篇关于Android文字基线Baseline算法的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Flutter自定义实现神奇动效的卡片切换视图的示例代码

这篇文章主要介绍了Flutter自定义实现神奇动效的卡片切换视图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android实现自定义滑动刻度尺方法示例

这篇文章主要给大家介绍了关于Android实现自定义滑动刻度尺的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享
查看更多