アプリバー

アプリバーは、ユーザーが主要な機能やナビゲーションアイテムにアクセスできるようにするコンテナです。アプリバーには、トップアプリバーとボトムアプリバーの 2 種類があります。それぞれのデザインと目的は次のとおりです。

タイプ	デザイン	目的
トップアプリバー	画面の上部全体に表示されます。	主要なタスクや情報にアクセスできます。通常、タイトル、主要なアクションアイテム、特定のナビゲーションアイテムが表示されます。
ボトムアプリバー	画面の下部全体に表示されます。	通常、主要なナビゲーションアイテムが表示されます。フローティングアクションボタンなど、他の主要なアクションにアクセスできる場合もあります。

トップアプリバーとボトムアプリバーを実装するには、それぞれ TopAppBar と BottomAppBar コンポーザブルを使用します。これらのコンポーザブルを使用すると、ナビゲーションコントロールとアクションコントロールをカプセル化し、マテリアルデザインの原則に沿った一貫性のあるインターフェースを作成できます。

トップアプリバー

次の表に、4 種類のトップアプリバーの概要を示します。

タイプ	例
小: ナビゲーションやアクションをあまり必要としない画面向け。
中央揃え: 1 つのプライマリアクションがある画面向け。
中: ナビゲーションとアクションを適度に必要とする画面向け。
大: ナビゲーションとアクションを多く必要とする画面向け。

API サーフェス

4 種類のトップアプリバーを実装できるさまざまなコンポーザブルは、非常によく似ています。これらのコンポーザブルは、いくつかの重要なパラメータを共有しています。

title: アプリバー全体に表示されるテキスト。
navigationIcon: ナビゲーションのプライマリアイコン。アプリバーの左側に表示されます。
actions: ユーザーが主要なアクションにアクセスできるアイコン。アプリバーの右側に表示されます。
scrollBehavior: Scaffold の内部コンテンツのスクロールに対するトップアプリバーの反応を決定します。
colors: アプリバーの表示方法を決定します。

スクロール動作

ユーザーが指定された Scaffold の内部コンテンツをスクロールしたときに、アプリバーがどのように反応するかを制御できます。これを行うには、 TopAppBarScrollBehavior のインスタンスを作成し、 scrollBehavior パラメータのトップアプリバーに渡します。

TopAppBarScrollBehavior には 3 種類あります。以下のとおりです。

enterAlwaysScrollBehavior: ユーザーが Scaffold の内部コンテンツを引き上げると、トップアプリバーが折りたたまれます。ユーザーが内部コンテンツを引き下げ始めると、アプリバーが展開されます。
exitUntilCollapsedScrollBehavior: enterAlwaysScrollBehavior と似ていますが、アプリバーはユーザーがコンテンツを完全に引き下げた場合にのみ展開されます。
pinnedScrollBehavior: アプリバーは元の位置に残り、スクロールに反応しません。

次の例では、これらのオプションのいくつかを実装しています。

例

以降のセクションでは、4 種類のトップアプリバーの実装について説明します。スクロール動作を制御する方法のさまざまな例も示します。

小

小さいトップアプリバーを作成するには、TopAppBar コンポーザブルを使用します。次の例では、タイトルのみを含む基本的なトップアプリバーを実装しています。

次の例では、TopAppBar に scrollBehavior の値を渡していないため、内部コンテンツのスクロールに反応しません。

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}AppBar.kt

これを実装すると次のようになります。

中央揃え

中央揃えのトップアプリバーは、タイトルがコンポーネントの中央に配置されている点を除き、小さいアプリバーと基本的に同じです。これを実装するには、専用の CenterAlignedTopAppBar コンポーザブルを使用します。

この例では、enterAlwaysScrollBehavior() を使用して、scrollBehavior に渡す値を取得しています。そのため、ユーザーが Scaffold の内部コンテンツをスクロールすると、バーが折りたたまれます。

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}AppBar.kt

これを実装すると次のようになります。

中央揃えのトップアプリバーの例。 — **図 3.**中央揃えのトップアプリバー。

メディア

中程度のトップアプリバーでは、追加のアイコンの下にタイトルが配置されます。作成するには、 1 つの MediumTopAppBar コンポーザブルを使用します。

前のスニペットと同様に、この例では enterAlwaysScrollBehavior() を使用して、scrollBehavior に渡す値を取得しています。

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}AppBar.kt

これを実装すると次のようになります。enterAlwaysScrollBehavior() のスクロール動作の表示方法を示します。

図 4. ユーザーが上にスクロールすると折りたたまれ、下にスクロールすると展開される中程度のトップアプリバー。

大

大きいトップアプリバーは中程度のアプリバーと似ていますが、タイトルとアイコンの間のパディングが大きく、画面全体でより多くのスペースを占有します。作成するには、 LargeTopAppBar コンポーザブルを使用します。

前のスニペットとは異なり、この例では exitUntilCollapsedScrollBehavior() を使用して、scrollBehavior に渡す値を取得しています。そのため、ユーザーが Scaffold の内部コンテンツをスクロールするとバーが折りたたまれますが、ユーザーが内部コンテンツの末尾までスクロールすると展開されます。

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}AppBar.kt

これを実装すると次のようになります。

アプリの画面。下部のアプリバーの左側にアクションアイコンが配置され、右側にフローティングアクションボタンが配置されている。 — **図 5.**大きいトップアプリバーの実装例。

ボトムアプリバー

ボトムアプリバーを作成するには、BottomAppBar コンポーザブルを使用します。このコンポーザブルの使用方法は、このページの前のセクションで説明したトップアプリバーのコンポーザブルとよく似ています。次の主要なパラメータにコンポーザブルを渡します。

actions: バーの左側に表示される一連のアイコン。通常、特定の画面の主要なアクションまたはナビゲーションアイテムです。
floatingActionButton: バーの右側に表示されるフローティングアクションボタン。

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}AppBar.kt

これを実装すると次のようになります。

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

トップ アプリバー

API サーフェス

スクロール動作

例

小

中央揃え

メディア

大

ボトム アプリバー

参考情報

アプリバー

トップアプリバー

ボトムアプリバー