Pływający przycisk polecenia

Pływający przycisk polecenia (FAB) to przycisk o wysokim kontraście, który umożliwia użytkownikowi wykonanie głównego działania w aplikacji. Promuje pojedyncze, ukierunkowane działanie, które jest najczęstszą ścieżką, jaką może wybrać użytkownik. Zwykle znajduje się w prawym dolnym rogu ekranu.

Oto 3 przypadki użycia, w których możesz wykorzystać przycisk typu FAB:

  • Utwórz nowy element: w aplikacji do robienia notatek przycisk typu FAB może służyć do szybkiego utworzenia nowej notatki.
  • Dodawanie nowego kontaktu: w aplikacji do obsługi czatu przycisk FAB może otwierać 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 dostępne są 4 rodzaje pływających przycisków akcji:

  • Pływający przycisk polecenia (FAB): pływający przycisk polecenia o zwykłym rozmiarze.
  • Mały przycisk FAB: mniejszy pływający przycisk polecenia.
  • Duży przycisk typu FAB: większy pływający przycisk polecenia.
  • Rozszerzony przycisk typu FAB: 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 polecenia.

Interfejs API

Chociaż istnieje kilka funkcji kompozycyjnych, których możesz użyć do utworzenia pływających przycisków polecenia zgodnych z Material Design, ich parametry nie różnią się znacząco. Warto zwrócić uwagę na kilka kluczowych parametrów:

  • 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 polecenia, użyj podstawowej funkcji kompozycyjnej FloatingActionButton. Poniższy przykład pokazuje podstawową implementację przycisku FAB:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Floating action button.")
    }
}

Implementacja wygląda tak:

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

Mały przycisk

Aby utworzyć mały pływający przycisk polecenia, użyj funkcji kompozycyjnej SmallFloatingActionButton. Poniższy przykład pokazuje, jak to zrobić, dodając spersonalizowane kolory.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Small floating action button.")
    }
}

Implementacja wygląda tak:

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

Duży przycisk

Aby utworzyć duży pływający przycisk polecenia, użyj funkcji kompozycyjnej LargeFloatingActionButton. Ten element kompozycyjny nie różni się znacząco od innych przykładów, poza tym, że tworzy większy przycisk.

Poniżej znajdziesz prostą implementację dużego pływającego przycisku akcji.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Large floating action button")
    }
}

Implementacja wygląda tak:

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

Przycisk rozszerzony

Za pomocą funkcji kompozycyjnej ExtendedFloatingActionButton możesz tworzyć bardziej złożone pływające przyciski polecenia. Główna różnica między tym zdarzeniem a FloatingActionButton polega na tym, że ma ono dedykowane parametry icon i text. Umożliwiają utworzenie przycisku z bardziej złożoną zawartością, która skaluje się, aby odpowiednio dopasować się do treści.

Poniższy fragment kodu pokazuje, jak wdrożyć ExtendedFloatingActionButton z przykładowymi wartościami przekazanymi dla icon i text.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(painter = rememberVectorPainter(AppIcons.Edit), "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}

Implementacja wygląda tak:

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

Dodatkowe materiały