Pływający przycisk polecenia

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 i zazwyczaj znajduje się w prawym dolnym rogu ekranu.

Oto 3 przykłady użycia pływającego przycisku działania:

• Utwórz nowy element: w aplikacji do robienia notatek przycisk typu FAB może służyć do szybkiego tworzenia nowej notatki.
• Dodaj nowy kontakt: w aplikacji do obsługi czatu 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:

• FAB: pływający przycisk polecenia o standardowym rozmiarze.
• Mały przycisk typu FAB: mniejszy pływający przycisk polecenia.
• Duży FAB: większy pływający przycisk polecenia.
• Rozszerzony przycisk typu FAB: pływający przycisk polecenia, który zawiera nie tylko ikonę.

Powierzchnia interfejsu API

Istnieje kilka funkcji kompozycyjnych, których możesz użyć do tworzenia przycisków czynności pływających zgodnych z Material Design, ale ich parametry nie różnią się zbytnio. Oto najważniejsze parametry, o których warto 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 podstawowej funkcji kompozycyjnej FloatingActionButton. Poniższy przykład pokazuje podstawową implementację FAB:

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

Ta implementacja wygląda tak:

Mały przycisk

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 spersonalizowanych kolorów.

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

Duży przycisk

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 powoduje wyświetlenie większego przycisku.

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

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

Rozszerzony przycisk

Za pomocą funkcji ExtendedFloatingActionButton możesz tworzyć bardziej złożone pływające przyciski działania. 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ć element 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

Ta implementacja wygląda tak:

Dodatkowe materiały

• Typowe przyciski
• Dokumentacja interfejsu użytkownika Material Design