WebView加载富文本

目录

前言

最近公司的项目需要用到富文本展示，因此将WebView加载富文本的方法总结了一下。

WebView加载数据的方式

WebView加载数据的方式有两种：

webView.loadUrl(data);//加载url
webView.loadDataWithBaseURL(null,data, "text/html" , "utf-8", null);//加载html数据

因为我们需要加载富文本，所以我们选择第二种加载方式。

WebView的配置

这里我们可以将缩放功能屏蔽掉

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);//允许使用js
//不支持屏幕缩放
webSettings.setSupportZoom(false);
webSettings.setBuiltInZoomControls(false);
//不显示webview缩放按钮
webSettings.setDisplayZoomControls(false);

加载富文本

这里我引用了一段富文本：

private String mRichText="
";

然后通过WebView的第二种加载方式进行加载：

mWebView.loadDataWithBaseURL(null,mRichText, "text/html" , "utf-8", null);

这里的图片是网络图片所以需要加入联网权限：

运行效果如下：

很显然富文本没有做到与屏幕适配，那么接下来我们来处理下富文本的样式做到适配屏幕。

修改富文本样式适配屏幕

这里我用的是Hbuilder方便预览，当然也可以直接在记事本了进行修改，改完之后修改后缀名为html然后通过浏览器预览。

将代码结合富文本进行动态修改富文本样式：

private String getHtmlData(String bodyHTML) {
        String head = ""
                + " "
                + ""
                + "";
        return "" + head + "" + bodyHTML + "";
    }

适配完后的效果：

项目源码： https://github.com/myml666/RichTextDemo