アプリバーは、ユーザーが主要な機能やサービスにアクセスするために ナビゲーションの項目があります。アプリバーには、トップ アプリバーとボトム アプリという 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)
}
}
これを実装すると次のようになります。
中央揃え
中央に配置されるトップ アプリバーは、小さいアプリバーと基本的に同じです。
コンポーネントの中央に配置されます。実装するには、
専用の 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)
}
}
これを実装すると次のようになります。
中
上部に中程度のアプリバーでは、タイトルがその他のアイコンの下に配置されます。作成
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)
}
}
これを実装すると次のようになります。
ボトム アプリバー
ボトム アプリバーを作成するには、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."
)
}
}
これを実装すると次のようになります。
