WebView加载富文本
2020-11-26 本文已影响0人
考试小灵通
目录
image
前言
WebView加载富文本的方法总结了一下
WebView加载数据的方式
WebView加载数据的方式有两种：
webView.loadUrl(data);//加载url
webView.loadDataWithBaseURL(null,data, "text/html" , "utf-8", null);//加载html数据
因为我们需要加载富文本，所以我们选择第二种加载方式。
WebView的配置
这里我们可以将缩放功能屏蔽掉
<!--隐藏滑动条-->
<WebView
android:scrollbars="none"
android:overScrollMode="never"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</WebView>
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);//允许使用js
//不支持屏幕缩放
webSettings.setSupportZoom(false);
webSettings.setBuiltInZoomControls(false);
//不显示webview缩放按钮
webSettings.setDisplayZoomControls(false);
加载富文本
这里我引用了一段富文本：
private String mRichText="<p style=\"text-align: left;\"><img src=\"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1383902695,1129447956&fm=26&gp=0.jpg\"\n" +
"\t title=\"1541054054758015328.jpg\" alt=\"1.jpg\" /><img src=\"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2353449440,2528668120&fm=26&gp=0.jpg\"\n" +
"\t title=\"1541054057414099008.jpg\" alt=\"2.jpg\" /><img src=\"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3446458559,1680525880&fm=26&gp=0.jpg\"\n" +
"\t title=\"1541054060899024343.jpg\" alt=\"3.jpg\" /></p>";
然后通过WebView的第二种加载方式进行加载：
mWebView.loadDataWithBaseURL(null,mRichText, "text/html" , "utf-8", null);
这里的图片是网络图片所以需要加入联网权限：
<uses-permission android:name="android.permission.INTERNET"/>
运行效果如下：
image
很显然富文本没有做到与屏幕适配，那么接下来我们来处理下富文本的样式做到适配屏幕。
修改富文本样式适配屏幕
这里我用的是Hbuilder方便预览，当然也可以直接在记事本了进行修改，改完之后修改后缀名为html然后通过浏览器预览。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>img{max-width: 100%; width:100%; height:auto;}*{margin:0px;}</style>
</head>
<body>
<p style="text-align: left;"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1383902695,1129447956&fm=26&gp=0.jpg"
title="1541054054758015328.jpg" alt="1.jpg" /><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2353449440,2528668120&fm=26&gp=0.jpg"
title="1541054057414099008.jpg" alt="2.jpg" /><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3446458559,1680525880&fm=26&gp=0.jpg"
title="1541054060899024343.jpg" alt="3.jpg" /></p>
</body>
</html>
将代码结合富文本进行动态修改富文本样式：
private String getHtmlData(String bodyHTML) {
String head = "<head>"
+ "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> "
+ "<style>img{max-width: 100%; width:100%; height:auto;}*{margin:0px;}</style>"
+ "</head>";
return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
}
适配完后的效果：
image
项目源码：https://github.com/myml666/RichTextDemo
