ボトムナビゲーション
タブ付きのボトムナビゲーションを作ります
「ボトムナビゲーション」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
ボトムナビゲーションバー
多くのアプリでは、最上位のセクションをボトムナビゲーションバーに配置します。Composeには、そのためのNavigationBarとNavigationBarItemが用意されています。
NavigationBar
NavigationBarはコンテナで、通常はScaffoldのbottomBarスロットに配置します。複数のNavigationBarItemを格納します。
NavigationBar {
// items go here
}NavigationBarItem
各タブはNavigationBarItemで、icon、省略可能なlabel、selectedフラグ、onClickを指定します。
NavigationBarItem(
selected = true,
onClick = { },
icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
label = { Text("Home") }
)タブをモデル化する
タブをデータとして定義すると、ループで処理できます。ルート、ラベル、アイコンを持つシンプルなデータクラスが適しています。
data class Tab(val route: String, val label: String, val icon: ImageVector)
val tabs = listOf(
Tab("home", "Home", Icons.Default.Home),
Tab("profile", "Profile", Icons.Default.Person)
)現在のルートを追跡する
アクティブなタブを強調表示するには、現在のルートが必要です。コントローラーの現在のバックスタックエントリから読み取ります。
val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route選択状態を設定する
各タブのルートとcurrentRouteを比較してselectedフラグを設定すると、バーで正しい項目が強調表示されます。
NavigationBarItem(
selected = currentRoute == tab.route,
onClick = { navController.navigate(tab.route) },
icon = { Icon(tab.icon, contentDescription = tab.label) },
label = { Text(tab.label) }
)バックスタックの蓄積を避ける
タブを繰り返しタップしても、遷移先が積み重ならないようにします。タブ間を移動するときは、開始遷移先へのpopUpToとlaunchSingleTopを使用します。
navController.navigate(tab.route) {
popUpTo(navController.graph.startDestinationId) { saveState = true }
launchSingleTop = true
restoreState = true
}saveState / restoreState
saveStateとrestoreStateを使うと、タブを切り替えて戻ったときに各タブのスクロール位置と状態が保持されます。これはボトムタブに期待される動作です。
Scaffoldに組み込む
すべてをScaffoldで囲みます。バーをbottomBarに配置し、NavHostをコンテンツ領域に配置します。渡されたパディングを使用して、コンテンツがバーの背後に隠れないようにしてください。
Scaffold(
bottomBar = { BottomBar(navController) }
) { padding ->
NavHost(
navController,
startDestination = "home",
modifier = Modifier.padding(padding)
) { /* destinations */ }
}項目をループ処理する
タブのリストを反復処理してバーを作成すると、コードを短く一貫したものに保てます。
NavigationBar {
tabs.forEach { tab ->
NavigationBarItem(
selected = currentRoute == tab.route,
onClick = { navController.navigate(tab.route) },
icon = { Icon(tab.icon, contentDescription = tab.label) },
label = { Text(tab.label) }
)
}
}全体を組み合わせる
コントローラーに接続した完全なボトムバーで、アクティブなタブを強調表示します。
@Composable
fun BottomBar(navController: NavController) {
val entry by navController.currentBackStackEntryAsState()
val current = entry?.destination?.route
NavigationBar {
tabs.forEach { tab ->
NavigationBarItem(
selected = current == tab.route,
onClick = { navController.navigate(tab.route) },
icon = { Icon(tab.icon, contentDescription = tab.label) },
label = { Text(tab.label) }
)
}
}
}理解度チェック
どのNavigationBarItemをselectedに設定するか、どのように判断しますか。
まとめ
ボトムナビゲーション:
NavigationBarにNavigationBarItemを格納します。currentBackStackEntryAsState()でアクティブなタブを追跡し、selectedを設定します。- タブを適切に切り替えるには、
popUpTo+launchSingleTop+saveState/restoreStateを使用します。 ScaffoldのbottomBarに配置します。
よくある質問
「ボトムナビゲーション」レッスンは無料ですか？
はい。「ボトムナビゲーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「ボトムナビゲーション」で何を学びますか？
タブ付きのボトムナビゲーションを作ります ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ボトムナビゲーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- NavHostを設定する
- 画面間を移動する
- 引数を渡す
- ボトムナビゲーション