【发布时间】: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