Unverankerte Aktionsschaltfläche

Eine unverankerte Aktionsschaltfläche (Floating Action Button, FAB) ist eine auffällige Schaltfläche, mit der Nutzer eine primäre Aktion in einer App ausführen können. Sie fördert eine einzige, fokussierte Aktion, die der häufigste Pfad ist, den ein Nutzer einschlagen könnte. Sie ist in der Regel rechts unten auf dem Bildschirm verankert.

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

  • Neues Element erstellen: In einer Notiz-App kann eine FAB verwendet werden, um schnell eine neue Notiz zu erstellen.
  • Neuen Kontakt hinzufügen: In einer Chat-App könnte eine FAB eine Benutzeroberfläche öffnen, über die der Nutzer einer Unterhaltung eine Person 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:

  • Unverankerte Aktionsschaltfläche: Eine unverankerte Aktionsschaltfläche in normaler Größe.
  • Kleine FAB: Eine kleinere unverankerte Aktionsschaltfläche.
  • Große unverankerte Aktionsschaltfläche: 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 Komponenten der schwebenden Aktionsschaltfläche.
Abbildung 1 Die vier Arten von unverankerten Aktionsschaltflächen.

API-Oberfläche

Es gibt zwar mehrere Composeables, mit denen Sie Floating Action Buttons im Material Design-Stil erstellen können, ihre Parameter unterscheiden sich jedoch nicht wesentlich. Zu den wichtigsten Parametern gehören:

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

Unverankerte Aktionsschaltfläche

Verwenden Sie die grundlegende FloatingActionButton-Komponente, um eine allgemeine schwebende Aktionsschaltfläche zu erstellen. Das folgende Beispiel zeigt eine grundlegende Implementierung einer 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 schwebende Aktionsschaltfläche mit abgerundeten Ecken, einem Schatten und einem „Hinzufügen“-Symbol.
Abbildung 2: Eine unverankerte Aktionsschaltfläche.

Kleine Schaltfläche

Verwenden Sie das SmallFloatingActionButton-Element, um eine kleine schwebende Aktionsschaltfläche zu erstellen. Das folgende Beispiel zeigt, wie das geht, 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.")
    }
}
FloatingActionButton.kt

Diese Implementierung sieht so aus:

Eine Implementierung von SmallFloatingActionButton mit einem „Hinzufügen“-Symbol.
Abbildung 3: Eine kleine schwebende Aktionsschaltfläche.

Große Schaltfläche

Verwenden Sie das LargeFloatingActionButton-Element, um eine große schwebende Aktionsschaltfläche zu erstellen. Dieses Composeable unterscheidet sich nicht wesentlich von den anderen Beispielen, abgesehen davon, dass es zu einer größeren Schaltfläche führt.

Im Folgenden finden Sie eine einfache Implementierung einer 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, die ein „Hinzufügen“-Symbol enthält.
Abbildung 4: Eine große unverankerte Aktionsschaltfläche.

Erweiterte Schaltfläche

Mit dem ExtendedFloatingActionButton-Komposit können Sie komplexere schwebende Aktionsschaltflächen erstellen. Der Hauptunterschied zwischen FloatingActionButton und icon besteht darin, dass es spezielle icon- und text-Parameter gibt. Mit ihnen können Sie eine Schaltfläche mit komplexeren Inhalten erstellen, die entsprechend skaliert wird.

Im folgenden Snippet wird gezeigt, 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 den Text „Erweiterte Schaltfläche“ und ein Bearbeitungssymbol enthält.
Abbildung 5. Eine schwebende Aktionsschaltfläche mit Text und Symbol.

Weitere Informationen