Unverankerte Aktionsschaltfläche

Eine unverankerte Aktionsschaltfläche (UAS) ist eine Schaltfläche mit hoher Betonung, mit der der Nutzer eine primäre Aktion in einer Anwendung ausführen kann. Sie bewirbt eine einzelne, gezielte Aktion, die der häufigste Weg ist, den ein Nutzer einschlagen kann, und ist in der Regel unten rechts auf dem Bildschirm verankert.

Betrachten Sie diese drei Anwendungsfälle, in denen Sie einen FAB verwenden können:

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

Im Material Design gibt es vier Arten von FAB:

  • FAB: Eine unverankerte Aktionsschaltfläche normaler Größe.
  • Kleine UAS: 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.
Beispiel für jede der vier unverankerten Aktionsschaltflächen-Komponenten
Abbildung 1. Die vier unverankerten Aktionsschaltflächen.

API-Oberfläche

Obwohl es mehrere zusammensetzbare Funktionen gibt, die Sie zum Erstellen von Floating-Aktionsschaltflächen gemäß Material Design verwenden können, unterscheiden sich ihre Parameter nicht wesentlich. Zu den wichtigsten Parametern, die Sie im Hinterkopf behalten sollten, 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

Verwenden Sie zum Erstellen einer allgemeinen unverankerten Aktionsschaltfläche die einfache zusammensetzbare Funktion FloatingActionButton. Das folgende Beispiel zeigt eine grundlegende Implementierung eines FAB:

@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 abgerundeter Ecke, einem Schatten und einem „Hinzufügen“-Symbol.
Abbildung 2: Eine unverankerte Aktionsschaltfläche

Kleine Schaltfläche

Wenn Sie eine kleine unverankerte Aktionsschaltfläche erstellen möchten, verwenden Sie die zusammensetzbare Funktion SmallFloatingActionButton. Das folgende Beispiel zeigt, wie dies mit benutzerdefinierten Farben funktioniert.

@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 "Hinzufügen" enthält.
Abbildung 3: Eine kleine unverankerte Aktionsschaltfläche

Große Schaltfläche

Wenn Sie eine große unverankerte Aktionsschaltfläche erstellen möchten, verwenden Sie die zusammensetzbare Funktion LargeFloatingActionButton. 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 findest du 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")
    }
}
FloatingActionButton.kt

Diese Implementierung sieht so aus:

Eine Implementierung von LargeFloatingActionButton, das 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 besteht darin, dass es die dedizierten Parameter icon und text gibt. Sie können damit eine Schaltfläche mit komplexeren Inhalten erstellen, die automatisch an den Inhalt angepasst wird.

Das folgende Snippet zeigt, 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:

Eine Implementierung von ExtendedFloatingActionButton, die Text mit der Bezeichnung "Erweiterte Schaltfläche" und ein Bearbeitungssymbol anzeigt.
Abbildung 5: Eine unverankerte Aktionsschaltfläche mit Text und Symbol.

Weitere Informationen