タブ

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

  • プライマリ タブ: コンテンツ ペインの上部、上部アプリバーの下に配置されます。メイン コンテンツの移動先を表示します。1 つのタブセットのみが必要な場合に使用します。
  • セカンダリ タブ: コンテンツ領域内で、関連するコンテンツをさらに分割して階層を確立するために使用されます。画面に複数のレベルのタブが必要な場合に使用します。
3 つのメインタブ（[フライト]、[旅行]、[周辺のスポット]）が、関連するアイコンとともに表示されます。2 つのセカンダリ タブ（[概要]、[仕様]）が、関連するアイコンなしで表示されています。
図 1. プライマリ タブ（1）とセカンダリ タブ（2）。

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

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)
    }
}

要点

  • 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 を渡して、選択した画面の実際のコンテンツを表示します。

結果

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

アプリ画面の上部に 3 つのタブが横に並んでいます。タブは [曲]、[アルバム]、[プレイリスト] で、[曲] タブが選択され、下線が引かれています。
図 2. [曲]、[アルバム]、[プレイリスト] の 3 つのタブが横に並んでいます。

参考情報