Paski aplikacji

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

Typ	Wygląd	Cel
Górny pasek aplikacji	W górnej części ekranu.	Zapewnia dostęp do najważniejszych zadań i informacji. Zwykle zawiera tytuł, główne działania i określone elementy nawigacyjne.
Dolny pasek aplikacji	U dołu ekranu.	Zwykle obejmuje podstawowe elementy nawigacji. Może też zapewniać dostęp do innych kluczowych działań, np. za pomocą pływającego przycisku polecenia.

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 komponentów TopAppBar i BottomAppBar. Pozwalają tworzyć spójne z interfejsami obejmującymi nawigację i sterowanie działaniami. zgodne z zasadami Material Design.

Ważne: paski aplikacji są zwykle przekazywane do funkcji kompozycyjnej Scaffold, która ma określonych parametrów, które pozwalają je otrzymać. Więcej informacji o tym, jak Scaffoldumożliwia wygodną strukturyzację aplikacji, znajdziesz na stronie Scaffold.

Najlepsze paski aplikacji

W tabeli poniżej opisujemy 4 rodzaje pasków najpopularniejszych aplikacji:

Typ	Przykład
Mały: dla ekranów, które nie wymagają dużej ilości nawigacji ani działań.
Wyśrodkowane: dotyczy ekranów z 1 głównym działaniem.
Średni: ekrany wymagające umiarkowanej nawigacji i działań.
Duży: na ekrany, które wymagają dużej liczby działań i nawigacji.

Interfejs API

Różne komponenty, które umożliwiają implementację 4 różnych pasków aplikacji, są dość podobne. Obejmują one kilka kluczowych parametrów:

• title: tekst wyświetlany na pasku aplikacji.
• navigationIcon: główna ikona nawigacji. Wyświetla się na po lewej stronie paska aplikacji.
• actions: ikony, które umożliwiają użytkownikowi dostęp do kluczowych działań. Pojawiają się one po prawej stronie paska aplikacji.
• scrollBehavior: określa, jak górny pasek aplikacji reaguje na przewijanie zawartości wewnątrz szablonu.
• colors: określa sposób wyświetlania paska aplikacji.

Zachowanie podczas przewijania

Możesz kontrolować, jak pasek aplikacji reaguje po przewinięciu danego elementu na scaffold. Aby to zrobić, utwórz instancję TopAppBarScrollBehavior i przekaż ją na górnym pasku aplikacji w przypadku aplikacji scrollBehavior.

Istnieją 3 typy: TopAppBarScrollBehavior. Są to:

• enterAlwaysScrollBehavior: gdy użytkownik przewinie zawartość w ramach szkieletu, górny pasek aplikacji zniknie. Gdy użytkownik przeciągnie w dół zawartość, pasek aplikacji się rozwinie.
• exitUntilCollapsedScrollBehavior: podobnie jak w przypadku enterAlwaysScrollBehavior, z tym że pasek aplikacji dodatkowo się rozszerza, gdy użytkownik dotrze do końca treści w szkielecie.
• pinnedScrollBehavior: pasek aplikacji pozostaje na swoim miejscu i nie reaguje na przewijanie.

Podane niżej przykłady implementują kilka z tych opcji.

Przykłady

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

Mały

Aby utworzyć mały górny pasek aplikacji, użyj funkcji kompozycyjnej TopAppBar. To najprostszy możliwy górny pasek aplikacji. W tym przykładzie zawiera tylko tytuł.

Poniższy przykład nie przekazuje TopAppBar wartości dla argumentu scrollBehavior i dlatego nie reaguje na przewijanie wewnętrznego elementu treści.

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

Ta implementacja wygląda tak:

Rysunek 2. mały górny pasek aplikacji.

Wyśrodkowano

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 wdrożyć, użyj dedykowanego komponentu CenterAlignedTopAppBar.

W tym przykładzie funkcja enterAlwaysScrollBehavior() służy do pobierania wartości przekazywanej do funkcji scrollBehavior. Dlatego pasek zwija się, gdy użytkownik przewija zawartość rusztowania.

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    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)
    }
}
AppBar.kt

Ta implementacja wygląda tak:

Rysunek 3. Wyrównany do środka górny pasek aplikacji.

Średni

Na środkowym pasku aplikacji u góry tytuł znajduje się pod dodatkowymi ikonami. Aby utworzyć pierwszy, użyj funkcji kompozycyjnej MediumTopAppBar.

Podobnie jak w poprzednim fragmencie kodu, w tym przykładzie funkcja enterAlwaysScrollBehavior() służy do pobierania wartości przekazywanej do funkcji 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)
    }
}
AppBar.kt

Implementacja wygląda w następujący sposób i przedstawia sposób przewijania zachowanie użytkownika enterAlwaysScrollBehavior() wygląda na:

Rysunek 4. Pasek aplikacji u góry wyśrodkowany.

Duży

Duża górna belka aplikacji jest podobna do średniej, ale odstęp między tytułem a ikonami jest większy i zajmuje więcej miejsca na ekranie. Do utwórz regułę, użyj funkcji kompozycyjnej LargeTopAppBar.

W odróżnieniu od poprzednich fragmentów w tym przykładzie użyto exitUntilCollapsedScrollBehavior(), aby uzyskać wartość, dla której przekazuje wartość scrollBehavior Pasek zwija się, gdy użytkownik przewinie scaffold, ale rozwija się, gdy użytkownik przewinie stronę do końca do treści wewnętrznych.

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

Implementacja wygląda tak:

Rysunek 5. Przykład implementacji dużego górnego paska aplikacji.

Dolny pasek aplikacji

Aby utworzyć pasek aplikacji na dole, użyj komponentu BottomAppBar. Korzystanie z tej komponowanej usługi jest bardzo podobne do korzystania z komponowanych usług w górnym pasku aplikacji opisanych w poprzednich sekcjach tej strony. Przekazujesz komponenty dla tych kluczowych parametrów:

• actions: seria ikon wyświetlanych po lewej stronie paska. Te to zwykle albo kluczowe działania na danym ekranie, albo elementy nawigacyjne.
• floatingActionButton: pływający przycisk polecenia wyświetlany na 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."
        )
    }
}
AppBar.kt

Implementacja wygląda tak:

Rysunek 6. Przykład implementacji dolnego paska aplikacji.

.

Uwaga: możesz też użyć parametru BottomAppBar bez przekazywania wartości dla parametrów actions i floatingActionButton. W takim przypadku możesz utworzyć niestandardowy pasek aplikacji na dole, wypełniając BottomAppBar treścią tak jak inne kontenery.

Dodatkowe materiały

• Dokumenty Material3 – pasek górny aplikacji
• Dokumenty Material3 – dolny pasek aplikacji
• Scaffold