アプリバーは、ユーザーが主要な機能やナビゲーション アイテムにアクセスできるようにするコンテナです。アプリバーには、トップ アプリバーとボトム アプリバーの 2 種類があります。それぞれの外観と目的は次のとおりです。
タイプ |
デザイン |
目的 |
|---|---|---|
トップ アプリバー |
画面上部に表示されます。 |
重要なタスクと情報にアクセスできます。通常、タイトル、コア アクション アイテム、特定のナビゲーション アイテムをホストします。 |
ボトム アプリバー |
画面の下部に表示されます。 |
通常、コア ナビゲーション アイテムが含まれます。含まれるフローティング アクション ボタンなど、他の主要なアクションにもアクセスできるようにすることもできます。 |
トップ アプリバーとボトム アプリバーを実装するには、それぞれ TopAppBar コンポーザブルと BottomAppBar コンポーザブルを使用します。ナビゲーションとアクション コントロールをカプセル化し、マテリアル デザインの原則に沿った一貫性のあるインターフェースを作成できます。
トップ アプリバー
次の表に、4 種類のトップ アプリバーの概要を示します。
タイプ |
例 |
|---|---|
小: ナビゲーションやアクションをあまり必要としない画面に使用します。 |
|
中央揃え: プライマリ アクションが 1 つの画面に使用する場合。 |
|
中程度: ナビゲーションとアクションが中程度に必要な画面。 |
|
大: 多くのナビゲーションとアクションが必要な画面に使用します。 |
|
API サーフェス
4 種類の異なるトップアプリバーを実装できるさまざまなコンポーザブルは、非常に類似しています。これらの関数は、次の重要なパラメータを共有しています。
title: アプリバー全体に表示されるテキスト。navigationIcon: ナビゲーションのメインアイコン。アプリバーの左側に表示されます。actions: ユーザーが主要なアクションにアクセスできるようにするアイコン。アプリバーの右側に表示されます。scrollBehavior: トップ アプリバーがスキャフォールドの内部コンテンツのスクロールにどのように応答するかを決定します。colors: アプリバーの表示方法を決定します。
スクロールの動作
ユーザーが特定のスキャフォールドの内部コンテンツをスクロールしたときに、アプリバーがどのように応答するかを制御できます。これを行うには、TopAppBarScrollBehavior のインスタンスを作成し、トップ アプリバーの scrollBehavior パラメータに渡します。
TopAppBarScrollBehavior には次の 3 種類があります。以下のとおりです:
enterAlwaysScrollBehavior: ユーザーがスキャフォールドの内部コンテンツを上に引っ張ると、トップ アプリバーが閉じます。ユーザーが内部コンテンツを下に引っ張ると、アプリバーが展開されます。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() のスクロール動作がどのように表示されるかを示しています。
大
大きなトップ アプリバーは中程度のアプリバーに似ていますが、タイトルとアイコンの間のパディングが大きく、画面全体で占有するスペースも大きくなります。作成するには、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 コンポーザブルを使用します。このコンポーザブルの使用方法は、このページの前のセクションで説明したトップ アプリバーのコンポーザブルと非常によく似ています。次のキーパラメータにコンポーザブルを渡します。
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."
)
}
}
これを実装すると次のようになります。
