サンプルアプリでJetpack Compose Navigationの実装を学ぶ #Android

以下の文言は、AI (ChatGPT4) による出力結果です。そのため内容が一部不正確である可能性があります。

この記事では、dignicate/zero-2023-android というサンプルアプリを題材に、以下の内容を解説します。

アプリの内容を簡潔に説明
Compose Navigation による画面遷移
独自拡張
- ComposeNavigator
- ComposeScreen

アプリの内容

サンプルアプリは、ユーザーがアイテムを選択し、その詳細を表示するシンプルなアプリです。アプリは以下の2つの画面で構成されています。

アイテム一覧画面
アイテム詳細画面

ユーザーがアイテム一覧画面でアイテムをタップすると、アイテム詳細画面に遷移します。

Compose Navigation による画面遷移

このサンプルアプリでは、Jetpack ComposeとCompose Navigationを使って画面遷移を実装しています。NavHostを使って画面遷移のルートを定義しています。

@Composable
fun AppNavigator() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = ComposeScreen.ListScreen.route) {
        composable(ComposeScreen.ListScreen.route) {
            ItemListScreen(navController)
        }
        composable(ComposeScreen.DetailScreen.route) { backStackEntry ->
            val itemId = backStackEntry.arguments?.getString("itemId") ?: ""
            ItemDetailScreen(navController, itemId)
        }
    }
}

(ソースコード: MainActivity.kt, Line 25-37)

ItemListScreenとItemDetailScreenは、それぞれアイテム一覧画面とアイテム詳細画面を表しています。遷移先としてComposeScreenを使っています。

独自拡張

このサンプルアプリでは、独自の拡張を使って画面遷移を実現しています。この拡張は How to Trigger Navigation in Jetpack Compose Outside of Composables を参考にしています。

ComposeNavigator
ComposeNavigatorは、画面遷移をトリガーする機能を提供します。ComposeNavigatorを使って、画面遷移を起こすイベントをNavHostに伝えることができます。

object ComposeNavigator {
    private val _navigationEvent = MutableSharedFlow<ComposeScreen>()
    val navigationEvent = _navigationEvent.asSharedFlow()

    fun navigateTo(screen: ComposeScreen) {
        _navigationEvent.tryEmit(screen)
    }
}

(ソースコード: ComposeNavigator.kt, Line 8-16)

ComposeScreen

ComposeScreenは、画面遷移に必要な情報を保持するデータクラスです。遷移先の画面とそのルートを定義しています。

sealed class ComposeScreen(val route: String) {
    object ListScreen : ComposeScreen("listScreen")
    object DetailScreen : ComposeScreen("detailScreen/{itemId}") {
        fun createRoute(itemId: String) = "detailScreen/$itemId"
    }
}

(ソースコード: ComposeScreen.kt, Line 5-10)

画面遷移の際には、ComposeNavigator.navigateTo() を使って ComposeScreen を引数に渡します。例えば、アイテム一覧画面からアイテム詳細画面に遷移する場合、次のように記述します。

Button(onClick = {
    ComposeNavigator.navigateTo(ComposeScreen.DetailScreen.createRoute(item.id))
}) {
    Text("詳細")
}

(ソースコード: ItemListScreen.kt, Line 26-30)

このように、独自拡張を使用することで、Jetpack Compose Navigation を柔軟に扱うことができます。今回のサンプルアプリを通して、Compose Navigation の基本的な使い方と独自拡張の活用方法を学ぶことができました。