文档章节

Android原生简易图文编辑器和展示实现

叶大侠
 叶大侠
发布于 2017/05/21 10:01
字数 1588
阅读 55
收藏 1

talk is cheep, show you the code. 源码参考

背景

尽管Android设备的性能日益增强,但是通过webview来展示内容和原生的体验还是有一定的差距的,在某些情况下,我们只是需要简单的图文并排就够了,比如一些帖子,这个时候用webview就显的有点重,考虑到这一点,我们决定在客户端原生支持特定的网页标签。

为了兼顾到各个平台,我们约定输出是标准的html内容,对于已有的内容,可以进行内容的重新排版,把多余的标签去掉并换成约定好的标签。

设计思路

笔者有着多年对于markdown编辑器的使用经验,对于markdown语法的简洁有深度的喜爱,对于很多时候的编辑工作都是够用了,我更倾向于轻便够用而非周全复杂的东西,在设计编辑器的时候,不经意就想到了markdown。

经过协商我们初期先支持下面的几种简单的样式:

  1. 标题[一级] 对应 <h1> 标签。
  2. 文本段落[一级] 对应 <p> 标签。
  3. 文本加粗、换行[二级,嵌在<p>里面] 对应 <b> <br> 标签。
  4. 图片[一级],对应 <img> 标签。
  5. 超链接[二级] 对应 <a> 标签。

约定结果:

正确:

<h1>这是一级标题</h1>
<p>段落1</p>
<p>段落2<b>我是加粗部分</b>hello<br></p>
<img src="http://github.com/pic.png" width="100", height="100"/>
<p>段落3<b>加粗加粗加粗<br>加粗加粗加粗</b></p>

错误:

<p>段落1<p>内部段落</p></p>
<p>段落3<img src="http://github.com/pic.png" width="100", height="100"/></p>

定义好支持的标签之后,接着就是由设计师设计好各个标签对应的文字样式,间距和图片的展示方式了。

编辑器实现

通过研究几个开源项目,发现原生实现富文本编辑器主要有两个思路,一个是基于单个EditText通过组合不同的Spannable来实现,另外一个是组合EditText和ImageView等不同的控件,个人认为第二种方式更加灵活,但是加粗,链接等处理也是需要Spannable的,因此组合了两种方式。

根据上面约定支持的标签,我定义了三种类型的控件:

YRichEidtText

  1. EditImageView是插入编辑框的图片控件,它也负责了上传的相关工作。
  2. RichEditText这个控件负责段落的编辑,段落内可以支持一些文字样式,比如加粗和超链接。这个控件是cwac-richedit的一个实现,它封装了很多的spannable实现,这里只是用到了加粗和链接,源码虽然有改动,为了尊重作者的劳动成果,决定不改动它的名字。
  3. HeadingEditText这个控件用来处理标题的输入,其实就是字体大一些和加粗的EditText。

RichTextEditor是比较核心的实现,它继承了ScrollView,它的职责是协调控件和光标、返回键之间的交互,主要实现了下面的接口:

输出:生成html的过程其实就是遍历各个控件了RichEditText里面的Spannable的过程。

Note: 值得一提的是笔者在看的时候,发现cwac-richedit这个项目是运行不起来的,一般情况下到这里就放弃对这个库的研究了,但是翻了下代码,发现作者的单元测试很充分,而且文档描述也算是比较清晰,仔细研究了一下,发现代码设计的有很多亮点,思路也非常清晰,于是后面就选择了这个库作为基础的文字段落样式实现,如果想基于它实现下划线,斜体,字体颜色等功能,应该是非常方便的一件事情。

网页内容显示实现

我们的富文本会作未帖子的详情和评论列表中,由于是出现在列表中,我们需要考虑到控件的复用问题,所以一开始定义一个完整实现的富文本控件的思路就放弃了,而是通过按竖直方向拆分不同的Item,利用RecylerView或者ListView的复用特性来实现,尽管这样做起来会麻烦不少,但是完美地避免了列表不断滑动过程中对象不断创建和销毁带来的内存抖动问题。

从下面流程图可以看出这个处理流程,首先解析html相关节点,并把其中相关的值和属性封装到不同的对象中,然后通过列表数据去驱动整个视图的显示,解析Html是通过Jsoup来实现的,接口非常友好,和用Jquery差不多。

由于要处理的标签很少,在Jsoup的帮助下,整个解析代码不超过30行:


    Document doc = Jsoup.parseBodyFragment(htmlContent);
    List<Node> childNodeList = doc.body().childNodes();
    if (childNodeList == null || childNodeList.isEmpty()) {
        return null;
    }
    final int size = childNodeList.size();
    List<IHtmlElement> elList = new ArrayList<>();
    for (int pos = 0; pos != size; pos++) {
        Node childNode = childNodeList.get(pos);
        String tagName = childNode.nodeName();
        if (tagName.equalsIgnoreCase("h")) {
            elList.add(new PElement(Html.fromHtml(((Element) childNode).html())));
        } else if(tagName.equalsIgnoreCase("h1")){
            elList.add(new HElement(((Element) childNode).html()));
        }else if (tagName.equalsIgnoreCase("img")) {
            String src = childNode.attr("src");
            String width = childNode.attr("width");
            String height = childNode.attr("height");
            elList.add(new ImgElement(src, NumberUtils.parseInt(width, 0), NumberUtils.parseInt(height, 0)));
        } else {
            if (childNode instanceof Element) {
                elList.add(new PElement(Html.fromHtml(((Element) childNode).html())));
            } else {
                elList.add(new PElement(htmlContent));
            }
        }
    }

节点对象和对应的Item视图,可以看到结构还是非常清晰的,对于以后想添加一些其他的样式也是很好扩展的。

总结

虽然不是一个很复杂的东西,从整个实现思路来看,还是比较好的兼顾了性能和可扩展度,也很好体现了分而治之和数据驱动视图的开发模式。不过从功能上来说还是存在一些缺陷的,比如光标不能跨段进行选择, 只能支持至上而下的排版。

参考

  1. XRichText: https://github.com/sendtion/XRichText
  2. cwac-richedit: https://github.com/commonsguy/cwac-richedit
  3. Html解析库Jsoup:https://jsoup.org/

© 著作权归作者所有

共有 人打赏支持
叶大侠

叶大侠

粉丝 58
博文 44
码字总数 67312
作品 5
广州
程序员
私信 提问
OpenCart App正式发布!

OpenCart App正式发布! 国内首创OpenCart手机APP公测啦!! 经过数月奋战,国内首创OpenCart手机APP商城已开发完成。我们遵循原生开发,一体化系统建设思想,完成了OpenCart的APP 开发,包括...

OpenCart中文官方
2015/12/10
1
0
Android Studio列表用法之一:ListView图文列表显示(实例)

前言: ListView这个列表控件在Android中是最常用的控件之一,几乎在所有的应用程序中都会使用到它。 目前正在做的一个记账本APP中就用到了它,主要是用它来呈现收支明细,是一个图文列表的呈...

AnneHan
09/30
0
0
KJFrameForAndroid 2.20 发布,Android 应用开发框架

KJFrameForAndroid的设计思想是通过封装Android原生SDK中复杂的复杂操作而达到简化Android应用级开发,最终实现快速而又安全高效的开发APP。目标是用最少的代码,完成最多的操作,用最高的效...

kymjs张涛
2015/04/21
3.8K
21
LuaScriptCore v1.2.1,移动端 Lua 桥接框架

LuaScriptCore旨在能够在多种平台上方便地使用Lua。其提供了与各种平台的功能交互(目前支持iOS、Android以及OS X),让开发者无须关心Lua与各个平台之间是实现交互的细节,只需要根据自己的...

vimfung
2016/11/25
939
0
Android 解决图文混排,图片和文字居中对齐问题(ImageSpan)

一. 概述 众所周知,Android图文混排可以通过SpannableString来实现,通过在相应位置使用ImageSpan替换即可,但是使用过的人会发现,imageSpan只提供了两种对齐方式,如下所示: 但是在大多数...

Mr云台
2017/04/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《告诉你真实的美国教育》的读后感3900字

《告诉你真实的美国教育》的读后感3900字: 文章的开篇分析了我们耳熟能详的关于美国教育的小故事,就是那个因为幼儿园的老师教了“0”这个字母,然后妈妈告老师剥夺了孩子的想象力,再然后幼...

原创小博客
21分钟前
0
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
36分钟前
1
0
exportfs命令, vsftp搭建ftp服务

exportfs命令 当修改/etc/exports文件后,更改的内容是不会立即生效的。如果重启nfs服务,会导致客户端重启期间的请求是挂起等待的,可以把客户端的挂载umount进行卸载后,再重启nfs服务,但...

野雪球
46分钟前
1
0
编程价值观、原则、模式

读自《实现模式》 模式,即是针对特定问题的通用解决方案。 每个模式都承载这一点点理论,但实际编程中存在着一些更加深远的影响力,远不是孤立的模式所能概括的。 价值观是编程过程的统一支...

遥借东风
今天
2
0
php分割二级域名做跳转处理方法

使用php中的全局变量 $_SERVER['HTTP_HOST'] ,可以获得用户当前访问的域名字符串,在这里面查询自己定义的各个子域名字符串,然后使用header函数重定向到不同的页面 代码如下 if( strpos($...

Mr_Azaz
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部