Pływający przycisk polecenia (FAB) to wyróżniony przycisk, który umożliwia użytkownikowi wykonanie głównego działania w aplikacji. Promuje ono jedno konkretne działanie, które jest najczęstszą ścieżką użytkownika, i zazwyczaj znajduje się w prawym dolnym rogu ekranu.
Oto 3 przypadki użycia przycisku FAB:
- Utwórz nowy element: w aplikacji do tworzenia notatek możesz użyć przycisku FAB, aby szybko utworzyć nową notatkę.
- Dodaj nowy kontakt: w aplikacji do czatu przycisk FAB może otworzyć interfejs, który umożliwia użytkownikowi dodanie kogoś do rozmowy.
- Wyśrodkowanie lokalizacji: w interfejsie mapy przycisk FAB może wyśrodkować mapę na bieżącej lokalizacji użytkownika.
W Material Design wyróżniamy 4 typy przycisków FAB:
- Pływający przycisk polecenia: zwykły pływający przycisk polecenia.
- Mały pływający przycisk polecenia: mniejszy pływający przycisk polecenia.
- Duży pływający przycisk polecenia: większy pływający przycisk polecenia.
- Rozszerzony FAB: pływający przycisk polecenia, który zawiera więcej niż tylko ikonę.
Zgodność wersji
Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.
Zależności
implementation(platform("androidx.compose:compose-bom:2025.01.01"))
implementation platform('androidx.compose:compose-bom:2025.01.01')
Tworzenie podstawowego pływającego przycisku polecenia
Aby utworzyć ogólny przycisk działania, użyj podstawowego komponentu FloatingActionButton
:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Wynik

Tworzenie małego pływającego przycisku polecenia
Aby utworzyć mały przycisk działania, użyj komponentu SmallFloatingActionButton
. Przykład poniżej pokazuje, jak to zrobić, z dodatkiem kolorów niestandardowych.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
Wynik

Tworzenie dużego pływającego przycisku polecenia
Aby utworzyć duży przycisk akcji pływającej, użyj komponentu LargeFloatingActionButton
. Ta kompozycja nie różni się znacząco od innych przykładów, z tym wyjątkiem, że ma większy przycisk.
Poniżej przedstawiono prostą implementację dużego przycisku FAB.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Wynik

Tworzenie rozszerzonego pływającego przycisku polecenia
Za pomocą komponentu ExtendedFloatingActionButton
możesz tworzyć bardziej złożone przyciski działań. Główna różnica między tymi parametrami a parametrem FloatingActionButton
polega na tym, że icon
i text
mają dedykowane parametry. Umożliwiają one tworzenie bardziej złożonych przycisków, które dostosowują się do zawartości.
Ten fragment kodu pokazuje, jak zaimplementować parametr ExtendedFloatingActionButton
, podając przykładowe wartości parametrów 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") }, ) }
Wynik

Najważniejsze punkty
Chociaż do tworzenia pływających przycisków akcji zgodnych z Material Design możesz używać różnych komponentów, 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.
z## Kolekcje zawierające ten przewodnik
Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:
