Paski aplikacji

Paski aplikacji to kontenery, które zapewniają użytkownikowi dostęp do kluczowych funkcji i elementów nawigacyjnych. Istnieją 2 rodzaje pasków aplikacji: górne i dolne. Ich wygląd i przeznaczenie są następujące:

Typ

Wygląd

Cel

Górny pasek aplikacji

U góry ekranu.

Zapewnia dostęp do kluczowych zadań i informacji. Zazwyczaj zawiera tytuł, główne działania i niektóre elementy nawigacyjne.

Dolny pasek aplikacji

Na dole ekranu.

Zwykle zawiera podstawowe elementy nawigacji. Może też zapewniać dostęp do innych kluczowych działań, np. za pomocą pływającego przycisku polecenia.
Przykład górnego i dolnego paska aplikacji.
Rysunek 1. Górny pasek aplikacji (po lewej) i dolny pasek aplikacji (po prawej).

Aby zaimplementować górny i dolny pasek aplikacji, użyj odpowiednio funkcji kompozycyjnych TopAppBar i BottomAppBar. Umożliwiają tworzenie spójnych interfejsów, które zawierają elementy sterujące nawigacją i działaniami oraz są zgodne z zasadami Material Design.

Górne paski aplikacji

W tabeli poniżej opisano 4 rodzaje górnych pasków aplikacji:

Typ

Przykład

Mały: na ekranach, które nie wymagają wielu działań ani nawigacji.

 Mały górny pasek aplikacji

Wyśrodkowanie: na ekranach, na których jest tylko jedno główne działanie.

 Wyśrodkowany górny pasek aplikacji

Średni: w przypadku ekranów, które wymagają umiarkowanej liczby elementów nawigacyjnych i działań.

 Średni górny pasek aplikacji

Duży: na ekranach, które wymagają wielu działań i elementów nawigacyjnych.

 Duży górny pasek aplikacji

Interfejs API

Różne funkcje kompozycyjne, które umożliwiają wdrożenie 4 różnych górnych pasków aplikacji, są do siebie bardzo podobne. Funkcje mają te same parametry:

  • title: tekst, który pojawia się na pasku aplikacji.
  • navigationIcon: główna ikona nawigacji. Wyświetla się po lewej stronie paska aplikacji.
  • actions: ikony, które dają użytkownikowi dostęp do kluczowych działań. Pojawiają się po prawej stronie paska aplikacji.
  • scrollBehavior: określa, jak górny pasek aplikacji reaguje na przewijanie wewnętrznej zawartości szkieletu.
  • colors: określa, jak wygląda pasek aplikacji.

Działanie przewijania

Możesz kontrolować, jak pasek aplikacji reaguje, gdy użytkownik przewija wewnętrzną zawartość danego rusztowania. Aby to zrobić, utwórz instancję TopAppBarScrollBehavior i przekaż ją do górnego paska aplikacji jako parametr scrollBehavior.

Istnieją 3 rodzaje TopAppBarScrollBehavior. Są to:

  • enterAlwaysScrollBehavior: gdy użytkownik podciągnie wewnętrzną zawartość rusztowania, górny pasek aplikacji się zwinie. Pasek aplikacji rozwija się, gdy użytkownik zaczyna przeciągać zawartość wewnętrzną w dół.
  • exitUntilCollapsedScrollBehavior: podobnie jak w przypadku enterAlwaysScrollBehavior, ale pasek aplikacji rozwija się tylko wtedy, gdy użytkownik przeciągnie treść do samego dołu.
  • pinnedScrollBehavior: pasek aplikacji pozostaje na miejscu i nie reaguje na przewijanie.

W poniższych przykładach zastosowano kilka z tych opcji.

Przykłady

W sekcjach poniżej znajdziesz implementacje 4 różnych typów górnych pasków aplikacji, w tym różne przykłady kontrolowania zachowania podczas przewijania.

Mały

Aby utworzyć mały górny pasek aplikacji, użyj funkcji kompozycyjnej TopAppBar. Poniższy przykład implementuje podstawowy górny pasek aplikacji, który zawiera tylko tytuł.

W tym przykładzie nie przekazujemy do TopAppBar wartości dla scrollBehavior, więc nie reaguje on na przewijanie treści wewnętrznej.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

Implementacja wygląda tak:

Przykład małego górnego paska aplikacji.
Rysunek 2. Mały górny pasek aplikacji.

Wyśrodkowanie

Górny pasek aplikacji wyrównany do środka jest zasadniczo taki sam jak mały pasek aplikacji, ale tytuł jest wyśrodkowany w komponencie. Aby go zaimplementować, użyj specjalnej funkcji kompozycyjnej CenterAlignedTopAppBar.

W tym przykładzie użyto enterAlwaysScrollBehavior(), aby uzyskać wartość przekazywaną dla scrollBehavior. Dlatego pasek zwija się, gdy użytkownik przewija wewnętrzną zawartość rusztowania.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

Implementacja wygląda tak:

Przykład górnego paska aplikacji wyrównanego do środka.
Rysunek 3. Pasek aplikacji u góry wyrównany do środka.

Średni

Średni górny pasek aplikacji umieszcza tytuł pod dodatkowymi ikonami. Aby utworzyć taką funkcję, użyj funkcji kompozycyjnej MediumTopAppBar.

Podobnie jak w poprzednim fragmencie kodu, w tym przykładzie użyto enterAlwaysScrollBehavior(), aby uzyskać wartość przekazywaną do scrollBehavior.

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

Implementacja wygląda tak, jak pokazano poniżej, z demonstracją zachowania przewijania z enterAlwaysScrollBehavior():

Rysunek 4. Średni górny pasek aplikacji, który zwija się, gdy użytkownik przewija w górę, i rozwija, gdy użytkownik przewija w dół.

Duży

Duży górny pasek aplikacji jest podobny do średniego, ale odstęp między tytułem a ikonami jest większy i zajmuje więcej miejsca na ekranie. Aby go utworzyć, użyj funkcji kompozycyjnej LargeTopAppBar.

W odróżnieniu od poprzednich fragmentów kodu ten przykład używa funkcji exitUntilCollapsedScrollBehavior(), aby uzyskać wartość przekazywaną do parametru scrollBehavior. Dlatego pasek zwija się, gdy użytkownik przewija wewnętrzną zawartość rusztowania, ale rozwija się, gdy użytkownik przewija do końca wewnętrznej zawartości.

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

Implementacja wygląda tak:

Ekran w aplikacji z dolnym paskiem aplikacji, który zawiera 4 ikony działań po lewej stronie i pływający przycisk polecenia po prawej stronie.
Rysunek 5. Przykładowa implementacja dużego górnego paska aplikacji.

Dolny pasek aplikacji

Aby utworzyć dolny pasek aplikacji, użyj funkcji kompozycyjnej BottomAppBar. Użycie tego elementu kompozycyjnego jest bardzo podobne do użycia elementów kompozycyjnych górnego paska aplikacji opisanych w poprzednich sekcjach tej strony. Przekazujesz elementy kompozycyjne dla tych kluczowych parametrów:

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

@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."
        )
    }
}

Implementacja wygląda tak:

Ekran w aplikacji z dolnym paskiem aplikacji, który zawiera 4 ikony działań po lewej stronie i pływający przycisk polecenia po prawej stronie.
Rysunek 6. Przykładowa implementacja dolnego paska aplikacji.

Dodatkowe materiały