タブ

タブを使用すると、関連するコンテンツのグループを整理できます。タブには次の 2 種類があります。

• プライマリ タブ: 上部アプリバーの下のコンテンツ ペインの上部に配置されます。メイン コンテンツの宛先を表示し、タブのセットが 1 つだけ必要な場合に使用します。
• セカンダリ タブ: コンテンツ エリア内で、関連するコンテンツをさらに分離し、階層を確立するために使用されます。画面に複数のレベルのタブが必要な場合に必要です。

このページでは、関連する画面と基本的なナビゲーションを使用して、アプリにメインタブを表示する方法について説明します。

API サーフェス

Tab、PrimaryTabRow、SecondaryTabRow のコンポーザブルを使用してタブを実装します。Tab コンポーザブルは行内の個々のタブを表し、通常は PrimaryTabRow（メイン インジケーター タブの場合）または SecondaryTabRow（セカンダリ インジケーター タブの場合）内で使用されます。

Tab には、次の主要なパラメータが含まれています。

• selected: 現在のタブを視覚的にハイライト表示するかどうかを決定します。
• onClick(): ユーザーがタブをクリックしたときに実行されるアクションを定義する必須のラムダ関数。通常、ここでナビゲーション イベントを処理し、選択したタブの状態を更新するか、対応するコンテンツを読み込みます。
• text: タブ内にテキストを表示します。省略可能。
• icon: タブ内にアイコンを表示します。省略可能。
• enabled: タブが有効で、操作可能かどうかを制御します。false に設定すると、タブは無効な状態で表示され、クリックに応答しません。

例: タブベースのナビゲーション

次のスニペットは、アプリ内の異なる画面間を移動するためのタブ付きのトップ ナビゲーション バーを実装しています。

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

要点

• PrimaryTabRow は、タブの水平行を表示します。各タブは Destination に対応しています。
• val navController = rememberNavController() は、NavHost 内のナビゲーションを管理する NavHostController のインスタンスを作成して記憶します。
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } は、選択したタブの状態を管理します。
  • startDestination.ordinal は、Destination.SONGS 列挙型エントリの数値インデックス（位置）を取得します。
• タブをクリックすると、onClick ラムダが navController.navigate(route = destination.route) を呼び出して、対応する画面に移動します。
• Tab の onClick ラムダは、クリックされたタブを視覚的にハイライト表示するために selectedDestination 状態を更新します。
• AppNavHost コンポーザブルを呼び出し、navController と startDestination を渡して、選択した画面の実際のコンテンツを表示します。

結果

次の画像は、前のスニペットの結果を示しています。

参考情報

• Material 3 - タブ
• Compose を使用したナビゲーション