富文本-WebView 实现字体大小，样式，颜色，图片显示正常比例等

86 阅读 0 评论 57 点赞

我是靠谱客的博主细心白昼，最近开发中收集的这篇文章主要介绍富文本-WebView 实现字体大小，样式，颜色，图片显示正常比例等，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.布局
<!-- 富文本-->
<WebView
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/dp_15"
    android:layout_marginRight="@dimen/dp_15" />

2.后台给的数据："content":"<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; line-height: 24px; color: rgb(51, 51, 51); text-align: justify; font-family: arial; white-space: normal; background-color: rgb(255, 255, 255);">对于中国移动、中国联通、中国电信三大运营商，想必国人有很多想吐槽的地方。由于没有其他竞争者，三家每年都能赚取丰厚的利润，特别是中国移动，平均一天能赚几个亿。赚这么多钱，但是服务水平差，办事效率低等等问题却依旧很突出。还有就是停机最准时，催你缴费也及时，挖坑也多，不时给你打电话，让你升级套餐，或者是推荐充多少送多少的活动，但最终的目的是让你花费更多，而不是给你省钱。<p style="margin-top: 22px; margin-bottom: 0px; padding: 0px; line-height: 24px; color: rgb(51, 51, 51); text-align: justify; font-family: arial; white-space: normal; background-color: rgb(255, 255, 255);">在今年3月份，工信部突然说在2019年底前可以携号转网了，意思就是不用换号码，就可以换运营商了。消息一出，网友们就炸了，纷纷吐槽自己一定要换，但是总共就3家，换来换去都是他们。根据网络调查，有近50%的人认为电信最好，而移动却变成了最差。三大运营商各有特点，移动就是太贵，联通就是信号太差，而电信好像最好。<img class="large" src="https://pics3.baidu.com/feed/2fdda3cc7cd98d1089db4805a2bb460a7bec9004.jpeg?token=fffc0171bbeec976d624f70c24d4beda&s=C5166B3A0D9E44C812F090DE000040B1"/><p style="margin-top: 26px; margin-bottom: 0px; padding: 0px; line-height: 24px; color: rgb(51, 51, 51); text-align: justify; font-family: arial; white-space: normal; background-color: rgb(255, 255, 255);">中国移动是成立最晚的一家运营商，但却是发展的最快，规模最大的一家，目前拥有9.2亿用户，是最多的一个。不得不说，<span class="bjh-strong" style="font-size: 18px; font-weight: 700;"(截取了部分)

3.代码

//比较爱钱，代码都是钱的符号
protected <T extends View> T ￥(int id) {
    return (T) super.findViewById(id);
}

mWebView = (WebView) ￥(R.id.webview);

//请求道数据后：url是富文本content内容
initWebView(url, mWebView);

public static void initWebView(String url, WebView mWebView) {
    //设置 webView
    mWebView.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);//取消滚动条
    mWebView.getSettings().setSupportZoom(false);//不支持缩放功能
    mWebView.loadData(url, "text/html", "UTF-8");
    //这里我们使用 jsoup 修改 img 的属性:
    final Document doc = Jsoup.parse(url);
    final Elements imgs = doc.getElementsByTag("img");
    for (int i = 0; i < imgs.size(); i++) {
        //宽度填充手机，高度自适应
        imgs.get(i).attr("style", "width: 100%; height: auto;");
    }
    //这里我们使用 jsoup 修改 embed 的属性:
    Elements embeds = doc.getElementsByTag("embed");
    for (Element element : embeds) {
        //宽度填充手机，高度自适应
        element.attr("width", "100%").attr("height", "auto");
    }
    //webview 无法正确识别 embed 为视频，所以这里把这个标签改成 video 手机就可以识别了
    doc.select("embed").tagName("video");
    mWebView.loadDataWithBaseURL(null, doc.toString(), "text/html", "UTF-8", null);
}

4.效果展示