Unverankerte Aktionsschaltfläche

Ein unverankerter Aktionsbutton (UAB) ist ein Button mit hoher Gewichtung, über den Nutzer eine primäre Aktion in einer App ausführen können. Sie fördert eine einzelne, fokussierte Aktion, die der häufigste Weg ist, den ein Nutzer einschlagen könnte, und befindet sich in der Regel unten rechts auf dem Bildschirm.

Hier sind drei Anwendungsfälle, in denen Sie ein FAB verwenden könnten:

  • Neues Element erstellen: In einer Notizen-App kann mit einem schwebenden Aktions-Button schnell eine neue Notiz erstellt werden.
  • Neuen Kontakt hinzufügen: In einer Chat-App könnte über einen FAB eine Benutzeroberfläche geöffnet werden, über die der Nutzer einer Unterhaltung jemanden hinzufügen kann.
  • Standort zentrieren: In einer Kartenschnittstelle könnte mit einem schwebenden Aktionsschaltfläche die Karte auf den aktuellen Standort des Nutzers zentriert werden.

In Material Design gibt es vier Arten von UAS:

  • UAB: Ein unverankerter Aktionsbutton in normaler Größe.
  • Kleiner UAB: Ein kleinerer unverankerter Aktionsbutton.
  • Großer UAB: Ein großer unverankerter Aktionsbutton.
  • Erweiterter UAB: 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 Typen von unverankerten Aktionsbuttons.

API-Oberfläche

Es gibt zwar mehrere Composables, mit denen Sie Floating Action Buttons erstellen können, die dem Material Design entsprechen, aber ihre Parameter unterscheiden sich nicht wesentlich. Zu den wichtigsten Parametern, die Sie berücksichtigen sollten, gehören die folgenden:

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

Unverankerter Aktionsbutton

Verwenden Sie zum Erstellen eines allgemeinen unverankerten Aktionsbuttons die einfache FloatingActionButton-Composable. 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 unverankerter Standard-Aktionsbutton (UAB) mit abgerundeten Ecken, einem Schatten und einem „Hinzufügen“-Symbol.
Abbildung 2: Ein unverankerter Aktionsbutton.

Kleine Schaltfläche

Verwenden Sie die komponierbare Funktion SmallFloatingActionButton, um einen kleinen unverankerten Aktionsbutton (UAB) zu erstellen. Das folgende Beispiel zeigt, wie das geht, und es werden benutzerdefinierte Farben hinzugefügt.

@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

Wenn Sie einen großen unverankerten Aktionsbutton erstellen möchten, verwenden Sie die Composable LargeFloatingActionButton. Diese Composable unterscheidet sich nicht wesentlich von den anderen Beispielen, außer dass sie zu einem größeren Button führt.

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

@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.

Erweiterte Schaltfläche

Mit der ExtendedFloatingActionButton-Composable-Funktion können Sie komplexere Floating Action Buttons erstellen. Der Hauptunterschied zu FloatingActionButton besteht darin, dass es spezielle icon- und text-Parameter hat. Damit können Sie einen Button mit komplexeren Inhalten erstellen, der sich entsprechend anpasst.

Im folgenden Snippet sehen Sie, wie ExtendedFloatingActionButton implementiert wird. Es 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") },
    )
}

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 (UAB) mit Text und einem Symbol.

Zusätzliche Ressourcen