Pływający przycisk polecenia

Pływający przycisk polecenia (FAB) to wyróżniony przycisk, który umożliwia użytkownikowi wykonanie głównego działania w aplikacji. Promuje jedno, skoncentrowane działanie to najczęstsza ścieżka, którą może wybrać użytkownik. w prawym dolnym rogu ekranu.

Oto 3 przypadki użycia przycisku PPP:

  • 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 obsługi czatu PPP może otworzyć interfejs, który pozwala użytkownik dodaje kogoś do rozmowy.
  • Lokalizacja pośrodku: w interfejsie mapy przycisk PPP 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 pływający przycisk polecenia: pływający przycisk polecenia, który zawiera więcej niż tylko ikonę.
Przykłady 4 komponentów pływającego przycisku polecenia
Rysunek 1. Cztery typy pływających przycisków poleceń.

Interfejs API

Istnieje kilka funkcji kompozycyjnych, których można użyć do utworzenia akcji pływającej zgodne ze stylem 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 akcji, użyj podstawowego komponentu FloatingActionButton. Ten przykład pokazuje podstawową implementację przycisku FAB:

@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 opcją „dodaj” .
Rysunek 2. Pływający przycisk polecenia.

Mały przycisk

Aby utworzyć mały przycisk działania typu „pływający”, 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

Implementacja wygląda tak:

Implementacja obiektu SmallFloatingActionButton zawierająca element „add” .
Rysunek 3. mały pływający przycisk polecenia
,

Duży przycisk

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

Ta implementacja wygląda tak:

Implementacja obiektu LargeFloatingActionButton zawierający element „add” .
Rysunek 4. Duży pływający przycisk polecenia.

Przycisk rozszerzony

Za pomocą komponentu ExtendedFloatingActionButton możesz tworzyć bardziej złożone przyciski działań. Główna różnica między nimi a FloatingActionButton – dedykowane rozwiązania icon i text . Umożliwiają one tworzenie bardziej złożonych przycisków, które dostosowują się do treści.

Fragment kodu poniżej pokazuje, jak zaimplementować 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

Implementacja wygląda tak:

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

Dodatkowe materiały