Android 利用控件显示HTML样式

android显示HTML样式的方法很多，此处介绍两种很简单的方法：TextView和WebView

方法一、利用TextView或者GiftTextView直接显示

这种方法优点是简单，直接设置即可，但缺点就是对样式兼容性不高，对应某些复杂的样式会显示不正确。所以此类方法只适用于显示几行简单的样式的需求，并且当有图片时还需要额外去处理图片。

CharSequence charSequence;
String url1="http://ww.baidu.com";
String str = "<font color='#0099cc'> <a href=\""+url1+"\">"+url1+"</a></font>";
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
charSequence = Html.fromHtml(str,Html.FROM_HTML_MODE_LEGACY);
} else {
charSequence = Html.fromHtml(str);
}
holder.text_left.setText(charSequence);

方法二、利用WebView控件去显示样式

此方法能适用于显示复杂的样式，如显示HTML页面等等，并且自带图片处理不用额外的去处理图片。

首先，我们在layout布局中放入WebView标签，但需要注意的是WebView的父标签的宽高必须是match_parent，具体如图：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:layout_marginTop="10dp"
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>
</LinearLayout>

然后在使用的时候声明WebView

WebSettings webSettings = holder.webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setBlockNetworkImage(false);
//webSettings.setBuiltInZoomControls(true);
//webSettings.setSupportZoom(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setAllowFileAccess(true);
webSettings.setSupportMultipleWindows(true);
webSettings.setDomStorageEnabled(true);
webSettings.setDefaultFontSize(30); //设置显示字体的大小
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
//控制webview不可点击
holder.webView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});

最后设置值，item.getChatMessage().data.toString()获取到的HTML样式，直接传String类型的样式字符串即可：

holder.webView.loadDataWithBaseURL(null, item.getChatMessage().data.toString(), "text/html", "UTF-8", null);

最后显示出来的结果：

对应的html的样式

<style>.im-inquery{background:#3984f5;border-radius:20px;color:#fff;font-size:0.9em;padding:14px 16px;}.im-inquery .header{color:#fff;display:flex;font-size:1em;font-weight:550;justify-content:space-between;}.im-inqueryhr{border-bottom:1px solid #fff;height:0px;margin:10px 0px;}.im-inquery .content .item{display:flex;justify-content:space-between;margin:10px 0px;}.im-inquery .content{padding:10px 0px;}.im-inquery .content .item .item-child:first-child{margin-right:10px;width:60%;}.im-inquery .content .item .item-child:last-child{margin-right:10px;width:40%;}.im-inquery .content .item .item-child.full{width:100%;}.im-inquery .content .item .item-child label{padding:0 4px 0 0;white-space:nowrap;}.im-inquery .content .item .item-child label:not(:empty)::after{content:":";}.im-inquery .content .item .item-child label:empty{display:none;width:0px;}.im-inquery .content .item .item-child .name{white-space:normal;word-break:break-all;}.im-inquery .content .item.i31 .item-child{margin-right:10px;width:auto}.im-inqiry-main .btn-view-hp{text-align:center;}.im-inqiry-main .btn-view-hp a{background:#eee;border-radius:4px;box-shadow:2px 1px 4px 1px #ddd;color:#555;display:inline-block;font-size:1em;margin:10px;padding:4px 10px;text-decoration:none;}.im-inqiry-main .btn-view-hp a:hover{background:#3984f5;color:#fff;}</style>
<div class="im-inqiry-main">
<div class="im-inquery">
<div class="header">
<span>Inquiry</span> <span>15:09</span>
</div>
<hr />
<div class="content">
<div class="item pol">
<div class="item-child">
<label>POL</label> <span class="name">Shanghai</span>
</div>
<div class="item-child">
<label>小港</label><span class="name">WGQ2</span>
</div>
</div>
<div class="item pod">
<div class="item-child">
<label>POD</label><span class="name">Catanzaro</span>
</div>
<div class="item-child">
<label>小港</label><span class="name"></span>
</div>
</div>
<div class="item">
<div class="item-child full">
<label>公司</label><span class="name">XIAOMIKEJIYOUXIANZERENGONGSI</span>
</div>
</div>
<div class="item">
<div class="item-child">
<label>货物箱型1</label> <span class="name">40 Ft HQ Reefer - 40RH</span>
</div>
<div class="item-child">
<label>箱量1</label><span class="name">1</span>
</div>
</div>
<div class="item">
<div class="item-child">
<label>货物箱型2</label> <span class="name">40 Ft HQ Reefer - 40RH</span>
</div>
<div class="item-child">
<label>箱量2</label><span class="name">1</span>
</div>
</div>
<div class="item">
<div class="item-child">
<label>货物箱型3</label><span class="name">40 Ft HQ Reefer - 40RH</span>
</div>
<div class="item-child">
<label>箱量3</label> <span class="name">1</span>
</div>
</div>
<div class="item">
<div class="item-child">
<label>出运时段</label>
8000
<span class="name">最早 2019/09/13</span>
</div>
<div class="item-child">
<label></label><span class="name">最晚2019/09/12</span>
</div>
</div>
<div class="item i31">
<div class="item-child">
<label>船公司</label><span class="name">ABCD</span>
</div>
<div class="item-child">
<label>失效日</label><span class="name">2019/09/15</span>
</div>
<div class="item-child">
<label>危险品</label><span class="name">是</span>
</div>
</div>
<div class="item">
<div class="item-child full">
<label>货盘描述</label><span class="name">测试数据</span>
</div>
</div>
</div>
</div>
<div class="btn-view-hp">
<a href="http://www.ezcarry.com/ViewsRevised/OceanTender/OceanTenderDetail?id=5ecc7e39-a00b-4d75-a4eb-54f6d425a31d">查看货盘详情</a>
</div>
</div>