Pływający przycisk polecenia

Pływający przycisk polecenia (FAB) to wyróżniający się przycisk, który pozwala użytkownikowi wykonać główne działanie w aplikacji. Promuje ono pojedyncze, sprecyzowane działanie, które jest najczęstszą ścieżką, którą może podjąć użytkownik. Zwykle znajduje się w prawym dolnym rogu ekranu.

Oto 3 przypadki użycia przycisku PPP:

  • Utwórz nowy element: w aplikacji do robienia notatek przy użyciu przycisku PPP można szybko utworzyć nową notatkę.
  • Dodawanie nowego kontaktu: w aplikacji do obsługi czatu przycisk typu FAB może otworzyć interfejs umożliwiający użytkownikowi dodanie kogoś do rozmowy.
  • Lokalizacja na środku: w interfejsie mapy przycisk PPP może wyśrodkować mapę na bieżącej lokalizacji użytkownika.

W stylu Material Design są 4 rodzaje przycisków PPP:

  • FAB: pływający przycisk polecenia o zwykłym rozmiarze.
  • Mały przycisk typu FAB: mniejszy pływający przycisk polecenia.
  • Duży przycisk typu FAB: większy pływający przycisk polecenia.
  • Rozszerzony przycisk PPP: pływający przycisk polecenia, który zawiera więcej niż tylko ikonę.
Przykład każdego z 4 komponentów pływającego przycisku polecenia.
Rysunek 1. Cztery typy pływających przycisków polecenia.

Interfejs API

Chociaż istnieje kilka elementów kompozycyjnych, których można użyć do utworzenia pływających przycisków poleceń zgodnych z interfejsem Material Design, ich parametry nie różnią się znacząco. Oto najważniejsze parametry, o których należy pamiętać:

  • onClick: funkcja wywoływana, gdy użytkownik naciśnie przycisk.
  • containerColor: kolor przycisku.
  • contentColor: kolor ikony.

Pływający przycisk polecenia

Aby utworzyć ogólny pływający przycisk polecenia, użyj podstawowej funkcji kompozycyjnej FloatingActionButton. Poniższy przykład pokazuje podstawową implementację przycisku PPP:

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

Implementacja wygląda tak:

Standardowy pływający przycisk polecenia z zaokrąglonym rogiem, cieniem i ikoną „Dodaj”.
Rysunek 2. Pływający przycisk polecenia.

Mały przycisk

Aby utworzyć mały pływający przycisk polecenia, użyj funkcji kompozycyjnej SmallFloatingActionButton. Poniższy przykład pokazuje, jak to zrobić, dodając kolory niestandardowe.

@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

Implementacja wygląda tak:

Implementacja obiektu SmallFloatingActionButton zawierającego ikonę „add”.
Rysunek 3. Mały pływający przycisk polecenia.

Duży przycisk

Aby utworzyć duży pływający przycisk polecenia, użyj funkcji kompozycyjnej LargeFloatingActionButton. Funkcja kompozycyjna nie różni się znacząco od innych przykładów poza tym, że skutkuje większym przyciskiem.

Poniżej widać prostą implementację dużego przycisku PPP.

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

Implementacja wygląda tak:

Implementacja funkcji LargeFloatingActionButton zawierająca ikonę „add”.
Rysunek 4. Duży pływający przycisk polecenia.

Przycisk rozszerzony

Bardziej złożone pływające przyciski poleceń możesz tworzyć za pomocą funkcji kompozycyjnej ExtendedFloatingActionButton. Główna różnica między nim a FloatingActionButton polega na tym, że ma specjalne parametry icon i text. Pozwalają utworzyć przycisk z bardziej złożoną treścią, który skaluje się, aby odpowiednio dopasować ją do treści.

Ten fragment kodu ilustruje, jak wdrożyć ExtendedFloatingActionButton – z przykładowymi wartościami przekazywanymi w polach icon i text.

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

Implementacja wygląda tak:

Implementacja komponentu ExtendedFloatingActionButton z tekstem „rozszerzony przycisk” i ikoną edycji.
Rysunek 5. Pływający przycisk polecenia z tekstem i ikoną.

Dodatkowe materiały