アプリバーは、ユーザーが主要な機能やサービスにアクセスするために ナビゲーションの項目があります。アプリバーには、トップ アプリバーとボトム アプリという 2 種類があります。 表示されます。それぞれの外観と目的は次のとおりです。
タイプ |
デザイン |
目的 |
---|---|---|
トップ アプリバー |
画面上部 |
主要なタスクと情報へのアクセスを提供します。通常、タイトル、コア アクション アイテム、特定のナビゲーション アイテムをホストします。 |
ボトム アプリバー |
画面の下部 |
通常、主要なナビゲーション項目が含まれます。組み込みのフローティング アクション ボタンなど、その他の主要なアクションへのアクセスを提供することもできます。 |
トップ アプリバーとボトム アプリバーを実装するには、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) } }
これを実装すると次のようになります。
![小さなトップ アプリバーの例。](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-small.png?authuser=6&hl=ja)
中央揃え
中央に配置されるトップ アプリバーは、小さいアプリバーと基本的に同じです。
コンポーネントの中央に配置されます。実装するには、
専用の 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) } }
これを実装すると次のようになります。
![ここに代替テキストを入力](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-centered.png?authuser=6&hl=ja)
中
上部に中程度のアプリバーでは、タイトルがその他のアイコンの下に配置されます。作成
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) } }
この実装は次のように表示され、スクロール方法のデモンストレーションが表示されます。
enterAlwaysScrollBehavior()
からの動作が次のように表示されます。
大
大きなトップ アプリバーは 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) } }
これを実装すると次のようになります。
![左側にアクション アイコン、右側にフローティング アクション ボタンがあるボトム アプリバーがあるアプリの画面。](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-large.png?authuser=6&hl=ja)
ボトム アプリバー
ボトム アプリバーを作成するには、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." ) } }
これを実装すると次のようになります。
![左側にアクション アイコン、右側にフローティング アクション ボタンがあるボトム アプリバーがあるアプリの画面。](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-bottom.png?authuser=6&hl=ja)