【问题标题】:webview display problem in new versions of android新版本android的webview显示问题
【发布时间】:2019-03-27 07:11:14
【问题描述】:

我在 google play 中发布了一个应用程序,针对 API 版本 16 到 26(minSdkVersion 16,targetSdkVersion 26)。我收到了一些低评分评论,因为在 android 8 或更高版本上“没有出现 webview 信息”。 (不是所有的设备,一些)

这个应用程序建议使用 MathJax 将 LaTEX 显示为数学公式。

我已经使用 android studio 模拟器(所有 API 版本)测试了我的应用,没有出现任何错误,但评分仍然很低。

这是我的自定义 webiew:

public class MathView extends WebView {

String textColor = "#000000";
String backgroundColor = "#ffffff";

public Boolean loaded = false;

public String tag = "white";
public String text = "";

public MathView(Context context, AttributeSet attrs){
    super(context, attrs);
    this.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    String tag = "white";
    if(attrs != null)
         tag = attrs.getAttributeValue("http://schemas.android.com/apk/res/android", "tag");

    initView(context,tag);
}

public void displayText(String text){
    this.text = text;
    loadMath();
}

private String getTemplate(){
    String template = "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            "<style>\n" +
            "        img {\n" +
            "            max-width: 90% !important;\n" +
            "            height: auto!important;\n" +
            "        }\n" +
            "        .mjx-chtml {\n" +
            "            font-size: 100% !important;\n" +
            "        }\n" +
            "    </style>\n" +
            "    <script src=\"file:///android_asset/mathview/MathJax.js?config=TeX-MML-AM_CHTML\"></script>\n" +
            "    <script src=\"file:///android_asset/mathview/extensions/img.js?config=TeX-MML-AM_CHTML\"></script>\n" +
            "    <script>\n" +
            "        MathJax.Hub.Config({\n" +
            "            \"HTML-CSS\": {\n" +
            "                linebreaks: {\n" +
            "                    automatic: !0\n" +
            "                }\n" +
            "            },\n" +
            "            CommonHTML: {\n" +
            "                linebreaks: {\n" +
            "                    automatic: true\n" +
            "                }\n" +
            "            },\n" +
            "            SVG: {\n" +
            "                linebreaks: {\n" +
            "                    automatic: true\n" +
            "                }\n" +
            "            },\n" +
            "            displayAlign: \"left\"\n" +
            "        });\n" +
            "    </script>\n" +
            "</head>\n" +
            "\n" +
            "<body style=\"background:"+this.backgroundColor+";color:"+this.textColor+";overflow:hidden;font-family:serif;\">\n" +
            this.text +
            "</body>\n" +
            "\n" +
            "</html>";

    return template;
}


public void setValues(float[] values){
    // Do stuff calculating
}
private void initView(Context context, @Nullable String tag){

    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    inflater.inflate(R.layout.custom_webview, this);
    this.getSettings().setJavaScriptEnabled(true);
    getSettings().setAllowFileAccess(true);
    getSettings().setDisplayZoomControls(false);
    getSettings().setBuiltInZoomControls(false);
    getSettings().setSupportZoom(false);
    getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

    if(tag != null)
        this.tag = tag;
    loadMath();
}

private void loadMath(){
    if(!text.equals("")){
        if(tag.equals("white")){
            this.loadDataWithBaseURL("null",this.getTemplate(),"text/html","UTF-8","about:blank");
        }
        else if(tag.equals("purple")){
            textColor = "#ffffff";
            backgroundColor = "#da4b71";
            this.loadDataWithBaseURL("null",this.getTemplate(),"text/html","UTF-8","about:blank");
        }
        else if(tag.equals("purple_dark")){
            textColor = "#ffffff";
            backgroundColor = "#bb4061";
            this.loadDataWithBaseURL("null",this.getTemplate(),"text/html","UTF-8","about:blank");
        }
        else if(tag.equals("gray")){
            backgroundColor = "#f1f1f1";
            this.loadDataWithBaseURL("null",this.getTemplate(),"text/html","UTF-8","about:blank");
        }
    }

}


public void passValue(final String value){
    this.text = value;
    loadMath();
}
public void updateValue(final String value){
    this.text = value;
    loadMath();
}

public void setBackground(String color){
    this.backgroundColor = color;
}
public void setTextColor(String color){
    this.textColor = color;
}
}

这是我的 xml,它将与内部的自定义 webview 和活动相关联:

<packagename.views.MathView
    android:id="@+id/titleMathView"
    android:scrollbars="none"
    android:tag="white"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

我使用以下代码在活动中使用 webview:

MathView titleMathView titleMathView = (MathView) findViewById(R.id.titleMathView);//this resource exists inside xml file
titleMathView.setWebChromeClient(new chromeClient());
titleMathView.displayText("\\(\\frac{1}{2}\\)"); //Now math must be displayed

这是我的 chromClient 类:

private ProgressDialog questionsLoading;
private class chromeClient extends WebChromeClient {
            Runnable hideLoadingRunnable = new Runnable() {
                @Override
                public void run() {
                    questionsLoading.dismiss();
                }
            };
            Runnable showLoadingRunnable = new Runnable() {
                @Override
                public void run() {
                    questionsLoading = ProgressDialog.show(QuizActivity.this, "",
                            "Loading questions...", true);
                    final Handler handler = new Handler();
                    handler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            if(questionsLoading != null)
                                if(questionsLoading.isShowing())
                                    hideLoadingRunnable.run();
                        }
                    }, 6000);
                }
            };
            private chromeClient(){
                if(questionsLoading == null)
                    showLoadingRunnable.run();
            }
            @Override
            public void onProgressChanged(WebView view, int progress){//not working
                if(progress == 100) {
                    if(questionsLoading != null)
                        hideLoadingRunnable.run();
                }
            }

}

这是有问题的屏幕截图:(一位用户通过电子邮件发送给我)

这是必须显示的内容:

这是遇到问题的设备列表(此列表基于 google play 中的评论,我无法使用模拟器重现问题):

  • 设备:Pixel 3 XL(交叉影线)-> 操作系统:Android 9
  • 设备:Pixel XL (marlin) -> 操作系统:Android 9
  • 设备:Galaxy Tab A (2017) (gta2swifi) -> 操作系统:Android 8.1
  • 设备:Galaxy J7 (j7y17lte) -> 操作系统:Android 8.1
  • 设备:Galaxy S10+ (beyond2) -> 操作系统:Android 9

【问题讨论】:

  • 你能说明你接受什么结果吗?
  • @BlackBlind 整个项目的建议是将 LaTEX 显示为数学公式。我简化了在stackoverflow中发布它的代码。我现在编辑了问题并将所有代码放入其中。请参阅我在自定义 webiew 类上的更新。
  • @BlackBlind 为了更好地描述问题,我在问题中添加了两个屏幕截图。
  • 你能把xml布局文件也给我们看看吗?可能和stackoverflow.com/questions/1981507/…有关
  • 看来您的 webview 容器设置了固定的高度,所以我会尝试将 match_parent 用于两个布局属性。也许 webview 的某些实现在布局上表现不同。祝你好运

标签: android


【解决方案1】:

感谢 cmets,问题很容易解决。

我无法在任何模拟器或实际设备中重现该问题。在尝试了很多不同的事情后,我决定将应用升级到 AndroidX API 版本。

将 compileSdkVersion 更改为 28 (AndroidX API) 后,问题出现在 android 8.1 或更高版本的模拟器上。

问题在于在 xml 中的 webview 上使用 android:layout_height="wrap_content"。

将其更改为 android:layout_height="match_parent" 后,webview 显示信息几乎正常。

webview的xml现在是这样的:

<packagename.views.MathView
    android:id="@+id/titleMathView"
    android:scrollbars="none"
    android:tag="white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

问题与此主题有关:

Why does Android WebView display a black screen?

但是在将 height 更改为 match_parent 后,有时 webview 太长了,底部有很多多余的空格。

我需要那个 wrap_content 部分,但我无法使用它,因为它会导致 anroid 8.1 或更高版本中出现黑色 webview 错误。

为了解决这个问题,我使用了一个 javascript 界面来根据其内容更改 webview 的高度。

如果您对 match_parent webviews 有同样的问题,您可以阅读此页面中的夹具:

https://stackoverflow.com/a/25187094/2202171

【讨论】:

  • 我遇到了同样的问题。但是,我无法控制 webview。如果在 xamarin 表单上,如何更改布局?
猜你喜欢
  • 2012-01-18
  • 1970-01-01
  • 2012-08-08
  • 2020-03-10
  • 1970-01-01
  • 1970-01-01
  • 2022-01-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多