タブ

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

タブを使用すると、関連するコンテンツのグループを整理できます。タブには次の 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() は NavHostController のインスタンスを作成して記憶します。これは、NavHost 内のナビゲーションを管理します。
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } は、現在選択されているタブの状態を管理します。
  • startDestination.ordinal は、Destination.SONGS 列挙型エントリの数値インデックス（位置）を取得します。
• タブをクリックすると、navController.navigate(route = destination.route) が呼び出され、対応する画面に移動します。
• Tab の onClick ラムダは、クリックされたタブを視覚的にハイライト表示するように selectedDestination 状態を更新します。
• AppNavHost コンポーザブルを呼び出し、navController と startDestination を渡して、選択した画面の実際のコンテンツを表示します。

結果

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

参考情報

• マテリアル 3 - タブ
• Compose を使用したナビゲーション