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

u góry 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ą zawartego w nim 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ą one tworzenie spójnych interfejsów, które zawierają elementy sterujące nawigacją i działaniami oraz są zgodne z zasadami Material Design.

Paski aplikacji

W tabeli poniżej opisano 4 typy pasków aplikacji:

Typ

Przykład

Mały: na ekrany, które nie wymagają dużej nawigacji ani wykonywania wielu czynności.

 Mały górny pasek aplikacji

Wyśrodkowanie: dla ekranów z jednym głównym działaniem.

 Wyśrodkowany pasek aplikacji u góry

Średni: ekrany wymagające umiarkowanej nawigacji i działań.

 Średni pasek aplikacji u góry

Duży: do ekranów, które wymagają dużej ilości nawigacji i działań.

 Duży górny pasek aplikacji

Interfejs API

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

  • title: tekst widoczny na pasku aplikacji.
  • navigationIcon: główna ikona nawigacji. która wyświetla się 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 wewnętrznej zawartości rusztowania.
  • colors: określa sposób wyświetlania paska aplikacji.

Zachowanie podczas przewijania

Możesz kontrolować zachowanie paska aplikacji, gdy użytkownik przewija zawartość danej sekcji szablonu. Aby to zrobić, utwórz instancję TopAppBarScrollBehavior i przekaż ją jako parametr scrollBehavior na górnym pasku aplikacji.

Istnieją 3 rodzaje 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.

W przykładach poniżej zastosowano 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 komponentu TopAppBar. To najprostszy możliwy górny pasek aplikacji. W tym przykładzie zawiera on tylko tytuł.

W tym przykładzie parametr TopAppBar nie przekazuje wartości parametrowi scrollBehavior, więc nie reaguje na przewijanie zawartoś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)
    }
}
AppBar.kt

Ta implementacja wygląda tak:

Przykład małej górnej belki aplikacji
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 użyto parametru enterAlwaysScrollBehavior(), aby uzyskać wartość, która jest przekazywana dla pola 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

Implementacja wygląda tak:

Tutaj wpisz tekst alternatywny
Rysunek 3. Pasek aplikacji u góry wyrównany do środka.

Średni

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

Podobnie jak w poprzednim fragmencie kodu, w tym przykładzie użyto parametru enterAlwaysScrollBehavior(), aby pobrać wartość, która jest przekazywana dla 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

Ta implementacja wygląda w ten sposób i pokazuje, jak działa przewijanie z interfejsu enterAlwaysScrollBehavior():

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

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. Aby utworzyć taki plik, 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 funkcji scrollBehavior. Pasek zwija się, gdy użytkownik przewija zawartość wewnętrzną rusztowania, ale rozszerza się, gdy użytkownik przewinie do końca tej 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)
    }
}
AppBar.kt

Ta implementacja wygląda tak:

Ekran w aplikacji z dolnym paskiem aplikacji zawierającym ikony działań po lewej stronie oraz pływający przycisk działania po prawej stronie.
Rysunek 5. Przykładowa implementacja dużego paska aplikacji u góry

Dolny pasek aplikacji

Aby utworzyć pasek aplikacji na dole, użyj komponentu BottomAppBar. Korzystanie z tego elementu kompozycyjnego jest bardzo podobne do funkcji kompozycyjnych na górnym pasku aplikacji opisanych w poprzednich sekcjach tej strony. Przekazujesz komponenty dla 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 widoczny 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

Ta implementacja wygląda tak:

Ekran w aplikacji z dolnym paskiem aplikacji zawierającym ikony działań po lewej stronie oraz pływający przycisk działania po prawej stronie.
Rysunek 6. Przykład implementacji dolnego paska aplikacji.

Dodatkowe materiały