Unverankerte Aktionsschaltfläche

Ein unverankerter Aktionsbutton (UAB) ist ein hervorgehobener Button, mit dem der Nutzer eine primäre Aktion in einer Anwendung ausführen kann. Sie fördert eine einzelne, fokussierte Aktion, die den häufigsten Pfad darstellt, den Nutzer einschlagen, und ist in der Regel unten rechts auf dem Bildschirm verankert.

Sehen wir uns drei Anwendungsfälle an, in denen Sie einen FAB verwenden könnten:

  • 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 könnte ein FAB eine Oberfläche öffnen, über die der Nutzer jemanden zu einer Unterhaltung hinzufügen kann.
  • Standort zentrieren: In einer Kartenoberfläche könnte ein FAB die Karte auf den aktuellen Standort des Nutzers zentrieren.

In Material Design gibt es vier Arten von FABs:

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

API-Oberfläche

Es gibt mehrere Composables, mit denen Sie unverankerte Aktionsbuttons erstellen können, die dem Material Design entsprechen. Ihre Parameter unterscheiden sich jedoch nicht wesentlich. Zu den wichtigsten Parametern, die Sie berücksichtigen sollten, gehören:

  • onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer auf die Schaltfläche klickt.
  • containerColor: Die Farbe des Buttons.
  • contentColor: Die Farbe des Symbols.

Unverankerter Aktionsbutton

Verwenden Sie zum Erstellen eines allgemeinen unverankerten Aktionsbuttons (UAB) die einfache FloatingActionButton-komponierbare Funktion. Das folgende Beispiel zeigt eine einfache 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 unverankerter Aktionsbutton mit abgerundeten Ecken, einem Schatten und einem Symbol zum Hinzufügen.
Abbildung 2: Ein unverankerter Aktionsbutton.

Kleiner Button

Verwenden Sie zum Erstellen eines kleinen unverankerten Aktionsbuttons die zusammensetzbare Funktion SmallFloatingActionButton. Im folgenden Beispiel wird gezeigt, wie Sie dies mit benutzerdefinierten Farben tun können.

@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ße Schaltfläche

Verwenden Sie zum Erstellen eines großen unverankerten Aktionsbuttons die zusammensetzbare Funktion LargeFloatingActionButton. Dieses Compose-Element unterscheidet sich nicht wesentlich von den anderen Beispielen, außer dass es zu einer größeren Schaltfläche führt.

Im Folgenden finden 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 der komponierbaren Funktion ExtendedFloatingActionButton können Sie komplexere unverankerte Aktionsbuttons (UAB) erstellen. Der Hauptunterschied zu FloatingActionButton besteht darin, dass es dedizierte icon- und text-Parameter hat. Damit können Sie eine Schaltfläche mit komplexeren Inhalten erstellen, die entsprechend skaliert wird.

Das folgende Snippet zeigt, wie ExtendedFloatingActionButton implementiert wird, 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, die den Text „Erweiterte Schaltfläche“ und ein Bearbeitungssymbol anzeigt.
Abbildung 5. Ein unverankerter Aktionsbutton mit Text und Symbol.

Zusätzliche Ressourcen