最近接到項目需求:移動端原生寫一個富文本編輯器。? ? ? ? ( ⊙ o ⊙ )從沒遇到過富文本要用原生寫的,然后就查閱各種資料。然后結合自己的思路:其實安卓的富文本編輯器就是一個 “容器”。
那么接下來我就帶給大家說一說我自定義這個富文本編輯器的思路與實現過程。
·經過查閱資料之后發現:安卓的富文本編輯器就是一個容器,在用戶對這個編輯器中的子控件進行操作的時候對這么多的子控件進行控制。 這就是一個簡易的富文本編輯器。
1.安卓有一個控件叫做scrollview,這個控件是一個自動擴容并且可以滑動的控件,既然是富文本編輯器,肯定少不了這個。(編輯器中所有的操作都用在這個容器中)
2.緊接著,根據需求得知:我們原生的富文本編輯器里需要輸入文字和插入圖片,邏輯僅此而已。但是,圖片的右上角需要有一個小叉號,用于刪除此張圖片。那么就先來封裝這個小控件。
正如大家所見:封裝一個相對布局,圖片居中顯示,自適應大小,然后在布局的右上角有一個叉號, 那么這個叉號的點擊事件就用來處理這個控件的增加和刪除。
3.準備工作做好了,接下來就開始封裝和處理邏輯。
在封裝之前,我們想想需要處理的邏輯和可能遇到的情況:
在初始化這個編輯器之前,我們需要有一個默認的輸入框,讓用戶可以編輯。
用戶編輯的過程中需要注意兩個地方,用戶編輯完一段文字后需要添加一張圖片,正常在容器中添加即可;如果用戶將光標指在一段文本的中間,那么則需要判斷這個光標的位置,然后將文本框中的文字分離,緊接著在分離的文字中間插入圖片,然后在圖片下面再插入一個文本框,并且將分離完的后半部分文字添加在輸入框中。這么以來就完成了圖片添加的部分邏輯。
再來說,圖片刪除的邏輯: 如果用戶點擊右上角刪除圖片,那就將整個封裝的控件刪除;再次判斷如果圖片上下都是輸入框,就合并這兩個輸入框。
清楚了大致邏輯之后,我們開始封裝這個所謂的富文本編輯器。
一、繼承scrollview,封裝一個自定義組件,并且將需要的組件與變量初始化。(直接上代碼)
初始化變量及其構造方法。
在其構造方法中加入出初始化控件時所有需要的子控件,還有子控件的初始化及其監聽。
以上就是初始化控件之后的一些基本操作,大致意思如下:
1)創建編輯器中的第一個文本輸入框Edittext,并且設置其屬性,還有監聽。這個監聽有兩個,一個是獲取焦點的監聽,一個是輸入文本內容的監聽。
在輸入框獲取到焦點的時候,需要將默認文字設置成空(產品需求);還有另一個需求就是文本框內不允許輸入表情,對于表情android有一套算法,這個算法大概是判斷這個文本的占字節數,如果輸入的文本中有發現類似的敏感字,就直接刪除這個表情,并且提示用戶“暫不支持輸入表情”。再有就是監聽當前光標的位置,然后對退格鍵進行監聽。在代碼中都有注釋寫到的。后續會粘貼出來代碼。
2)然后就是對動畫的一個初始化,如果用戶刪除掉圖片之后,直接讓圖片消失會顯得很突然,所以我們在其中加入一個動畫,來讓用戶感覺這一個過程不是那么突然,那么粗暴。
-----------------------------------------------------------來一條分割線------------------------------------------------------------
以上是一個簡單的初始化,你們一定覺得有點亂,我也覺得有點亂。因為這個容器里面需要做的操作太多了。[流淚]
二、來解析一下當中的邏輯
1)首先看看插入圖片的邏輯
首先初始化好這個圖片的布局,并且給圖片相應的資源。為了后面取值,每一個圖片給一個tag標簽,這個標簽的值就是這個圖片加載的url地址。
其次,要確定這個圖片插入的位置,如下代碼:
容器是從上往下添加的,那么添加的時候需要注意光標的位置;如果輸入框的內容為空,或者光標頂在了輸入框的最前面,那就直接添加一個輸入框和一張圖片;這么以來,就有了一個大編輯器的感覺。? 如果這個光標不是在最前面,并且里面還有內容,那就截取光標前后的內容,將光標后面的內容,設置到下面的輸入框中,然后再在這兩個輸入框中間添加圖片。? 結束完這個操作之后,要判斷默認的提示文字要不要顯示并且隱藏鍵盤。(后續會講解這個默認文字要不要顯示的方法)
在這里貼上添加Edittext的方法:
最難的邏輯已經分析完了,,,接下來開始處理這個默認文字的顯示與隱藏。
2)默認文字的顯示與隱藏
這個問題也苦苦調了一段時間,因為如果用戶一進來就添加圖片,這個時候默認文字也還會顯示,這個原因是:android EditText中的屬性是判斷這個輸入框中有沒有內容,如果有內容才會消失這個默認文字,在這個過程中還遇到一個問題:如果默認文字太多,他自行換行了,那么就會填充這個輸入框的高度,用戶體驗自然就不好了。? 那么在默認文字的處理中,如下:
先給第一個輸入框一個tag,這個是第一個默認的,這個也有可能被頂下去,然后可能被刪除。? ?焦點監聽:如果有焦點了,就直接把他的默認文字給去掉;如果沒有焦點,判斷這個容器中是否只有這么一個控件,如果是的話就繼續判斷 :有焦點就去掉默認提示文字,沒有焦點就設置相關默認提示文字; 如果還有其他控件,就走方法里的判斷。代碼如下:
如果只有一個控件的話,就判斷是不是第一個默認的輸入框,是的話就不作處理,不是的話就對其做焦點監聽。如果還有其他控件的話,就直接把所有的輸入框的 默認提示文字給設置為空。這樣一來所有子控件全部正常了。
每次處理完退格的時候都必須這么判斷一下,因為要監聽容器中的最后一個輸入框的狀態,才能判斷這個默認文字顯示還是隱藏。
------------------------------------------------------------------------------------------------------------------------------------------------------------------
這個富文本編輯器的主要邏輯大致就這么多。以下再來一小段代碼截圖:輸出數據的方法。
將數據存到對象,然后存到集合中。 因為調試數據需要html代碼,然后進行轉換輸出:
代碼基本上就這么多。。。邏輯也梳理完了, 雖然比較亂吧,,但是都是必經的過程,如果有更好的修改意見,歡迎提出。
最后將View代碼附上。
這幾顯示可能有點亂,大家可以復制到AS或者eclipse上格式化后查看。本文章是修改了網上流行了某個富文本編輯器的改進版,如果侵犯請說明。 因為鏈接我忘了,,,