0Pricing
Android Academy · レッスン

NavHostを設定する

Composeでナビゲーショングラフを定義します

「NavHostを設定する」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。

画面間の移動

ほとんどのアプリには複数の画面があります。Navigation Compose ライブラリを使うと、バックスタックを維持しながら Composable 画面間を移動できます。

依存関係

ナビゲーションライブラリを Gradle ファイルに追加すると、NavController、NavHost、各種ヘルパーを使えるようになります。

// build.gradle (module)
implementation("androidx.navigation:navigation-compose:2.7.0")

NavController

NavController はナビゲーションを実行し、バックスタックを記憶するオブジェクトです。rememberNavController() で作成します。

val navController = rememberNavController()

NavHost

NavHost は現在の遷移先を表示する Composable です。コントローラーと startDestination ルートが必要です。

NavHost(
    navController = navController,
    startDestination = "home"
) {
    // destinations go here
}

遷移先の定義

NavHost の lambda 内で、各画面を composable("route") で宣言します。この文字列が遷移先のルートです。

composable("home") {
    HomeScreen()
}

ルートは文字列

route は、URL パスのような、遷移先を一意に識別する文字列 ID です。ルートを指定して移動すると、NavHost が一致する Composable を表示します。

2 画面のグラフ

2 つの遷移先を持つ、最小限のナビゲーショングラフです。"home" が最初に表示されるのは、startDestination だからです。

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("details") { DetailsScreen() }
}

startDestination

startDestination はユーザーに最初に表示される画面であり、バックスタックのルートです。アプリはそこより先に戻ることはできません。

コントローラーの受け渡し

ナビゲーションを開始する画面には NavController が必要です。パラメーターとして渡すこともできますが、画面を再利用しやすくするには、onContinue のような単純な lambda を渡す方法がおすすめです。

composable("home") {
    HomeScreen(onOpenDetails = {
        navController.navigate("details")
    })
}

領域ごとに 1 つの NavHost

通常は、アプリの最上位に NavHost を 1 つだけ配置します。コントローラーは rememberNavController() で一度だけ作成し、すべての遷移先で共有します。

まとめ

コントローラー、ホスト、2 つの遷移先を含む完全な構成です。

@Composable
fun App() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") { HomeScreen() }
        composable("details") { DetailsScreen() }
    }
}

クイックチェック

バックスタックを記憶し、ナビゲーションを実行するオブジェクトはどれですか？

まとめ

ナビゲーションの設定：

  • rememberNavController() でコントローラーを作成します。
  • NavHost が遷移先を表示し、startDestination が必要です。
  • composable("route") で画面を宣言します。ルートは一意の文字列です。

よくある質問

「NavHostを設定する」レッスンは無料ですか？

はい。「NavHostを設定する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。

「NavHostを設定する」で何を学びますか？

Composeでナビゲーショングラフを定義します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「NavHostを設定する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAndroid Academyレッスンでコードを書いて実行できますか？

はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. NavHostを設定する
  2. 画面間を移動する
  3. 引数を渡す
  4. ボトムナビゲーション
← Android Academyに戻る