Tworzenie pływającego przycisku polecenia (FAB)

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:

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.")
    }
}
FloatingActionButton.kt

Wynik

Standardowy pływający przycisk 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 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.")
    }
}
FloatingActionButton.kt

Wynik

Implementacja przycisku SmallFloatingActionButton zawierającego ikonę „dodaj”.
Rysunek 2. mały pływający przycisk polecenia
.

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")
    }
}
FloatingActionButton.kt

Wynik

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

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") },
    )
}
FloatingActionButton.kt

Wynik

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

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:

Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię