Android实现方程编辑器

Android实现方程编辑器

在之前的2篇文章《iOS Pages插入方程功能分析》和《Android插入方程技术方案分析》中,我们讨论了如何在Android平台实现方程功能。现在我们着手来实现方程编辑器。

一、目标

验证Android的方程技术实现方案,并完成『神马笔记』的方程编辑器。

二、概述

整个方程编辑器的实现过程,大概分成以下几个步骤。

序号 步骤 说明
1 整体布局 自上而下包含以下几个部分:
1. 标题栏
2. 预览框
3. 编辑框
4. 快捷输入栏
2 快捷输入栏 为了测试方便,首先实现快捷输入栏以便于编辑方程。
3 方程编辑框 文本输入框,只支持LaTeX。MathML将在未来版本中得到支持。
4 方程预览框 方程预览以及状态提醒。
1. 方程预览——用户没有输入
2. 空方程——方程内容为空
3. 无效方程——无法解析
4. 方程式——最终方程效果
5 标题栏 对方程整体进行操作

三、实现过程

1. 快捷输入栏

快捷输入栏使用RecyclerView完成,内容通过配置文件提供,以方便未来的扩展。

  • symbol——显示的符号
  • text——插入的文本内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
{
"list":[
{
"symbol": "+",
"text": "+"
},
{
"symbol": "-",
"text": "-"
},
{
"symbol": "×",
"text": "\\times "
},
{
"symbol": "÷",
"text": "\\div "
},
{
"symbol": "=",
"text": "="
},
{
"symbol": "^",
"text": "^"
},
{
"symbol": "_",
"text": "_"
},
{
"symbol": "\\",
"text": "\\"
},
{
"symbol": "{",
"text": "{"
},
{
"symbol": "}",
"text": "}"
},
{
"symbol": "<",
"text": "<"
},
{
"symbol": ">",
"text": ">"
},
{
"symbol": "(",
"text": "("
},
{
"symbol": ")",
"text": ")"
}
]
}

此外,快捷输入栏跟随软键盘进行显示,软键盘隐藏后不显示快捷输入栏。

2. 方程编辑框

使用EditText来获取用户输入,并添加TextWatcher来监听用户输入以实时更新方程预览。

3. 方程预览框

方程预览框包含以下几种状态。

  1. 空内容——提示"方程预览"
  2. 空方程——提示"空方程"
  3. 无效方程——提示"无效方程"
  4. 有效方程——显示方程

  • 方程解析通过TeXFormula实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
TeXFormula parse(String text) {
if (texFormula == null) {
this.texFormula = new TeXFormula();
}

TeXFormula f = texFormula;
try {
texFormula.setLaTeX(text);
} catch (Exception e) {
f = null;
}

return f;
}
  • 判断方程是否有效
1
2
3
boolean isValid(TeXFormula formula) {
return formula != null;
}
  • 判断是否是空方程
1
2
3
4
5
6
7
8
9
10
11
12
boolean isEmpty(TeXFormula formula) {
if (formula == null) {
return true;
}

Atom root = formula.root;
if (root instanceof EmptyAtom) {
return true;
}

return false;
}

4. 标题栏

标题栏主要控制2个操作按钮。

  1. 取消
  2. 插入或更新

插入或更新文本,以用户传递的初始内容进行判断。

初始内容为空——插入

初始内容不为空——更新

可用状态以方程解析结果进行判断,仅在方程有效时可用,并且内容与初始内容不同。

四、遗留问题

序号 问题 描述
1 中文问题 一旦输入中文,渲染阶段会因为字体原因崩溃。
使用try/catch捕获RuntimeException可以解决该问题。
2 空方程判断 目前仅当方程root atom为EmptyAtom时判断为空方程。
更为准确的做法应该是判断是否有可显示的内容,没有可显示内容时,应该都判断为空方程。

五、Next

遗留的2个问题能否得到解决,请继续关注『济沧海 x 远沧溟』。

六、Finally

~绿树听鹈鴃~更那堪~鹧鸪声住~杜鹃声切~