Android原生簡易圖文編輯器和展現實現

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 的，所以組合了兩種方式。

根據上面約定支持的標籤，我定義了三種類型的控件：

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/

技術交流羣：70948803，大部分時間羣裏都是安靜的，只交流技術相關，不多發言，不歡迎廣告噴子。