Tworzenie pływającego przycisku polecenia (FAB)

Pływający przycisk polecenia (FAB) to przycisk o dużym znaczeniu, który umożliwia użytkownikowi wykonanie głównego działania w aplikacji. Promuje jedno, konkretne działanie, które jest najczęstszym sposobem postępowania użytkownika. Zazwyczaj znajduje się w prawym dolnym rogu ekranu.

Oto 3 przykłady użycia przycisku FAB:

  • Utwórz nowy element: w aplikacji do robienia notatek pływający przycisk może służyć do szybkiego tworzenia nowej notatki.
  • Dodaj nowy kontakt: w aplikacji do czatowania pływający przycisk czynności może otwierać interfejs, który umożliwia użytkownikowi dodanie kogoś do rozmowy.
  • Wyśrodkuj lokalizację: w interfejsie mapy pływający przycisk działania może wyśrodkować mapę na bieżącej lokalizacji użytkownika.

W Material Design wyróżniamy 4 rodzaje przycisków FAB:

Zgodność wersji

Ta implementacja wymaga, aby minimalny pakiet SDK projektu był ustawiony na poziom API 21 lub wyższy.

Zależności

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.05.00"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.05.00')

Tworzenie podstawowego pływającego przycisku polecenia

Aby utworzyć ogólny pływający przycisk działania, użyj podstawowego komponentu kompozycyjnego FloatingActionButton:

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

Wynik

Standardowy pływający przycisk polecenia z zaokrąglonymi rogami, cieniem i ikoną „dodaj”.
Rysunek 1. Pływający przycisk polecenia.

Tworzenie małego pływającego przycisku polecenia

Aby utworzyć mały pływający przycisk działania, użyj funkcji kompozycyjnej SmallFloatingActionButton. Poniższy przykład 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.")
    }
}
FloatingActionButton.kt

Wynik

Implementacja elementu SmallFloatingActionButton, który zawiera ikonę „dodaj”.
Rysunek 2. Mały pływający przycisk polecenia.

Tworzenie dużego pływającego przycisku polecenia

Aby utworzyć duży pływający przycisk działania, użyj funkcji kompozycyjnej LargeFloatingActionButton. Ten komponent nie różni się znacząco od innych przykładów, z wyjątkiem tego, że tworzy większy przycisk.

Poniżej znajdziesz prostą implementację dużego przycisku FAB.

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

Wynik

Implementacja komponentu LargeFloatingActionButton, który zawiera ikonę „dodaj”.
Rysunek 3. Duży pływający przycisk polecenia.

Tworzenie rozszerzonego pływającego przycisku polecenia

Możesz tworzyć bardziej złożone pływające przyciski działania za pomocą funkcji kompozycyjnej ExtendedFloatingActionButton. Główna różnica między tym parametrem a parametrem FloatingActionButton polega na tym, że ma on dedykowane parametry icon i text. Umożliwiają one tworzenie przycisków z bardziej złożoną treścią, które skalują się odpowiednio do zawartości.

Poniższy fragment kodu pokazuje, jak wdrożyć funkcję ExtendedFloatingActionButton, z przykładowymi wartościami przekazanymi dla 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") },
    )
}
FloatingActionButton.kt

Wynik

Implementacja komponentu ExtendedFloatingActionButton, który wyświetla tekst „extended button” (rozszerzony przycisk) i ikonę edycji.
Rysunek 4. Pływający przycisk polecenia z tekstem i ikoną.

Najważniejsze punkty

Do tworzenia przycisków czynności pływających zgodnych z Material Design możesz używać kilku funkcji kompozycyjnych, ale ich parametry nie różnią się zbytnio. Do najważniejszych parametrów, o których należy pamiętać, należą:

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

z## Kolekcje, które zawierają ten przewodnik

Ten przewodnik jest częścią wyselekcjonowanych kolekcji przewodników, które obejmują szersze cele związane z programowaniem na Androida:

Dowiedz się, jak funkcje kompozycyjne mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu na podstawie systemu projektowania Material Design.
Zbiór krótkich przewodników

Masz pytania lub chcesz podzielić się opinią?

Odwiedź stronę z najczęstszymi pytaniami, aby zapoznać się z przewodnikami, lub skontaktuj się z nami i podziel się swoimi przemyśleniami.
Zobacz najczęstsze pytania Prześlij opinię