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. Zazwyczaj zawiera tytuł, podstawowe elementy działania i niektóre elementy nawigacji.

Dolny pasek aplikacji

U dołu 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 komponentów 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: dla ekranów, które nie wymagają dużej ilości nawigacji ani działań.

 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 górny pasek aplikacji

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 wyświetlany na pasku aplikacji.
  • navigationIcon: główna ikona nawigacji. 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 zawartości w ramach szablonu.
  • 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ę parametru TopAppBarScrollBehavior i przekaż ją do górnego paska aplikacji dla parametru scrollBehavior.

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ść wewnątrz aplikacji, 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 następujących przykładach 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 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:

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 komponent, użyj komponentu 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

Ta implementacja wygląda tak, jak pokazano poniżej. Tutaj widać, jak działa przewijanie w komponencie enterAlwaysScrollBehavior():

Rysunek 4. Pasek aplikacji u góry wyrównany do środka.

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 go utworzyć, użyj komponentu LargeTopAppBar.

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

@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 na górze

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 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.

@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ładowa implementacja dolnego paska aplikacji

Dodatkowe materiały