Android自定義view之emoji鍵盤

gengzhibo發表於2018-05-05

歡迎大家訪問我的個人部落格

主要還是最近做了一個emoji鍵盤的需求,感覺可以簡單封裝一下順便整理下emoji相關的知識

Android中的 emoji

有關Android中emoji的文章有很多了,我就不簡單羅列相關內容了,在這記錄一下開發過程中遇到的一些坑...

  1. 首先是TextView首次繪製中emoji的顏色會偏淺,官方的demo中依然存在這種問題...

官方demo

(詳情可以參考https://github.com/googlesamples/android-EmojiCompat) ,上圖中可以看到其中兩個Textview的emoji顏色偏淺,但是EditView中就不會出現這個問題...

解決方法的話暫時有兩種,一是針對不能引入EmojiCompat的專案,可以考慮針對textview多次繪製,但是對此Textview設定background的時候會失效... 二是可以針對可以引入EmojiCompat的專案,但是簡單的直接設定EmojiCompat仍然不好用...通過自定義View即demo中的Custom TextView即刻解決這個問題

  1. 原生emoji的適配問題

不同版本的系統中適配的emoji是不同的,一般來說高版本相容低版本的emoji.

另一個就是國產rom的問題,部分rom中會將android的emoji圖示替換成ios的emoji.會給人一種也沒什麼差別的錯覺...但是,好歹都適配了啊,部分圖示還是android的emoji風格,就很迷

  1. emoji的大小問題

emoji的大小...是跟隨TextView的textSize,所以要想調整emoji的大小,需要更改textView的textSize值.

  1. EditText的刪除問題

鍵盤嘛,需要對editText進行操作,其中就包括了刪除的操作,然而,emoji有的佔兩個位元組,有的佔一個自己.所以再刪除的時候需要驗證內容再刪除對應的位元組

簡單來說,及時更新裝置或者開發工具的話emoji展示並不是什麼問題,願望是美好的,現實卻總是不進如人意.(只有我覺得Android的果凍人emoji看著還可以麼...)

Emoji鍵盤

先展示效果圖,

完成效果圖

一個emoji鍵盤的主要功能都實現了,包括了emoji的輸入及刪除,多個emoji標籤頁之間的切換及底部滑動指示器的更改.需要展示底部標籤頁超過螢幕範圍的效果,所以展示的部分資料是重複的.

設計過程

最初的設計中是沒有底部多個emoji標籤頁的,感覺功能有點單薄,所以後期加入了底部過個item切換的功能

整個View設計如下,

整個View設計

  1. emoji展示與選擇區域: 主要是用於展示emoji的內容,這裡使用了ViewPager,在初始化的時候會對emoji展示列表進行計算,最終填充到ViewPager中.對於整個View來說,在初始化ViewPager的Adapter的時候就將所有的emoji填入,在滑動或者選擇底部item的時候會根據初始化中計算好的各個頁面的展示資訊控制指示器及底部item.
  2. ViewPager的指示器: 實際上是一個LinearLayout,根據設定展示對應的數量及位置,此處展示的是當前item的相關指示器,當選擇新的item或者滑動到新的item後,指示器的數量會進行更新,而當上面的ViewPager滑動卻沒有切換到新的item的時候只是更新指示器指示的內容.
  3. emoji標籤部分: 使用了一個RecycleView,是因為當標籤比較多時候滑動效果和定位展示比較方便.

設計缺陷

  • 暫只支援emoji選擇,不能提供自定義圖片輸入(感覺更改完了就不只是emoji輸入器了,下個就做這個了)
  • 底部指示器現在更新的過程中是全部移除view再根據新引數設定新view沒有動畫效果
  • 底部emoji標籤頁再當選擇的item手動滑動超出螢幕顯示外後,再次滑動頂部ViewPager頁面,底部item復位動畫有點僵,仍有優化的餘地

程式碼實現

  1. emoji展示與選擇區域:

主要是針對頂部ViewPager的Adapter處理

emoji展示與選擇區域

  1. EditText文字控制

再將EditText繫結到view中後,對view進行操作後會更改EditText的內容

EditText文字控制

需要注意的是再刪除的時候是要先驗證後兩位是否是一個完整emoji,如果是則刪除後兩個位元組,反之則只刪除一個位元組.

  1. 底部標籤頁指示器

簡單的一個LinearLayout來展示指示器,沒有切換的動畫效果,可以優化一波.

底部標籤頁指示器

  1. 底部標籤選擇器

通過一個RecycleView來實現的底部標籤選擇器

底部標籤選擇器

  1. 監聽ViewPager滑動及底部標籤選擇

新增ViewPager的addOnPageChangeListener方法來監聽滑動及底部標籤選擇的點選回撥

監聽ViewPager滑動及底部標籤選擇

相關程式碼可以訪問我的GitHub來獲取,歡迎大家start或者提供建議.

相關文章