フローティング アクション ボタン（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") },
)
}
これを実装すると次のようになります。
