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

フローティング アクション ボタン(FAB)は、ユーザーが操作できる高強調ボタンです。 メイン アクションを実行するアクションを指します。焦点を絞った単一のアクションを促進する これはユーザーがたどる最も一般的な経路で、 画面の右下に固定されます。

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

  • 新しいアイテムを作成する: メモ作成アプリでは、FAB を使用して 新しいメモを作成します。
  • 新しい連絡先の追加: チャットアプリでは、FAB から 会話にユーザーを追加できます。
  • Center location: 地図インターフェースでは、FAB は地図の中心を ユーザーの現在地を確認できます

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

  • FAB: 通常サイズのフローティング アクション ボタン。
  • 小 FAB: 小さいフローティング アクション ボタン。
  • 大規模な FAB: より大きなフローティング アクション ボタン。
  • 拡張 FAB: アイコン以外の要素を含むフローティング アクション ボタン。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> 4 つのフローティング アクション ボタン コンポーネントの例。
図 1.4 種類のフローティング アクション ボタン

API サーフェス

フローティング アクションの作成に使用できるコンポーザブルはいくつかありますが、 ボタンはマテリアル デザインと一致しており、パラメータに大きな違いはありません。 留意すべき主なパラメータは次のとおりです。

  • onClick: ユーザーがボタンを押したときに呼び出される関数。
  • containerColor: ボタンの色。
  • contentColor: アイコンの色。

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

一般的なフローティング アクション ボタンを作成するには、基本的な FloatingActionButton コンポーザブル。次の例は、 FAB の基本的な実装は次のとおりです。

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}

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

角に丸みがあり、影があり「追加」されている標準のフローティング アクション ボタンアイコンをクリックします。
図 2. フローティング アクション ボタン。

小さいボタン

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

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

「add」を含む SmallFloatingActionButton の実装アイコンをクリックします。
図 3. 小さなフローティング アクション ボタン。

大きいボタン

大きなフローティング アクション ボタンを作成するには、 LargeFloatingActionButton コンポーザブル。このコンポーザブルは、ボタンが大きくなることを除けば、他の例と大きく異なりません。

以下は、大きな FAB の簡単な実装です。

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

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

「add」を含む LargeFloatingActionButton の実装アイコンをクリックします。
図 4. 大きなフローティング アクション ボタン。

拡張ボタン

より複雑なフローティング アクション ボタンを作成するには、 ExtendedFloatingActionButton コンポーザブル。主な違いは FloatingActionButton は専用の icontext がある点です。 あります。より複雑なコンテンツのボタンを作成し、サイズに応じて調整できる コンテンツを適切に適合させることができます

次のスニペットは、icontext にサンプル値を渡して ExtendedFloatingActionButton を実装する方法を示しています。

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

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

「展開されたボタン」というテキストを表示する ExtendedFloatingActionButton の実装編集アイコン
図 5. テキストとアイコンの両方を備えたフローティング アクション ボタン。

参考情報