フローティング アクション ボタン（FAB）は、ユーザーがアプリでメイン アクションを実行できるようにする、強調度の高いボタンです。ユーザーが最もよく利用するパスである、1 つのフォーカスされたアクションを促進します。通常は画面の右下に固定されています。
FAB を使用する 3 つのユースケースについて考えてみましょう。
- 新しいアイテムを作成する: メモ作成アプリでは、FAB を使用して新しいメモをすばやく作成できます。
- 新しい連絡先を追加: チャットアプリでは、FAB によって、ユーザーが会話に他のユーザーを追加できるインターフェースが開くことができます。
- 現在地を中央に表示: 地図インターフェースでは、FAB によってユーザーの現在地を地図の中央に表示できます。
マテリアル デザインでは、FAB には次の 4 種類があります。
- FAB: 通常サイズのフローティング アクション ボタン。
- 小さい FAB: 小さいフローティング アクション ボタン。
- 大規模な FAB: より大きなフローティング アクション ボタン。
- 拡張 FAB: アイコン以外の要素を含むフローティング アクション ボタン。
API サーフェス
マテリアル デザインに準拠したフローティング アクション ボタンの作成に使用できるコンポーザブルはいくつかありますが、パラメータに大きな違いはありません。主なパラメータは次のとおりです。
onClick: ユーザーがボタンを押したときに呼び出される関数。containerColor: ボタンの色。contentColor: アイコンの色。
フローティング操作ボタン
一般的なフローティング アクション ボタンを作成するには、基本的な FloatingActionButton コンポーザブルを使用します。次の例は、FAB の基本的な実装を示しています。
@Composable
fun Example(onClick: () -> Unit) {
FloatingActionButton(
onClick = { onClick() },
) {
Icon(Icons.Filled.Add, "Floating action button.")
}
}
これを実装すると次のようになります。
小さいボタン
小さなフローティング アクション ボタンを作成するには、SmallFloatingActionButton コンポーザブルを使用します。次の例は、カスタム カラーを追加して、この方法を示すものです。
@Composable
fun SmallExample(onClick: () -> Unit) {
SmallFloatingActionButton(
onClick = { onClick() },
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.secondary
) {
Icon(Icons.Filled.Add, "Small floating action button.")
}
}
これを実装すると次のようになります。
大きなボタン
大きなフローティング アクション ボタンを作成するには、LargeFloatingActionButton コンポーザブルを使用します。このコンポーザブルは、ボタンが大きくなることを除けば、他の例と大きく異なりません。
以下は、大きな FAB の簡単な実装です。
@Composable
fun LargeExample(onClick: () -> Unit) {
LargeFloatingActionButton(
onClick = { onClick() },
shape = CircleShape,
) {
Icon(Icons.Filled.Add, "Large floating action button")
}
}
これを実装すると次のようになります。
拡張ボタン
ExtendedFloatingActionButton コンポーザブルを使用すると、より複雑なフローティング アクション ボタンを作成できます。FloatingActionButton との主な違いは、専用の icon パラメータと text パラメータがあることです。より複雑なコンテンツを含むボタンを作成して、コンテンツに合わせて適切にサイズを変更できます。
次のスニペットは、icon と text にサンプル値を渡して ExtendedFloatingActionButton を実装する方法を示しています。
@Composable
fun ExtendedExample(onClick: () -> Unit) {
ExtendedFloatingActionButton(
onClick = { onClick() },
icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
text = { Text(text = "Extended FAB") },
)
}
これを実装すると次のようになります。
