How to create Android custom keyboard with Jetpack Compose

date
Oct 6, 2023
slug
how-to-create-android-custom-keyboard-with-jetpack-compose
status
Published
tags
Programming
summary
如何使用 Jetpack Compose 寫客製化鍵盤
type
Post

起因

因為平常有玩魔術方塊的嗜好，這個興趣也算是玩得夠深入，因此有時候想說有沒有機會寫一點好用的工具，提供魔術方塊玩家使用。一段時間前就看到認識的朋友寫了一個 Android 鍵盤，可以打魔術方塊代號，但因為朋友是很短時間做出來的，堪用但有許多不便之處。
到了幾個月前我也把自己的 Android 鍵盤
HushKeyboard
ricky9667 • Updated Apr 24, 2024
 做出來了，比較特別的是這是使用 Jetpack Compose 寫的，感覺可以分享一下。

開始前

雖然 Android 官方有提供 KeyboardView 這個 API，但 KeyboardView 在 API Level 29 就已經 Deprecated 了，也沒有找到官方提供比較好的作法或新一點的 API，因此我一直把這個 Project 放在心裡很久。
某一天，我終於在 Stackoverflow 上看到有人使用 Jetpack Compose 去實作 Android 鍵盤，因此我就馬上動工了。
原本 Stackoverflow 傳送門：點我

實作 Android 鍵盤

回到正題，要用 Jetpack Compose 實作 Android 鍵盤需要做這三件事情：
  • 建立鍵盤 Compose UI
  • 實作 Input Method Editor (IME) Service
  • 在 Android Manifest 新增 Service

建立鍵盤 Compose UI

一開始需要先建立一個實作 AbstractComposeView 的 Class，這部分不太複雜，Content() 這個 composable function 裡面就是之後鍵盤的畫面了。

實作 IME Service

在實作自己的 IME Service 之前，需要先建立一個 Class 去繼承 InputMethodService，並在一些特定的 Lifecycle Event 加入輸入法的 Service 的行爲。（不過這裡直接複製貼上就好了）
接下來就能建立自己的 IME Service，IME Service 需要繼承前面的 LifecycleInputMethodService 。另外 onCreateInputView() 裡面需要 return 前一個步驟用 Compose 寫好的 View，並把這個 IME Service 設定為 View Tree 的 Lifecycle Owner。
另外還要實作 SavedStateRegistryOwner 這個 interface，onCreateInputView() 要設定 ViewTree 的 State Registry Owner，並在 onCreate 執行 restore。不實作會 crash，我試過了

在 Android Manifest 新增 Service

最後，還要在 AndroidManifest.xml 加入這個 Service，name 的部分換成上個部分完成的 .service.XXXIMEService 。
上面的 <meta-data> 的 resource 需要在 xml folder 建立 menu.xml，貼上以下的 code 就可以用了。
基本上實作完以上的 code，就可以用 Jetpack Compose 寫自己的鍵盤了。我開發鍵盤的這個部分在這個 PR：
Create custom IME service
Updated Jun 18, 2023
 ，有興趣也可以參考一下。

結語

畢竟個人也只是個 Android 的初學者，其實有很多實作的 Class 沒有很深入了解，如果有興趣歡迎一起交流。另外開發鍵盤也有一些細節可以分享，就等後續的文章再見吧XD

© Ricky 2023 - 2024