このページは Cloud Translation API によって翻訳されました。

アプリバー

アプリバーは、ユーザーが主要な機能やサービスにアクセスするためにナビゲーションの項目があります。アプリバーには、トップアプリバーとボトムアプリという 2 種類があります。表示されます。それぞれの外観と目的は次のとおりです。

タイプ	デザイン	目的
トップアプリバー	画面上部	主要なタスクと情報へのアクセスを提供します。通常、タイトル、コアアクションアイテム、特定のナビゲーションアイテムをホストします。
ボトムアプリバー	画面の下部	通常、主要なナビゲーション項目が含まれます。組み込みのフローティングアクションボタンなど、その他の主要なアクションへのアクセスを提供することもできます。

上部と下部のアプリバーの例。 — **図 1.** トップアプリバー（左）とボトムアプリバー（右）

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

トップアプリバー

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

タイプ	例
小: 多くのナビゲーションやアクションを必要としない画面向け。
中央揃え: メインの操作が 1 つ含まれる画面の場合。
中: 適度なナビゲーションとアクションが必要な画面に適しています。
大: 多数のナビゲーションとアクションが必要な画面に適しています。

API サーフェス

4 つの異なるトップアプリを実装できるさまざまなコンポーザブル非常に似ています。共通する重要なパラメータは次のとおりです。

title: アプリバー全体に表示されるテキスト。
navigationIcon: ナビゲーションのメインアイコン。表示場所。
actions: ユーザーに主要なアクションへのアクセスを提供するアイコン。出現をクリックします。
scrollBehavior: トップアプリバーがアプリのスクロールにどう反応するかを決定します渡します。
colors: アプリバーの表示方法を指定します。

スクロール動作

ユーザーが特定のページをスクロールしたときのアプリバーの反応を制御できます。スキャフォールドの内部コンテンツを作成しますそのためには、インスタンスを作成して TopAppBarScrollBehavior をクリックし、それをアプリのトップアプリバーに渡します。 scrollBehavior パラメータ。

TopAppBarScrollBehavior には 3 つのタイプがあります。以下のとおりです:

enterAlwaysScrollBehavior: ユーザーがスキャフォールドの内側を持ち上げたとき上部のアプリバーが閉じます。ユーザーが次に進むとアプリバーが展開され、 pull されます。
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）そのため、ユーザーがスキャフォールドの内部コンテンツを作成します

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    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.** トップアプリバーが中央に配置されます。

中

上部に中程度のアプリバーでは、タイトルがその他のアイコンの下に配置されます。作成 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() からの動作が次のように表示されます。

</ph>

をご覧ください。

図 4.トップアプリバーが中央に配置されます。

大

大きなトップアプリバーは Medium に似ていますが、タイトルとアイコンが大きくなります。また、画面全体で多くのスペースを占めます。宛先 LargeTopAppBar コンポーザブルを使用します。

前のスニペットとは異なり、この例では exitUntilCollapsedScrollBehavior() が渡される値を取得する scrollBehavior。そのため、ユーザーがしますが、ユーザーが最後までスクロールすると展開されます。作成します。

@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

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

ボトムアプリバー

ボトムアプリバーを作成するには、BottomAppBar コンポーザブルを使用します。こちらのコンポーザブルは、このモジュールで説明したトップアプリバーのコンポーザブルとよく似ています。ご覧ください。次のキーのコンポーザブルを渡します。 parameters:

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 サーフェス

スクロール動作

例

小

中央揃え

中

大

ボトム アプリバー

参考情報

トップアプリバー

ボトムアプリバー