Unverankerte Aktionsschaltfläche

Ein unverankerter Aktionsbutton (Floating Action Button, FAB) ist ein Button mit hoher Gewichtung, mit dem der Nutzer eine primäre Aktion in einer Anwendung ausführen kann. Er fördert eine einzelne, fokussierte Aktion, die der häufigste Weg ist, den ein Nutzer einschlagen kann, und befindet sich in der Regel unten rechts auf dem Bildschirm.

Hier sind drei Anwendungsfälle, in denen Sie einen FAB verwenden können:

  • Neues Element erstellen: In einer Notizen-App kann ein FAB verwendet werden, um schnell eine neue Notiz zu erstellen.
  • Neuen Kontakt hinzufügen: In einer Chat-App kann ein FAB eine Oberfläche öffnen, über die der Nutzer einer Unterhaltung eine Person hinzufügen kann.
  • Standort zentrieren: In einer Kartenoberfläche kann ein FAB die Karte auf den aktuellen Standort des Nutzers zentrieren.

In Material Design gibt es vier Arten von FABs:

  • FAB: Ein unverankerter Aktionsbutton in normaler Größe.
  • Kleiner FAB: Ein kleinerer unverankerter Aktionsbutton.
  • Großer FAB: Ein größerer unverankerter Aktionsbutton.
  • Erweiterter FAB: Ein unverankerter Aktionsbutton, der mehr als nur ein Symbol enthält.
Beispiel für jede der vier Komponenten des unverankerten Aktionsbuttons.
Abbildung 1. Die vier Arten von unverankerten Aktionsbuttons.

API-Oberfläche

Es gibt zwar mehrere Composables, mit denen Sie unverankerte Aktionsbuttons erstellen können, die mit Material Design übereinstimmen, aber ihre Parameter unterscheiden sich nicht wesentlich. Zu den wichtigsten Parametern, die Sie beachten sollten, gehören:

  • onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer auf den Button drückt.
  • containerColor: Die Farbe des Buttons.
  • contentColor: Die Farbe des Symbols.

Unverankerter Aktionsbutton

Verwenden Sie das grundlegende FloatingActionButton-Composable, um einen allgemeinen unverankerten Aktionsbutton zu erstellen. Das folgende Beispiel zeigt eine grundlegende Implementierung eines FAB:

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

Diese Implementierung sieht so aus:

Ein standardmäßiger unverankerten Aktionsbutton mit abgerundeten Ecken, einem Schatten und einem „Hinzufügen“-Symbol.
Abbildung 2 Ein unverankerter Aktionsbutton.

Kleiner Button

Verwenden Sie das SmallFloatingActionButton-Composable, um einen kleinen unverankerten Aktionsbutton zu erstellen. Das folgende Beispiel zeigt, wie Sie das tun, und fügt benutzerdefinierte Farben hinzu.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}

Diese Implementierung sieht so aus:

Eine Implementierung von SmallFloatingActionButton, die ein „Hinzufügen“-Symbol enthält.
Abbildung 3 Ein kleiner unverankerter Aktionsbutton.

Großer Button

Verwenden Sie das LargeFloatingActionButton-Composable, um einen großen unverankerten Aktionsbutton zu erstellen. Dieses Composable unterscheidet sich nicht wesentlich von den anderen Beispielen, außer dass es zu einem größeren Button führt.

Im Folgenden sehen Sie eine einfache Implementierung eines großen FAB.

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

Diese Implementierung sieht so aus:

Eine Implementierung von LargeFloatingActionButton, die ein „Hinzufügen“-Symbol enthält.
Abbildung 4 Ein großer unverankerter Aktionsbutton.

Erweiterter Button

Mit dem ExtendedFloatingActionButton-Composable können Sie komplexere unverankerte Aktionsbuttons erstellen. Der Hauptunterschied zwischen diesem und FloatingActionButton besteht darin, dass er dedizierte icon und text Parameter hat. So können Sie einen Button mit komplexeren Inhalten erstellen, der entsprechend skaliert wird.

Das folgende Snippet zeigt, wie Sie ExtendedFloatingActionButton implementieren, wobei Beispielwerte für icon und text übergeben werden.

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

Diese Implementierung sieht so aus:

Eine Implementierung von ExtendedFloatingActionButton, in der der Text „extended button“ und ein Bearbeitungssymbol angezeigt werden.
Abbildung 5 Ein unverankerter Aktionsbutton mit Text und Symbol.

Zusätzliche Ressourcen