Wyświetlanie dolnego paska aplikacji

Utwórz dolny pasek aplikacji, aby ułatwić użytkownikom poruszanie się po aplikacji i dostęp do jej funkcji. Aby dodać dolny pasek aplikacji, skorzystaj z komponentu BottomAppBar.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK w projekcie była ustawiona na poziom API 21 lub wyższy.

Zależności

Tworzenie dolnego paska aplikacji

Aby utworzyć pasek aplikacji na dole z 4 przyciskami z ikonami i pływającym przyciskiem polecenia, użyj tego kodu:

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

Najważniejsze informacje o kodzie

  • Zewnętrzny Scaffold z ustawionym bottomBar.
  • Implementacja bottomBar, która zawiera listę działań.
  • Działania, które są implementacją IconButton zawierającą Icon dla obrazu i tekstu opisu treści, każda z funkcją onClick lambda do wykonywania tych działań.

Możesz przekazywać komponenty w przypadku tych kluczowych parametrów:

  • actions: seria ikon widocznych po lewej stronie paska. Zwykle są to kluczowe działania na danym ekranie lub elementy nawigacji.
  • floatingActionButton: pływający przycisk polecenia, który pojawia się po prawej stronie paska.

Wyniki

Przykład dolnego paska aplikacji
Rysunek 1. Przykład dolnego paska aplikacji.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze cele związane z tworzeniem aplikacji na Androida:

Dowiedz się, jak używać standardowej platformy do tworzenia złożonych interfejsów użytkownika. Szablon łączy ze sobą różne części interfejsu, zapewniając spójny wygląd i działanie aplikacji.
Kolekcja krótkich przewodników
Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię