Unverankerte Aktionsschaltfläche

Eine unverankerte Aktionsschaltfläche (UAS) ist eine hervorgehobene Schaltfläche, mit der Nutzer eine primäre Aktion in einer Anwendung ausführen können. Sie bewirbt eine einzelne, fokussierte Aktion, die der häufigste Weg ist, den ein Nutzer ausführen kann, und ist normalerweise unten rechts auf dem Bildschirm verankert.

Betrachten Sie diese drei Anwendungsfälle, in denen Sie eine UAS verwenden könnten:

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

In Material Design gibt es vier Arten von FAB:

  • FAB: Eine unverankerte Aktionsschaltfläche normaler Größe.
  • Small FAB: Eine kleinere unverankerte Aktionsschaltfläche.
  • Large FAB: Eine größere unverankerte Aktionsschaltfläche.
  • Erweiterte UAS: Eine unverankerte Aktionsschaltfläche, die mehr als nur ein Symbol enthält.
Ein Beispiel für jede der vier unverankerten Aktionsschaltflächenkomponenten.
Abbildung 1. Die vier unverankerten Aktionsschaltflächen.

API-Oberfläche

Es gibt mehrere zusammensetzbare Funktionen, mit denen du unverankerte Aktionsschaltflächen im Einklang mit Material Design erstellen kannst. Ihre Parameter unterscheiden sich jedoch nicht allzu sehr. Zu den wichtigsten Parametern gehören:

  • onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer die Taste drückt.
  • containerColor: Die Farbe der Schaltfläche.
  • contentColor: Die Farbe des Symbols.

Unverankerte Aktionsschaltfläche

Wenn Sie eine allgemeine unverankerte Aktionsschaltfläche erstellen möchten, verwenden Sie die einfache zusammensetzbare Funktion FloatingActionButton. Das folgende Beispiel zeigt eine grundlegende Implementierung einer UAS:

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

Diese Implementierung sieht so aus:

Eine standardmäßige unverankerte Aktionsschaltfläche mit abgerundeten Ecken, einem Schatten und dem Symbol „Hinzufügen“.
Abbildung 2: Eine unverankerte Aktionsschaltfläche

Kleine Schaltfläche

Verwenden Sie die zusammensetzbare Funktion SmallFloatingActionButton, um eine kleine unverankerte Aktionsschaltfläche zu erstellen. Das folgende Beispiel zeigt, wie das geht, indem Sie benutzerdefinierte Farben hinzufügen.

@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

Diese Implementierung sieht so aus:

Eine Implementierung von SmallFloatingActionButton, die ein Symbol zum Hinzufügen enthält.
Abbildung 3: Eine kleine unverankerte Aktionsschaltfläche

Große Schaltfläche

Verwenden Sie die zusammensetzbare Funktion LargeFloatingActionButton, um eine große unverankerte Aktionsschaltfläche zu erstellen. Diese zusammensetzbare Funktion unterscheidet sich nicht wesentlich von den anderen Beispielen, abgesehen davon, dass sie zu einer größeren Schaltfläche führt.

Im Folgenden wird eine einfache Implementierung einer großen UAS beschrieben.

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

Diese Implementierung sieht so aus:

Eine Implementierung von LargeFloatingActionButton, die ein Symbol zum Hinzufügen enthält.
Abbildung 4: Eine große unverankerte Aktionsschaltfläche

Schaltfläche „Erweitert“

Mit der zusammensetzbaren Funktion ExtendedFloatingActionButton können Sie komplexere unverankerte Aktionsschaltflächen erstellen. Der Hauptunterschied zwischen diesem und FloatingActionButton ist, dass es spezielle icon- und text-Parameter gibt. Sie ermöglichen es Ihnen, eine Schaltfläche mit komplexerem Inhalt zu erstellen, die an den Inhalt angepasst wird.

Das folgende Snippet veranschaulicht, wie ExtendedFloatingActionButton implementiert wird. Dabei werden Beispielwerte für icon und text übergeben.

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

Diese Implementierung sieht so aus:

Implementierung von ExtendedFloatingActionButton, die Text mit dem Text „erweiterte Schaltfläche“ und ein Bearbeitungssymbol anzeigt.
Abbildung 5. Eine unverankerte Aktionsschaltfläche mit Text und einem Symbol.

Zusätzliche Ressourcen