Pływający przycisk polecenia

Pływający przycisk polecenia to przycisk z dużym naciskiem, który umożliwia użytkownikowi wykonanie głównego działania w aplikacji. Promuje jedno, skupione działanie, które jest najczęstszą ścieżką dla użytkownika i które zwykle jest zakotwiczone w prawym dolnym rogu ekranu.

Rozważ użycie 3 przypadków użycia przycisku typu FAB:

  • Utwórz nowy element: w aplikacji do notatek można szybko utworzyć nową notatkę za pomocą przycisku PPP.
  • Dodawanie nowego kontaktu: w aplikacji do obsługi czatu przycisk typu FAB może otworzyć interfejs, który pozwala użytkownikowi dodać kogoś do rozmowy.
  • Lokalizacja pośrodku mapy: w interfejsie mapy panel typu FAB może wyśrodkować mapę na bieżącej lokalizacji użytkownika.

W stylu Material Design dostępne są 4 typy przycisków typu FAB:

  • FAB: pływający przycisk polecenia w zwykłym rozmiarze.
  • Mały przycisk polecenia: mniejszy pływający przycisk polecenia.
  • Duży przycisk PPP: 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ład każdego z 4 komponentów pływającego przycisku polecenia.
Rysunek 1. Cztery typy pływających przycisków polecenia.

Interfejs API

Chociaż jest kilka elementów kompozycyjnych, których możesz używać do tworzenia pływających przycisków akcji zgodnych ze standardem Material Design, ich parametry nie różnią się znacznie od siebie. Najważniejsze parametry, o których należy pamiętać:

  • onClick: funkcja wywoływana po naciśnięciu przycisku przez użytkownika.
  • containerColor: kolor przycisku.
  • contentColor: kolor ikony.

Pływający przycisk polecenia

Aby utworzyć ogólny pływający przycisk polecenia, użyj podstawowego funkcji kompozycyjnej FloatingActionButton. Poniższy przykład przedstawia podstawową implementację przycisku typu 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 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ć z dodaniem 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ący ikonę „add”.
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. Ta funkcja kompozycyjna nie różni się znacznie od innych przykładów poza tym, że umożliwia utworzenie większego przycisku.

Poniżej znajduje się przykład prostej implementacji dużego przycisku typu FAB.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Implementacja wygląda tak:

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

Przycisk rozszerzony

Bardziej złożone pływające przyciski poleceń możesz tworzyć za pomocą funkcji kompozycyjnej ExtendedFloatingActionButton. Główna różnica między nią a FloatingActionButton polega na tym, że ma ona dedykowane parametry icon i text. Pozwalają utworzyć przycisk zawierający bardziej złożoną treść, która jest skalowana tak, aby odpowiednio dopasowywała się do treści.

Ten fragment kodu pokazuje, jak wdrożyć właściwość ExtendedFloatingActionButton, z przykładowymi wartościami przekazanymi w polach 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 z tekstem „przycisk rozszerzonego” i ikoną edycji.
Rysunek 5. Pływający przycisk polecenia z tekstem i ikoną.

Dodatkowe materiały