Local native rendering of LaTeX data formulas for Android learning and exploration

Foreword:

I have been working on finding a more efficient solution for the company. As a K12 online education app, it is inevitable that there will be LaTeX mathematical formula display requirements in the function. This part of the company has already implemented this function, but I personally feel that it is in terms of experience and efficiency. Still not very good, today let's talk about how to render LaTeX mathematical formulas natively.

First learn about LaTeX math formulas

What is Latex? Interested students can check the encyclopedia: Latex encyclopedia .

Latex mathematical formula: It is to express a mathematical formula through Latex, for example:

Example: $$ \\[ \\sum_{k=1}^nk^2 = \\frac{1}{2} n (n+1).\\] $$

Represents a mathematical formula:

current plan

Since the native rendering of latex mathematical formulas has not been found before, the previous solution is relatively simple and rude. The method of generating pictures directly through Latex, and then the client uses a custom TextView to mix images and texts.

Analyze the advantages and disadvantages:

There may be many mathematical formulas in a topic, and there will be a large number of image download requirements.
Because it is a picture download, the download will be too slow in a weak network environment
Since it is a downloaded image, the rendering process is slow and the memory overhead is relatively large.

selected plan

Based on the current situation, I have been thinking about finding an alternative solution. I recently looked for a solution. I was surprised to find that there is now an open source framework that supports Latex native rendering. Learn to use it today. It is: FlexibleRichTextView.

Introduction to FlexibleRichTextView

One can define most labels by yourself (for example, you can define bold as <b></b> or [bold][/bold] etc.), support LaTeX, pictures, code highlighting, tables, quotes and many text styles such as bold, italic, centering, strikethrough, underline, etc. library.

gitHub address: https://github.com/daquexian/FlexibleRichTextView

FlexibleRichTextView use

1.) Add to the file in the project root directory build.gralde:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

2.) In appthe build.gradlefile add

compile 'com.github.daquexian:FlexibleRichTextView:0.8.2'

3.) Specific use

JLaTeXMath must be initialized before use, add in Application or elsewhere

AjLatexMath.init(context); // init library: load fonts, create paint, etc.

If you want to automatically identify the language in the code snippet for highlighting, add it in Application or elsewhere

// train classifier on app start
CodeProcessor.init(this);

To display rich text, just call a flexibleRichTextView.setText(String text) method like

String richText = "[h][center]hi![/center][/h]" +
                "[quote]This is quote[/quote]" +
                "[code]print(\"Hello FlexibleRichTextView!\")[/code]" +
                "Hello FlexibleRichTextView!\n" +
                "This is LaTeX:\n" +
                "$e^{\\pi i} + 1 = 0$";
flexibleRichTextView.setText(richText);

其他相关知识请异步到：FlexibleRichTextView中文使用文档本文主要是验证对Latex的支持。

4.）使用举例

在布局中引入FlexibleRichTextView

  <com.daquexian.flexiblerichtextview.FlexibleRichTextView
       android:id="@+id/test_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:layout_margin="10dp" />

添加一些Latex数学公式，看下具体展示情况

FlexibleRichTextView richTextView = (FlexibleRichTextView) findViewById(R.id.test_text);
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("$$\\sum_{i=1}^n a_i=0$$,");

        stringBuilder.append("$$f(x)=x^{x^x}$$");
        stringBuilder.append("$$f(x_1,x_x,\\ldots,x_n) = x_1^2 + x_2^2 + \\cdots + x_n^2 $$");
        stringBuilder.append("$$\\left. \\frac{du}{dx} \\right|_{x=0}.$$");
        stringBuilder.append("f(n) = \\begin{cases} \\frac{n}{2}, & \\text{if } n\\text{ is even} \\\\ 3n+1, & \\text{if } n\\text{ is odd} \\end{cases}");

        stringBuilder.append("$$\\mbox{对任意的$x>0$}, \\mbox{有 }f(x)>0. $$");
        stringBuilder.append("$$\\sqrt[n]{x_r_r_r} $$");
        stringBuilder.append("$$ \\frac{x+2}{x} \\sqrt{x} $$");
        stringBuilder.append("$$ \\[f(x,y,z) = 3y^2 z \\left( 3 + \\frac{7x+5}{1 + y^2} \\right).\\] $$");

        stringBuilder.append("$$ P(x|c)=\\frac{P(c|x)\\cdot P(x)}{P(x)} $$");
        stringBuilder.append("$$ \\Large x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a} $$");
        stringBuilder.append("$$ \\sum_{i=1}^n i = \\frac{n(n+1)}2 $$");
        stringBuilder.append("$$ f(x)=\\int_{-\\infty}^x e^{-t^2}dt $$ 这道公式我也不知道怎么做");

        stringBuilder.append("$$ \\cos 2\\theta  = \\cos^2 \\theta - \\sin^2 \\theta = 2 \\cos^2 \\theta - 1. $$");

        stringBuilder.append("$$ \\displaystyle= \\frac{k(k+1)}{2}+k+1 $$");
        stringBuilder.append("$$ \\frac{x}{2}-3=0 $$");
        stringBuilder.append("$$ x=\\frac{3}{2} $$");
        stringBuilder.append("$$ \\[ \\sum_{k=1}^n k^2 = \\frac{1}{2} n (n+1).\\] $$");

        richTextView.setText(stringBuilder.toString());

Display of results

The internal specific Latex display is based on LatexTextView, and then it is added to the FlexibleRichTextView container. Since there will be other problems of mixing images and texts in the project, the direct use of FlexibleRichTextView cannot meet the needs, and it needs to be developed based on LatexTextView.

Summarize:

This article mainly verifies whether local native rendering of Latex mathematical formulas is feasible. Next, the FlexibleRichTextView will be secondary developed to meet the needs of the project.