小米便签维护——充实文本编辑功能

        小米便签的编辑框中支持的功能仅仅是简单的文本输入，复制粘贴等功能，这显然满足不了现在用户对于文本编辑的需求，所以我在编辑框中添加了各种对编辑文本的高亮、编号等功能，适用于各种需要记录便签的情况。

 

目录

一、引言

二、实现过程

2.1 定义布局

2.2 引入新的文本编辑器RichEditor

2.2 解决两种不同类的冲突

2.3 实现富文本编辑功能

三、功能展示

四、总结

---

一、引言

        小米便签的编辑框中支持的功能仅仅是简单的文本输入，复制粘贴等功能，这显然满足不了现在用户对于文本编辑的需求，所以我在编辑框中添加了各种对编辑文本的高亮、编号等功能，适用于各种需要记录便签的情况。

二、实现过程

2.1 定义布局

        既然是对编辑文本内容的改变，那么就要在编辑主界面note_edit.xml中添加布局，这里我在编辑界面的底部添加各种装饰文本的按钮：

<HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="37dp"
        android:layout_gravity="bottom">

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

            <Button
                android:id="@+id/action_bold"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="@drawable/action_bold" />

            <Button
                android:id="@+id/action_italic"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="@drawable/action_italic" />

              ....

 添加后效果如下：

图1 布局效果图 

如图在编辑框底部出现了各种按钮，其中的图片资源可以自行配置，这里不再讲解。

2.2 引入新的文本编辑器RichEditor

        小米便签原始的编辑器为EditText，现在网络中富文本编辑器很多，这里选择了RichEditor，它的类文件中有大量已经实现的方法，例如撤销、返回、加粗、斜体等功能。

        首先在build.gradle中引入依赖项：

dependencies {
    implementation files("D:\\Lessons\\APPS\\httpcomponents-client-4.5.12-bin\\lib\\httpclient-osgi-4.5.12.jar")
    implementation files("D:\\Lessons\\APPS\\httpcomponents-client-4.5.12-bin\\lib\\httpclient-win-4.5.12.jar")
    implementation files("D:\\Lessons\\APPS\\httpcomponents-client-4.5.12-bin\\lib\\httpcore-4.4.13.jar")
    implementation 'jp.wasabeef:richeditor-android:1.2.2'//新增依赖
}

 然后再note_edit.xml中把原始的“net.micode.notes.ui.NodeEditText“改为”jp.wasabeef.richeditor.RichEditor“，效果如下：

<jp.wasabeef.richeditor.RichEditor
                        android:id="@+id/note_edit_view"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"

之后将NoteEditActivity类中的EditText改为RichEditor

    /** * 修改代码：富文本编辑器*/
    private RichEditor mNoteEditor;
    //private EditText mNoteEditor;

2.3解决两种不同类的冲突

        但是这样更改以后并不意味着富文本功能就可以用了，因为RichEditor和EditText类文件中的方法是不一样的，一些EditText类中的方法，如getText、setText这样获取和设置文本的关键方法就不能使用了。其中的关键在于已保存的已编辑的文本内容在哪里，只有找到了这个内容，才能在编辑框中设置显示当前编辑的内容。我查找了RichEditor的类文件，也没有发现相关的属性。

        后来发现类文件中设置文本监听器方法中有一个参数text，这个参数就是文本内容，为了把这个参数传出来，我在NoteEditActivity中设置了一个新的属性mText，在监听器中把text赋值给mText，这样就能对当前文本做一些操作了。

//RichEditor类文件
public interface OnTextChangeListener {
  void onTextChange(String text);
}

在初始化资源方法initResources中加入文本监听器，取出文本text。

/**
修改代码块：设置富文本编辑器及监听器
 */
mNoteEditor = (RichEditor) findViewById(R.id.note_edit_view);
mNoteEditor.setOnTextChangeListener(new RichEditor.OnTextChangeListener() {
    @Override
    public void onTextChange(String text) {
        mText = text;
        mNoteLength = textChange(mText).length();
        mNoteHeaderHolder.tvModified.setText(DateUtils.formatDateTime(NoteEditActivity.this,
                mWorkingNote.getModifiedDate(), DateUtils.FORMAT_SHOW_DATE
                        | DateUtils.FORMAT_NUMERIC_DATE | DateUtils.FORMAT_SHOW_TIME
                        | DateUtils.FORMAT_SHOW_YEAR)+"\n字符数："+mNoteLength);
    }
});

同时原有的setText方法可以用setHtml方法来代替。

mNoteEditor.setHtml(mText);//修改代码：设置便签编辑内容

2.4 实现富文本编辑功能

        首先需要设置一个文本编辑框：

/**
 * 新增方法：
 * 初始化富文本编辑框
 */
public void initRichEditor(){
    mNoteEditor.setEditorHeight(200);//设置编辑器界面高度
    mNoteEditor.setEditorFontSize(22);//字体大小
    mNoteEditor.setEditorFontColor(Color.BLACK);//字体颜色
    mNoteEditor.setPadding(6, 5, 6, 5);//内边距
    mNoteEditor.setPlaceholder("点击输入内容");//设置默认显示语句
    mNoteEditor.setInputEnabled(true);//设置编辑器是否可用
    mNoteEditor.setBackgroundResource(R.drawable.edit_white);//编辑背景
}

每行代码的作业如注释所示，其中最后一行设置背景，这个背景可以是自定义的任意图片。

        然后需要实现每一个小功能，思路很清楚，就是给每一个按钮配置资源，然后设置一个点击响应，其中调用富文本编辑器RichEditor中的参数即可，例如：

/*
 * 撤销当前标签状态下所有内容
 * */
findViewById(R.id.action_undo).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mNoteEditor.undo();
    }
});

其中在设置字体颜色、字体底色更改时需要添加一个AlertDialog，支持用户选择不同的颜色，实现方法如下：

findViewById(R.id.action_bg_color).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {//设置点击响应方法
        mNoteEditor.focusEditor();
        new AlertDialog.Builder(NoteEditActivity.this).setTitle("选择字体背景颜色")//设置一个AlertDialog供用户选择具体的颜色
            .setSingleChoiceItems(R.array.text_bg_color, 0,
                new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        switch (which) {
                            //红
                            case 0:
                                mNoteEditor.setTextBackgroundColor(Color.RED);
                                break;
                            //黄
                            case 1:
                                mNoteEditor.setTextBackgroundColor(Color.YELLOW);
                                break;
                            //蓝
                            case 2:
                                mNoteEditor.setTextBackgroundColor(Color.BLUE);
                                break;
                            //绿
                            case 3:
                                mNoteEditor.setTextBackgroundColor(Color.GREEN);
                                break;
                            //黑
                            case 4:
                                mNoteEditor.setTextBackgroundColor(Color.BLACK);
                                break;

                            case 5:
                                mNoteEditor.setTextBackgroundColor(Color.WHITE);
                                break;
                        }
                    }
                }).show();
    }
});

功能实现完毕。

三、功能展示

图2 部分功能展示

图3 字体颜色选择

图4 字体更改功能展示

四、总结

      这里我实现了富文本编辑的功能，其中主要解决的问题在于解决原文本编辑器和新文本编辑器之间不兼容的方法，还有就是引入一个新的类之后，在build:gradle和note_edit中的配置问题，总体难度不大。