🔥

10分で完成!初めてのCompose Multiplatform〜まずはモバイルから〜

2023/07/13に公開1

こちらのイベントでお話しした内容を記事化したものです。
https://yumemi.connpass.com/event/288628/

発表資料はこちらを参照ください
https://www.canva.com/design/DAFn0Fb03W0/tFnw0hi03i-s44HGc2WGyQ/edit?utm_content=DAFn0Fb03W0&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

プロジェクト作成

https://terrakok.github.io/Compose-Multiplatform-Wizard/

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シリーズがおすすめ!

https://moko.icerock.dev/

  • 権限取得
  • ギャラリー&イメージ(動画)Viewer
  • androidx.lifecycle.ViewModelの代替品
  • Paging3と繋げられるページングライブラリ

など色々あります。

Android開発者がKMMでAPI通信処理を書くならKtorfitがおすすめ!

https://github.com/Foso/Ktorfit
Retrofitっぽく書けるので立ち上がり工数が落とせるはずです。

サンプルコード

https://github.com/sobaya-0141/Sample202307

株式会社ゆめみ

Discussion

ジニアジニア

実際に使用する時にはKoin対応が進んでいないか確認してください

もう対応されてますね〜
しかもdesktopも