Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[DroidKaigi 2024] Android ViewからJetpack Compose...

syarihu
September 12, 2024

[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration

DroidKaigi 2024で発表した「Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜」の発表資料です
https://2024.droidkaigi.jp/timetable/689254/

syarihu

September 12, 2024
Tweet

More Decks by syarihu

Other Decks in Programming

Transcript

  1. Agenda 2 Jetpack ComposeとAndroid View Composeの簡単な説明とAndroid Viewとの違いについて Jetpack Composeの導入とルール決め 命名規則や状態の持ち方などのルール決め、画面までプレビューす

    るための設計など 実例を元にしたJetpack Composeへの移行 オンボーディング画面を例にしてレイアウトの確認から実際の動作 に近いプレビューの作成まで具体的に解説 01 02 03
  2. • Kotlin Compose Compiler Gradle プラグイン ◦ Kotlin 2.0以上で使える ◦

    Kotlin 2.0未満の場合はJetpack Compose Compilier を使う Jetpack Composeの導入 24 https://developer.android.com/develop/ui/compose/compiler
  3. Composableファイルの命名規則 • 次のようなComposable関数を作るとき ◦ HomeAppBar ◦ HomeBookCard ◦ HomeBookList •

    Composableファイル名をどうするか? ◦ suffixにComposableをつける ◦ Composable関数名と同じにする 72
  4. Composable関数の命名規則 • アプリ内共通で使う関数 ◦ アプリ名 + 関数名 ◦ ex. MikanTopAppBar

    • ある画面や機能で使う関数名 ◦ 画面名 + 関数名 ◦ ex. HomeTopAppBar 76
  5. 状態クラスの命名規則 • 画面全体の状態 ◦ 画面名 + UiState ◦ ex. MainScreen

    → MainUiState • 特定のComposable内で利用する状態 ◦ Composable名 + State ◦ ex. MainListItem → MainListItemState 79
  6. ScrollToBottomButton MainScreen MainList MainButtons LazyColumn ScrollToTopButton LazyListState LazyListState LazyListState LazyListState

    lazyListState.scrollToItem(list.lastIndex) lazyListState.scrollToItem(0) UIの状態を他の Composableとも共有する場合 91 https://developer.android.com/develop/ui/compose/state-hoisting?hl=ja#hoisting-composables
  7. Composable関数の粒度 MainList() { MainListItem() MainListItem() … } MainBottomAppBar { BottomAppBarItem()

    BottomAppBarItem() BottomAppBarItem() } MainTopAppBar() 120 ※関数の分け方のイメージです
  8. 123

  9. 124

  10. Composable関数の引数 / コールバック関数 • 画面に機能が多ければ多いほどコールバック関数の引数 が増えるのでは...? ◦ それはそう • sealed

    interfaceにイベントをまとめて、一つのコールバッ ク関数で複数のイベントに対応するようなアプローチもある 128
  11. Navigation with Compose 1. 一旦Jetpack NavigationをNavigation with Compose に移行 ◦

    fragment-composeにあるAndroidFragment<T> でFragmentをそのままComposable関数内で呼び 出す 157
  12. 移行に必要なタスクを洗い出す / UI実装 • AppBarとプログレス • メッセージとアイコン • ニックネーム入力 •

    ジャンル選択 • 目標、実力選択 • 1日の学習単語数選択 • リマインダー設定 • フリートライアル開始 • オンボーディング画面 ◦ UiState実装 180
  13. 移行に必要なタスクを洗い出す / UI実装 • AppBarとプログレス • メッセージとアイコン • ニックネーム入力 •

    ジャンル選択 • 目標、実力選択 • 1日の学習単語数選択 • リマインダー設定 • フリートライアル開始 • オンボーディング画面 ◦ UiState実装 181
  14. 移行に必要なタスクを洗い出す / UI実装 • AppBarとプログレス • メッセージとアイコン • ニックネーム入力 •

    ジャンル選択 • 目標、実力選択 • 1日の学習単語数選択 • リマインダー設定 • フリートライアル開始 • オンボーディング画面 ◦ UiState実装 182
  15. UIを実装する • AppBarとプログレス • メッセージとアイコン • ニックネーム入力 • ジャンル選択 •

    目標、実力選択 • 1日の学習単語数選択 • リマインダー設定 • フリートライアル開始 • オンボーディング画面 ◦ UiState実装 185