フローティング操作ボタン

フローティング アクション ボタン（FAB）は、ユーザーがアプリでメインのアクションを実行できるようにする、強調度の高いボタンです。ユーザーが最もよく行う、1 つの重要なアクションを促すもので、通常は画面の右下に固定されています。

FAB を使用する可能性がある次の 3 つのユースケースを考えてみましょう。

• 新しいアイテムを作成する: メモ作成アプリでは、FAB を使用して新しいメモをすばやく作成できます。
• 新しい連絡先を追加する: チャットアプリでは、FAB を使用して、ユーザーが会話に他のユーザーを追加できるインターフェースを開くことができます。
• 位置を中央に表示する: 地図インターフェースでは、FAB を使用してユーザーの現在地を地図の中央に表示できます。

マテリアル デザインには、次の 4 種類の FAB があります。

• 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.")
    }
}
FloatingActionButton.kt

これを実装すると次のようになります。

小さいボタン

小さなフローティング アクション ボタンを作成するには、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.")
    }
}
FloatingActionButton.kt

これを実装すると次のようになります。

大きなボタン

大きなフローティング アクション ボタンを作成するには、LargeFloatingActionButton コンポーズ可能な関数を使用します。このコンポーザブルは、ボタンが大きくなるという点を除けば、他の例と大きく異なるわけではありません。

以下は、大きな FAB のシンプルな実装です。

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

これを実装すると次のようになります。

拡張ボタン

ExtendedFloatingActionButton コンポーザブルを使用すると、より複雑なフローティング アクション ボタンを作成できます。FloatingActionButton との主な違いは、専用の icon パラメータと text パラメータがあることです。これにより、コンテンツに合わせて適切にスケーリングされる、より複雑なコンテンツを含むボタンを作成できます。

次のスニペットは、ExtendedFloatingActionButton の実装方法を示しています。icon と text にはサンプル値が渡されています。

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

これを実装すると次のようになります。

参考情報

• 一般的なボタン
• マテリアル UI のドキュメント