android - 如何在 android 布局中使用多个 MathJax 公式 View

Question

我正在开发一个安卓应用程序。我想在布局中显示多个公式。但它并没有在我的布局中显示所有公式。

我要查看:

但它是只查看一个 WebView 显示公式:

我的 xml 代码:

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

<LinearLayout
    android:id="@+id/topLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="#ffd0e3e5"
    android:gravity="center"
    android:paddingBottom="6dp"
    android:paddingTop="5dp" >

    <TextView
        android:id="@+id/textTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#ff33203d"
        android:textSize="18sp" />
</LinearLayout>

<WebView
    android:id="@+id/txtQuestion"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/topLayout"
    android:layout_weight="1" />

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/txtQuestion"
    android:layout_marginTop="10dp"
    android:layout_weight="0" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <WebView
                android:id="@+id/WebView04"
                android:layout_width="fill_parent"
                android:layout_height="170dp"
                android:layout_weight="1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <WebView
                android:id="@+id/WebView01"
                android:layout_width="fill_parent"
                android:layout_height="165dp"
                android:layout_marginTop="2dp"
                android:layout_weight="1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <WebView
                android:id="@+id/WebView02"
                android:layout_width="fill_parent"
                android:layout_height="80dp"
                android:layout_marginTop="2dp"
                android:layout_weight="1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <WebView
                android:id="@+id/WebView03"
                android:layout_width="fill_parent"
                android:layout_height="80dp"
                android:layout_marginTop="2dp"
                android:layout_weight="1" />
        </LinearLayout>
    </LinearLayout>
  </ScrollView>
</RelativeLayout>

我的 Java 代码:

public class MainActivity extends Activity implements View.OnClickListener{
 private WebView    webViewEquationDisplay,webview,WebView04,WebView01,WebView02,WebView03;
 private String mathML;
 private int exampleIndex = 0;
private String doubleEscapeTeX(String s) {
    String t="";
    for (int i=0; i < s.length(); i++) {
        if (s.charAt(i) == '\'') t += '\\';
        if (s.charAt(i) != '\n') t += s.charAt(i);
        if (s.charAt(i) == '\\') t += "\\";
    }
    return t;
}

private String getExample(int index) {
    return getResources().getStringArray(R.array.mml_examples)[index];
}

private final String MLxml="<math xmlns=\"http://www.w3.org/1998/Math/MathML\">"+"<mstyle displaystyle=\"true\">"+"<mrow>  <munderover>    <mo>&#8747;</mo>    <mn>-1</mn>    <mn>+1</mn>" +"  </munderover>  <mfrac>    <mrow>      <mi>d</mi>      <mi>x</mi>    </mrow>" +"    <mi>x</mi>  </mfrac></mrow></mstyle></math> Text ......";

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webview = (WebView) findViewById(R.id.txtQuestion);
    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setBuiltInZoomControls(true);
    initiateWebView(MLxml,webview);

    WebView04 = (WebView) findViewById(R.id.WebView04);
    WebView04.getSettings().setJavaScriptEnabled(true);
    WebView04.getSettings().setBuiltInZoomControls(true);
    initiateWebView(MLxml,WebView04);

    WebView01 = (WebView) findViewById(R.id.WebView01);
    WebView01.getSettings().setJavaScriptEnabled(true);
    WebView01.getSettings().setBuiltInZoomControls(true);
    initiateWebView(MLxml,WebView01);

    WebView02 = (WebView) findViewById(R.id.WebView02);
    WebView02.getSettings().setJavaScriptEnabled(true);
    WebView02.getSettings().setBuiltInZoomControls(true);
    initiateWebView(MLxml,WebView02);

    WebView03 = (WebView) findViewById(R.id.WebView03);
    WebView03.getSettings().setJavaScriptEnabled(true);
    WebView03.getSettings().setBuiltInZoomControls(true);
    initiateWebView(MLxml,WebView03);
}

private void initiateWebView( String formulaML,WebView formulaWebview){        
    mathML=formulaML;
    webViewEquationDisplay=formulaWebview;
   webViewEquationDisplay.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);


            webViewEquationDisplay.loadUrl("javascript:document.getElementById('math').innerHTML='" +doubleEscapeTeX(mathML)+"';");

      webViewEquationDisplay.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        }
    });

    final String mathJaxOfflineUrl = "file:///android_asset/MathJax/MathJax.js";            
  webViewEquationDisplay.loadDataWithBaseURL("http://bar/", "<script type='text/x-mathjax-config'>"
            +"MathJax.Hub.Config({ " 
                +"showMathMenu: false, "
                +"jax: ['input/MathML','output/HTML-CSS'], " // output/SVG

                         +"extensions: ['mml2jax.js'], " 
                          +"TeX: { extensions: ['noErrors.js','noUndefined.js'] }, "
               // +"jax: ['input/AsciiMath','output/HTML-CSS'], "
              //  +"extensions: ['asciimath2jax.js'], " 
              //  +"AsciiMath: { fixphi: true, useMathMLspacing: true, displaystyle: false, decimalsign: \".\" }, "
              +"});</script>"
            +"<script type='text/javascript' "
              +"src='"+mathJaxOfflineUrl+"'"
              +"></script><span id='math'></span>","text/html","utf-8","");
  }

}

    }

我流这个enter link description here例子。请帮助我!

Answer 1

问题是由于在 initiateWebView() 中使用字段 webViewEquationDisplay 引起的:该方法是从 onCreate() 调用四个 WebView 连续。他们每个人都有自己的 WebViewClient，到目前为止一切顺利。

但由于 WebViewClient.onPageFinished() 中的语句引用了 webViewEquationDisplay 并且因为此方法将仅在 之后在主线程上执行(四次) onCreate() 已完成，最后分配给 webViewEquationDisplay 的 WebView 将成为 loadUrl() 将始终被调用。

解决该问题的一种方法是使用方法参数而不是字段。这对于 onPageFinished() 尤其重要。

private void initiateWebView(String formulaML, WebView formulaWebview){
    formulaWebview.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            view.loadUrl("javascript:document.getElementById('math').innerHTML='" +doubleEscapeTeX(formulaML)+"';");
            view.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        }
    });

    final String mathJaxOfflineUrl = "file:///android_asset/MathJax/MathJax.js";
    formulaWebview.loadDataWithBaseURL("http://bar/", "<script type='text/x-mathjax-config'>"
            +"MathJax.Hub.Config({ "
            +"showMathMenu: false, "
            +"jax: ['input/MathML','output/HTML-CSS'], " // output/SVG

            +"extensions: ['mml2jax.js'], "
            +"TeX: { extensions: ['noErrors.js','noUndefined.js'] }, "
            // +"jax: ['input/AsciiMath','output/HTML-CSS'], "
            //  +"extensions: ['asciimath2jax.js'], "
            //  +"AsciiMath: { fixphi: true, useMathMLspacing: true, displaystyle: false, decimalsign: \".\" }, "
            +"});</script>"
            +"<script type='text/javascript' "
            +"src='"+mathJaxOfflineUrl+"'"
            +"></script><span id='math'></span>","text/html","utf-8","");
}