Jetpack Compose Academy · レッスン

複数タブのNavigationBar

下部で最上位のセクションを切り替えます。

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

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Meet NavigationBar

Material 3 gives you NavigationBar, a bar pinned to the bottom that lets people jump between the top-level sections of your app. 📱

When to Use It

Reach for a NavigationBar when your app has three to five equally important destinations, like Home, Search, and Profile.

It Lives in the Scaffold

You usually drop the bar into a Scaffold bottomBar slot, so it stays fixed while the screen content scrolls above it.

Scaffold(
  bottomBar = { NavigationBar { /* items */ } }
) { padding -> Content(padding) }

Each Tab Is an Item

Inside the bar you add one NavigationBarItem per destination. Each item is a clickable tab with its own icon and label.

NavigationBar {
  NavigationBarItem(/* ... */)
  NavigationBarItem(/* ... */)
}

The selected Flag

Every item needs a selected boolean. Exactly one item should be true at a time so the bar shows where the user is.

NavigationBarItem(
  selected = current == "home",
  onClick = { go("home") }
)

Handle the Tap

The onClick lambda runs when the tab is pressed. This is where you tell your navigation to switch to that section.

Give It an Icon

The icon slot takes a Composable, usually an Icon from the Material set, so each tab is instantly recognizable.

icon = { Icon(Icons.Default.Home, contentDescription = "Home") }

Add a Label

The label slot shows short text under the icon. Keep it to one clear word so it fits and reads fast.

label = { Text("Home") }

A Model for Tabs

It helps to keep your tabs in a simple data class list, so the bar can loop over them instead of hard-coding each item.

data class Tab(val route: String, val icon: ImageVector, val label: String)

Loop to Build the Bar

With a tab list you can forEach over it and emit one NavigationBarItem per entry, keeping the bar tidy and easy to extend.

tabs.forEach { tab ->
  NavigationBarItem(/* uses tab fields */)
}

Pair It with Content

The bar only switches the active section. You still pair it with a NavHost or a when block that actually swaps the screen content.

Quick Check

You added three tabs to your NavigationBar. Quick check on the basics.

Recap

You met NavigationBar: drop it in the Scaffold, add a NavigationBarItem per section with an icon, label, selected flag, and onClick. Nice work! 🎉

よくある質問

「複数タブのNavigationBar」レッスンは無料ですか？

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

「複数タブのNavigationBar」で何を学びますか？

下部で最上位のセクションを切り替えます。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「複数タブのNavigationBar」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る