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
Kotlin
implementation(platform("androidx.compose:compose-bom:2025.01.01"))
Groovy
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
![Standardowy pływający przycisk z zaokrąglonymi rogami, cieniem i ikoną „dodaj”.](https://developer.android.com/static/develop/ui/compose/images/components/fab.png?hl=pl)
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
![Implementacja przycisku SmallFloatingActionButton zawierającego ikonę „dodaj”.](https://developer.android.com/static/develop/ui/compose/images/components/fab-small.png?hl=pl)
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
![Implementacja przycisku LargeFloatingActionButton, który zawiera ikonę „Dodaj”.](https://developer.android.com/static/develop/ui/compose/images/components/fab-large.png?hl=pl)
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
![Implementacja przycisku ExtendedFloatingActionButton, który wyświetla tekst „rozszerzony przycisk” i ikonę edycji.](https://developer.android.com/static/develop/ui/compose/images/components/fab-extended.png?hl=pl)
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:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=pl)