使用 CodeView 库创建一个 Android 代码编辑器应用程序

• CodeView 仓库

特点

在开始创建代码编辑器应用程序之前，例如，我们将为 Golang 创建它，我们需要为该应用程序创建一个需求列表，例如，我们需要我们的代码编辑器支持以下功能：

• GoLang 的语法高亮显示
• 支持多主题，并能够在运行时更改主题
• 错误高亮显示，以突出显示错误和警告
• 像 JetBrains IDEs 一样，使用不同的颜色突出显示 TODO 注释
• 基于我们的语言关键字的自动完成

实现

现在，我们可以开始逐个功能地处理项目。

我们将使用 CodeView 库来帮助我们创建这个 CodeEditor。

在启动新项目后，我们需要将库添加到其中。

在 build.gradle 文件中，我们将添加 jitpack 支持以下载 CodeView 库

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

在依赖文件中，我们将添加 CodeView，然后同步 gradle 以下载它

dependencies { 
     implementation 'com.github.AmrDeveloper:CodeView:1.0.0'
}

现在是时候将 CodeView 添加到 XML 布局中。对于这个例子，我们将使用 activity_main

<com.amrdeveloper.codeview.CodeView
    android:id="@+id/codeView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/darkGrey"
    android:dropDownWidth="@dimen/dimen150dp"
    android:dropDownHorizontalOffset="0dp"
    android:dropDownSelector="@color/darkGrey"
    android:gravity="top|start" />

现在我们需要配置 View 以使用 GoLang，因此我们将创建一个简单的 Java 类，其中包含 CodeView 的配置，并为您的语言的每个属性设置颜色，例如，数字的颜色和 string 的颜色等。

public class GoSyntaxManager {

    //Language Keywords
    private static final Pattern PATTERN_KEYWORDS = 
            Pattern.compile("\\b(break|default|func|interface|case|defer|" +
            "go|map|struct|chan|else|goto|package|switch|const" +
            "|fallthrough|if|range|type|continue|for|import|return|var|" +
            "string|true|false|new|nil|byte|bool|int|int8|int16|int32|int64)\\b");

    //Brackets and Colons
    private static final Pattern PATTERN_BUILTINS = Pattern.compile("[,:;[->]{}()]");

    //Data
    private static final Pattern PATTERN_NUMBERS = Pattern.compile("\\b(\\d*[.]?\\d+)\\b");
    private static final Pattern PATTERN_CHAR = Pattern.compile("'[a-zA-Z]'");
    private static final Pattern PATTERN_STRING = Pattern.compile("\".*\"");
    private static final Pattern PATTERN_HEX = Pattern.compile("0x[0-9a-fA-F]+");
    private static final Pattern PATTERN_TODO_COMMENT = Pattern.compile("//TODO[^\n]*");
    private static final Pattern PATTERN_COMMENT = 
            Pattern.compile("//(?!TODO )[^\\n]*" + "|" + "/\\*(.|\\R)*?\\*/");
    private static final Pattern PATTERN_ATTRIBUTE = Pattern.compile("\\.[a-zA-Z0-9_]+");
    private static final Pattern PATTERN_OPERATION =
            Pattern.compile( ":|==|>|<|!=|>=|<=|->|=|>|<|%|-|-=|%=|\\+|\\-|\\-=|
                              \\+=|\\^|\\&|\\|::|\\?|\\*");

    public static void applyMonokaiTheme(Context context, CodeView codeView) {
        codeView.resetSyntaxPatternList();
        //View Background
        codeView.setBackgroundColor
                 (codeView.getResources().getColor(R.color.monokia_pro_black));

        //Syntax Colors
        codeView.addSyntaxPattern
          (PATTERN_HEX, context.getResources().getColor(R.color.monokia_pro_purple));
        codeView.addSyntaxPattern
          (PATTERN_CHAR, context.getResources().getColor(R.color.monokia_pro_green));
        codeView.addSyntaxPattern
          (PATTERN_STRING, context.getResources().getColor(R.color.monokia_pro_orange));
        codeView.addSyntaxPattern
          (PATTERN_NUMBERS, context.getResources().getColor(R.color.monokia_pro_purple));
        codeView.addSyntaxPattern
          (PATTERN_KEYWORDS, context.getResources().getColor(R.color.monokia_pro_pink));
        codeView.addSyntaxPattern
          (PATTERN_BUILTINS, context.getResources().getColor(R.color.monokia_pro_white));
        codeView.addSyntaxPattern
          (PATTERN_COMMENT, context.getResources().getColor(R.color.monokia_pro_grey));
        codeView.addSyntaxPattern
          (PATTERN_ATTRIBUTE, context.getResources().getColor(R.color.monokia_pro_sky));
        codeView.addSyntaxPattern
          (PATTERN_OPERATION, context.getResources().getColor(R.color.monokia_pro_pink));
        //Default Color
        codeView.setTextColor( context.getResources().getColor(R.color.monokia_pro_white));

        codeView.addSyntaxPattern
            (PATTERN_TODO_COMMENT, context.getResources().getColor(R.color.gold));

        codeView.reHighlightSyntax();
    }
}

在 MainActivity 中，现在我们需要初始化 CodeView 并设置配置

public class MainActivity extends AppCompatActivity {

    private CodeView mCodeView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mCodeView = findViewById(R.id.codeView);
        GoSyntaxManager .applyMonokaiTheme(this, mCodeView);
        configLanguageAutoComplete();
    }

    private void configLanguageAutoComplete() {
        //Load current Programming Language
        final String[] languageKeywords = getResources().getStringArray(R.array.go_keywords;

        //Custom list item xml layout
        final int layoutId = R.layout.suggestion_list_item;

        //TextView id to put suggestion on it
        final int viewId = R.id.suggestItemTextView;
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, layoutId, viewId, 
                                                                languageKeywords);

        //Add Custom Adapter to the CodeView
        mCodeView.setAdapter(adapter);
    }
}

现在我们的 CodeEditor 已经准备好我们想要的所有功能了。

我们还可以轻松添加提示、警告和错误支持，例如，要添加错误、提示、警告行高亮显示，您可以使用此函数设置行号和颜色。

codeView.addErrorLine(lineNumber, color);

您可以删除语法或错误高亮显示。

codeView.resetSyntaxPatternList();
codeView.removeAllErrorLines();

结果

该库还包含您可能想要使用的其他一些功能。
请查看 库仓库，以查看 Java、Python 的文档和代码示例。

历史

• 2020 年 11 月 4 日：初始版本