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 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 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

Chociaż do tworzenia pływających przycisków akcji zgodnych z Material Design można użyć kilku 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.

Pływający przycisk polecenia

Aby utworzyć ogólny pływający przycisk działania, 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

Ta implementacja wygląda tak:

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

Mały przycisk

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

Ta implementacja wygląda tak:

Implementacja przycisku SmallFloatingActionButton zawierającego ikonę „dodaj”.
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 przycisku LargeFloatingActionButton, który zawiera ikonę „dodaj”.
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łówną różnicą między tymi parametrami a parametrem FloatingActionButton jest to, że mają one dedykowane parametry icon i text. Umożliwiają one tworzenie bardziej złożonych przycisków, które dostosowują się do zawartości.

Poniższy 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

Ta implementacja wygląda tak:

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

Dodatkowe materiały