The method for WebView developed by Android to load HTML source code including escape characters to realize rich text display

Look at the renderings of the old routines first:

WebView loads HTML source code with transfer characters

Look at the rendering of the escaped characters:

First look at the method of loading HTML source code in WebView as follows:

 webview.loadDataWithBaseURL(null, html源码, "text/html", "utf-8", null);

As shown in the figure above, if the HTML is loaded with escape characters, it will be the same as the first rendering, so we need to manually escape it. There are currently two methods

Method 1: You can replace the escape characters: (not recommended because there are too many escape characters in HTML)

htmlData = htmlData.replaceAll("&", "");
htmlData = htmlData.replaceAll(""", "\"");
htmlData = htmlData.replaceAll("&lt;", "<");
htmlData = htmlData.replaceAll("&gt;", ">");
htmlData = htmlData.replaceAll("nbsp;", " ");

Method 2: (Highly recommended)

Method 2 I have tested many times, if the text and image are mixed on the same line and do not wrap on the same line, the image may not be displayed.

  if (!TextUtils.isEmpty(htmlData)) {
                Spanned spanned = null;
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
                    //使用HTML的方法转义,api24以上方法
                    spanned = Html.fromHtml(htmlData, Html.FROM_HTML_MODE_COMPACT);
                } else {
                    //使用HTML的方法转义,api24以下方法
                    spanned = Html.fromHtml(htmlData);
                }
                MCLog.e("打印HTML源码", spanned.toString());
                wvReadMsgContent.loadDataWithBaseURL(null, spanned.toString(), "text/html", "utf-8", null);
                //数据加载后隐藏缩放按钮
                wvReadMsgContent.getSettings().setDisplayZoomControls(false);
            }

If you look messed up, I will post the source code: ReadMessageActivity.java

package com.mchsdk.paysdk.activity;

import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.view.View;
import android.view.WindowManager;
import android.webkit.WebView;
import android.widget.ImageView;
import android.widget.TextView;

import com.lidroid.xutils.exception.HttpException;
import com.lidroid.xutils.http.RequestParams;
import com.mchsdk.paysdk.bean.DeleteMsgBean;
import com.mchsdk.paysdk.bean.GotMsgByIdParam;
import com.mchsdk.paysdk.bean.MsgContentBean;
import com.mchsdk.paysdk.callback.YhshNetRequestCallBack;
import com.mchsdk.paysdk.config.MCHConstant;
import com.mchsdk.paysdk.utils.MCLog;
import com.mchsdk.paysdk.utils.TextUtils;
import com.mchsdk.paysdk.utils.YhshNetUtils;
import com.mchsdk.paysdk.utils.YhshUtils;
import com.xigu.gson.Gson;

import org.apache.http.entity.StringEntity;

import java.io.UnsupportedEncodingException;

/**
 * 消息阅读页面
 *
 * @author xiayiye5
 * 2020年6月5日16:49:56
 */
public class ReadMessageActivity extends MCBaseActivity implements View.OnClickListener {

    private TextView tvReadMsgTitle;
    private TextView tvReadMsgTime;
    private WebView wvReadMsgContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN
                | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_UNSPECIFIED);
        setContentView(getLayout("activity_read_message"));
        initView();
        initData();
    }

    private void initView() {
        ImageView ivCloseReadMsg = findViewById(getId("iv_close_read_msg"));
        tvReadMsgTitle = findViewById(getId("tv_read_msg_title"));
        tvReadMsgTime = findViewById(getId("tv_read_msg_time"));
        wvReadMsgContent = findViewById(getId("wv_read_msg_content"));
        //设置网页自适应
        wvReadMsgContent.getSettings().setUseWideViewPort(true);
        wvReadMsgContent.getSettings().setLoadWithOverviewMode(true);
        //设置网页字体大小
//        wvReadMsgContent.getSettings().setTextSize(WebSettings.TextSize.LARGEST);
        wvReadMsgContent.getSettings().setTextZoom(250);
        // 设置可以支持缩放
        wvReadMsgContent.getSettings().setSupportZoom(true);
        // 设置出现缩放工具
        wvReadMsgContent.getSettings().setBuiltInZoomControls(true);
        ivCloseReadMsg.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == getId("iv_close_read_msg")) {
            finish();
        }
    }

    /**
     * 1.调用消息读取成功,2.调用获取消息内容
     */
    private void initData() {
        int msgId = getIntent().getIntExtra("msgId", 0);
        RequestParams params = new RequestParams();
        GotMsgByIdParam gotMsgByIdParam = new GotMsgByIdParam();
        GotMsgByIdParam.BodyBean bodyBean = new GotMsgByIdParam.BodyBean();
        bodyBean.setId(msgId);
        gotMsgByIdParam.setBody(bodyBean);
        GotMsgByIdParam.HeaderBean headerBean = new GotMsgByIdParam.HeaderBean();
        headerBean.setToken(YhshUtils.getInstance().getLoginToken(this));
        gotMsgByIdParam.setHeader(headerBean);
        String json = new Gson().toJson(gotMsgByIdParam);
        MCLog.e("消息内容的参数", json);
        try {
            params.setBodyEntity(new StringEntity(json, "UTF-8"));
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        params.setContentType("application/json");
        YhshNetUtils.getInstance().requestHttpPost(MCHConstant.DDD_URL_PRD + "gfanmsg/read", params, new MessageContentCallBack(1));
        YhshNetUtils.getInstance().requestHttpPost(MCHConstant.DDD_URL_PRD + "gfanmsg/info", params, new MessageContentCallBack(2));
    }

    class MessageContentCallBack implements YhshNetRequestCallBack {
        private int requestType;

        MessageContentCallBack(int requestType) {
            this.requestType = requestType;
        }

        @Override
        public void onSuccess(String responseInfo) {
            if (requestType == 1) {
                MCLog.e("打印已读消息数据", responseInfo + "");
                DeleteMsgBean deleteMsgBean = new Gson().fromJson(responseInfo, DeleteMsgBean.class);
                int result = deleteMsgBean.getResult();
                if (result == 1) {
                    //已阅读
                    MCLog.e("阅读", "阅读成功!");
                }
            } else {
                MsgContentBean msgContentBean = new Gson().fromJson(responseInfo, MsgContentBean.class);
                MCLog.e("打印消息详情数据", responseInfo);
                //设置消息内容
                updateMsgContentData(msgContentBean);
            }
        }

        @Override
        public void onFail(HttpException e, String s) {
            String localizedMessage = e.getLocalizedMessage();
            MCLog.e("打印异常", localizedMessage + ":" + s);
        }
    }

    private void updateMsgContentData(MsgContentBean msgContentBean) {
        MsgContentBean.ResultBean resultContent = msgContentBean.getResult();
        if (resultContent != null) {
            String htmlData = resultContent.getMessage_text();
            tvReadMsgTitle.setText(resultContent.getMessage_title());
            tvReadMsgTime.setText(resultContent.getSend_time());
            if (!TextUtils.isEmpty(htmlData)) {
                Spanned spanned = null;
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
                    //使用HTML的方法转义,api24以上方法
                    spanned = Html.fromHtml(htmlData, Html.FROM_HTML_MODE_COMPACT);
                } else {
                    //使用HTML的方法转义,api24以下方法
                    spanned = Html.fromHtml(htmlData);
                }
                MCLog.e("打印HTML源码", spanned.toString());
//                htmlData = htmlData.replaceAll("&amp;", "");
//                htmlData = htmlData.replaceAll("&quot;", "\"");
//                htmlData = htmlData.replaceAll("&lt;", "<");
//                htmlData = htmlData.replaceAll("&gt;", ">");
//                htmlData = htmlData.replaceAll("nbsp;", " ");
                wvReadMsgContent.loadDataWithBaseURL(null, spanned.toString(), "text/html", "utf-8", null);
                //数据加载后隐藏缩放按钮
                wvReadMsgContent.getSettings().setDisplayZoomControls(false);
            }
        }
    }
}

Look at the xml layout again:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3.7" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:background="@drawable/mch_input_back_shape"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingTop="15dp">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="消息"
                android:textColor="@color/login_text"
                android:textSize="18sp" />

            <ImageView
                android:id="@+id/iv_close_read_msg"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_gravity="right"
                android:layout_marginRight="15dp"
                android:src="@drawable/mch_close1" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_marginTop="5dp"
            android:background="#DEDEDE" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:background="@null"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_read_msg_title"
                android:layout_width="match_parent"
                android:layout_height="22dp"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="15dp"
                android:gravity="center"
                android:singleLine="true"
                android:textColor="@color/login_text"
                android:textSize="15sp"
                tools:text="我是消息标题呀我是消息标题" />

            <TextView
                android:id="@+id/tv_read_msg_time"
                android:layout_width="match_parent"
                android:layout_height="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="10dp"
                android:gravity="center"
                android:textColor="@color/login_text"
                android:textSize="11sp"
                tools:text="2019-05-03   10:59:51" />

            <WebView
                android:id="@+id/wv_read_msg_content"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_marginBottom="17dp"
                android:scrollbars="none" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="4" />
</LinearLayout>

Please fill in the background color of the missing picture in the code. Thank you

Guess you like

Origin blog.csdn.net/xiayiye5/article/details/107383543