目錄
前言
最近公司的項目需要用到富文本展示，因此將WebView加載富文本的方法總結了一下赫编。
WebView加載數(shù)據(jù)的方式
WebView加載數(shù)據(jù)的方式有兩種：
webView.loadUrl(data);//加載url
webView.loadDataWithBaseURL(null,data, "text/html" , "utf-8", null);//加載html數(shù)據(jù)
因為我們需要加載富文本咱台，所以我們選擇第二種加載方式络拌。
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);
這里的圖片是網(wǎng)絡圖片所以需要加入聯(lián)網(wǎng)權限：
<uses-permission android:name="android.permission.INTERNET"/>
運行效果如下：
很顯然富文本沒有做到與屏幕適配，那么接下來我們來處理下富文本的樣式做到適配屏幕回溺。
修改富文本樣式適配屏幕
這里我用的是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>
將代碼結合富文本進行動態(tài)修改富文本樣式：
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>";
}
適配完后的效果：
項目源碼：https://github.com/myml666/RichTextDemo
