在 android 中显示复杂的 Html 文本，例如 gmail

Question

您好，我必须显示 html 文本及其样式属性，我尝试了 textview 和 webview。

当我将 textview 与 Html.fromHtml("html text ") 一起使用时，它只显示没有 html 样式的文本，而另一方面

当我使用 webview 时，整个内容显示在水平滚动视图的单行中

使用texview

使用网络视图

但它在 gmaill android 应用程序

中运行良好

我的代码用于文本视图

var text = "<p style=\"margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 15px; clear: both; color: rgb(34, 34, 34); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; line-height: 19.5px; background-color: rgb(255, 255, 255);\">The main code is:</p><pre class=\"default prettyprint prettyprinted\" style=\"margin-top: 0px; padding: 5px; border: 0px; overflow: auto; width: auto; max-height: 600px; font-family: Consolas, Menlo, Monaco, \'Lucida Console\', \'Liberation Mono\', \'DejaVu Sans Mono\', \'Bitstream Vera Sans Mono\', \'Courier New\', monospace, sans-serif; color: rgb(57, 51, 24); word-wrap: normal; background-color: rgb(238, 238, 238);\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, \'Lucida Console\', \'Liberation Mono\', \'DejaVu Sans Mono\', \'Bitstream Vera Sans Mono\', \'Courier New\', monospace, sans-serif; white-space: inherit;\"><span class=\"com\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(128, 128, 128);\">// Use WideViewport and Zoom out if there is no viewport defined</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\nsettings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setUseWideViewPort</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">true</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\nsettings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setLoadWithOverviewMode</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">true</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n\nsettings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setLayoutAlgorithm</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"typ\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(43, 145, 175);\">LayoutAlgorithm</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">TEXT_AUTOSIZING</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span></code></pre><p style=\"margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 15px; clear: both; color: rgb(34, 34, 34); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; line-height: 19.5px; background-color: rgb(255, 255, 255);\">The other option is to enable pinch zoom:</p><pre class=\"default prettyprint prettyprinted\" style=\"margin-top: 0px; padding: 5px; border: 0px; overflow: auto; width: auto; max-height: 600px; font-family: Consolas, Menlo, Monaco, \'Lucida Console\', \'Liberation Mono\', \'DejaVu Sans Mono\', \'Bitstream Vera Sans Mono\', \'Courier New\', monospace, sans-serif; color: rgb(57, 51, 24); word-wrap: normal; background-color: rgb(238, 238, 238);\"><code style=\"margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, \'Lucida Console\', \'Liberation Mono\', \'DejaVu Sans Mono\', \'Bitstream Vera Sans Mono\', \'Courier New\', monospace, sans-serif; white-space: inherit;\"><span class=\"com\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(128, 128, 128);\">// Enable pinch to zoom without the zoom buttons</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\nsettings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setBuiltInZoomControls</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">true</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n\n</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">if</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"typ\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(43, 145, 175);\">Build</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">VERSION</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">SDK_INT </span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">&gt;</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\"> </span><span class=\"typ\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(43, 145, 175);\">Build</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">VERSION_CODES</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">HONEYCOMB</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">)</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\"> </span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">{</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n    </span><span class=\"com\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(128, 128, 128);\">// Hide the zoom controls for HONEYCOMB+</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n    settings</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">.</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">setDisplayZoomControls</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">(</span><span class=\"kwd\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 139);\">false</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">);</span><span class=\"pln\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">\n</span><span class=\"pun\" style=\"margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);\">}</span></code></pre> "

为文本视图设置文本

var textView = FindViewById<TextView>(Resource.Id.mywebtext);
textView.TextFormatted = Html.FromHtml(text);

网络视图是

WebSettings settings = webView.Settings;
       //        webView.SetBackgroundColor(Android.Graphics.Color.ParseColor("#123456"));
        settings.UseWideViewPort = false;
        settings.LoadWithOverviewMode = false;
        settings.SetLayoutAlgorithm(WebSettings.LayoutAlgorithm.NarrowColumns);
        webView.LoadData(text, "text/html", "utf-8");

Answer 1

WebView webview = (WebView)this.findViewById(R.id.webview);


String html = "<html><head><title>TITLE!!!</title></head>";
html += "<body><h1>text header</h1></body></html>";


webview.loadDataWithBaseURL(filePath, html, "text/html", "UTF-8", null);

如果没有文件路径：

webview.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);

在 android 中显示复杂的 Html 文本，例如 gmail

Display complex Html text in android like gmail

html

android

textview

webview

xamarin.android