android富文本布局,一个Android富文本类库

XRichText

一个Android富文本类库，支持图文混排，支持编辑和预览，支持插入和删除图片。

实现的原理：

使用ScrollView作为最外层布局包含LineaLayout，里面填充TextView和ImageView。

删除的时候，根据光标的位置，删除TextView和ImageView，文本自动合并。

生成的数据为list集合，可自定义处理数据格式。

注意事项

xrichtext库中引入了Glide库版本为4.7.1，自己项目中不需要再引入，如果想引入自己的项目，请把Glide排除在外，AppCompat支持库同样也可以排除。

Demo中图片选择器更换为知乎开源库Matisse，适配Android 7.0系统使用FileProvider获取图片路径。

开发环境更新为 AS 3.1.2 + Gradle 4.4 + compileSDK 27 + support library 27.1.1，导入项目报版本错误时，请手动修改为自己的版本。

V1.4版本开放了编辑笔记时的删除图片接口，请自己在Activity中设置OnRtDeleteImageListener接口。

请参考Demo的实现，进行了解本库。可以使用Gradle引入，也可以下载源码进行修改。

如有问题，欢迎提出。可以加我QQ：524100248，微信：sendtion

截图预览

使用方式

1. 作为module导入

把xrichtext作为一个module导入你的工程。

2. gradle依赖

allprojects {

repositories {

...

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

}

}

dependencies {

implementation 'com.github.sendtion:XRichText:1.5'

}

如果出现support版本不一致问题，请排除XRichText中的support库，或者升级自己的support库为27.1.1版本。 Glide版本为4.7.1，依赖于27版本库，如果你用的为低版本，同样的处理方式。 使用方式：

implementation ('com.github.sendtion:XRichText:1.4') {

exclude group: 'com.android.support'

exclude group: 'com.github.bumptech.glide'

}

具体使用

在xml布局中添加基于EditText编辑器(可编辑)

android:id="@+id/et_new_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:rt_editor_image_height="500"

app:rt_editor_image_bottom="10"

app:rt_editor_text_init_hint="在这里输入内容"

app:rt_editor_text_size="16"

app:rt_editor_text_color="@color/colorAccent"/>

在xml布局中添加基于TextView编辑器(不可编辑)

android:id="@+id/tv_note_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:rt_view_image_height="0"

app:rt_view_image_bottom="10"

app:rt_view_text_size="16"

app:rt_view_text_color="@color/colorAccent"/>

自定义属性

具体参考Demo

RichTextView

rt_view_image_height 图片高度，默认为0自适应，可以设置为固定数值，如500、800等

rt_view_image_bottom 上下两张图片的间隔，默认10

rt_view_text_size 文字大小，类似于sp单位，但是只有数值，如16 = 16sp

rt_view_text_color 文字颜色，使用color资源文件

RichTextEditor

rt_editor_image_height 图片高度，默认为500，可以设置为固定数值，如500、800等

rt_editor_image_bottom 上下两张图片的间隔，默认10

rt_editor_text_init_hint 默认提示文字，默认为“请输入内容”

rt_editor_text_size 文字大小，类似于sp单位，但是只有数值，如16 = 16sp

rt_editor_text_color 文字颜色，使用color资源文件

我把数据保存为了html格式，生成字符串存储到了数据库。

生成数据

String noteContent = getEditData();

private String getEditData() {

List editList = et_new_content.buildEditData();

StringBuffer content = new StringBuffer();

for (RichTextEditor.EditData itemData : editList) {

if (itemData.inputStr != null) {

content.append(itemData.inputStr);

} else if (itemData.imagePath != null) {

content.append("");

}

}

return content.toString();

}

显示数据

et_new_content.post(new Runnable() {

@Override

public void run() {

showEditData(content);

}

});

protected void showEditData(String content) {

et_new_content.clearAllLayout();

List textList = StringUtils.cutStringByImgTag(content);

for (int i = 0; i < textList.size(); i++) {

String text = textList.get(i);

if (text.contains("

String imagePath = StringUtils.getImgSrc(text);

int width = ScreenUtils.getScreenWidth(this);

int height = ScreenUtils.getScreenHeight(this);

et_new_content.measure(0,0);

Bitmap bitmap = ImageUtils.getSmallBitmap(imagePath, width, height);

if (bitmap != null){

et_new_content.addImageViewAtIndex(et_new_content.getLastIndex(), bitmap, imagePath);

} else {

et_new_content.addEditTextAtIndex(et_new_content.getLastIndex(), text);

}

et_new_content.addEditTextAtIndex(et_new_content.getLastIndex(), text);

}

}

}

图片点击事件

tv_note_content.setOnRtImageClickListener(new RichTextView.OnRtImageClickListener() {

@Override

public void onRtImageClick(String imagePath) {

ArrayList imageList = StringUtils.getTextFromHtml(myContent, true);

int currentPosition = imageList.indexOf(imagePath);

showToast("点击图片："+currentPosition+"："+imagePath);

// TODO 点击图片预览

}

});

具体的使用方式，请参考Demo代码。

更新历史

v1.5 2018.07.10

修复详情页连续加载多张图片导致后续图片都跟第一张图片相同高度的问题

修复Demo插入图片后点击图片导致空指针异常的问题

去掉Demo插入图片后会插入一张网络图片的测试代码

v1.4 2018.06.22

添加自定义属性，可以设置图片高度，相邻图片间隔，文字大小和颜色

修复没有实现图片删除接口导致的崩溃问题，开放图片删除接口

添加点击图片查看大图的功能，开放图片点击接口

加入崩溃日志信息展示，加入崩溃日志信息发送到邮件

优化图片插入代码，删除多余的无用代码

v1.3 2018.05.05

开发环境更新到AS 3.1.2 + Gradle 4.4

优化图片插入的逻辑

在Demo中加入插入网络图片的示例代码

在Demo中图片选择器更换为知乎matisse

v1.2 2018.04.05

编辑笔记时，使用接口回调在外部处理图片的删除操作，可以自行实现删除本地图片还是网络图片

实现网络图片的加载，插入图片时，可以传入本地图片SD卡路径，也可以传入网络图片地址

在新建或编辑笔记时，连续多张图片之间插入输入框，方便在图片间输入文本内容

修复在文件中间插入图片时，导致的后面文字丢失的问题

修复连续插入多张图片时，会出现图片倒序插入的问题

v1.1 2017.03.27

优化内存占用，解决内存溢出问题

结合RxJava使用(参考Demo)

支持连续插入多张图片不卡顿(参考Demo)

解决插入图片导致的卡顿和崩溃

v1.0 2016.10.26

初次提交

实现插入图片

实现图文混排

实现编辑和保存

感谢

本库参考了以下项目，感谢各位大神的辛苦劳作！

其他

License

Copyright 2018 sendtion

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.