10分で完成!初めてのCompose Multiplatform〜まずはモバイルから〜
こちらのイベントでお話しした内容を記事化したものです。
発表資料はこちらを参照ください
プロジェクト作成
Compose Multiplatform Wizardを使います。
Project nameとProject IDを入力し、対象としたいプラットフォームと初期導入したいライブラリを選択してDOWNLOADボタンを押すだけでプロジェクトファイルがzip形式でダウンロードできます。
この時点で今回対象としたAndroid&iOSの両方で動くComposeで作成されたアプリが動作する状態で手に入ります。
フルComposeでアプリを作る時のこと
ナビゲーションについて
WizardでVoyagerと言うライブラリにチェックを入れることでNavigationに使用するライブラリが導入できます。
画面の作成
Voyagerを使用する場合は画面を作る時にScreenクラスを継承して作らなければなりません
その他は大きな制約はありません
ScreenModelの作成
androidx.lifecycle.ViewModelと同等の物と考えてください
viewModelScopeと同等のcoroutineScopeを提供したりしています。
画面遷移
val navigator = LocalNavigator.currentOrThrow
でnavigatorを取得し
navigator.push(SubScreen())
で指定の画面へ遷移します。
細かい機能についてはライブラリの公式ページを見てください
DI
DIはKoinを使用します。
Wizardでチェックを入れて導入しておいてください
要点を抜粋して記載しますが、不明点などあれば公式を見ながら導入してみてください
DIするクラスを用意
モジュール定義(commonMain)
Android(Android App)
iOS(iOSMain) 1/2
iOSのアプリから直接Koinの処理を呼べないためiOSMain配下にstartKoin
を呼ぶためのKotlinファイルを配置します。
iOS(iOS App) 2/2
initでstartKoinを呼ぶための関数をキックします。
ScreenModelへのInject
VoyagerのKoin対応が調査時点ではAndroidのみに対応だったので、KoinComponentを使用しています。
実際に使用する時にはKoin対応が進んでいないか確認してください
KMMで困ったらmokoシリーズがおすすめ!
- 権限取得
- ギャラリー&イメージ(動画)Viewer
- androidx.lifecycle.ViewModelの代替品
- Paging3と繋げられるページングライブラリ
など色々あります。
Android開発者がKMMでAPI通信処理を書くならKtorfitがおすすめ!
Retrofitっぽく書けるので立ち上がり工数が落とせるはずです。
サンプルコード
Discussion
もう対応されてますね〜
しかもdesktopも