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 obejmuje podstawowe elementy nawigacji. Może też zapewniać dostęp do innych kluczowych działań, np. za pomocą pływającego przycisku polecenia.

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ń.
Wyśrodkowanie: dla ekranów z jednym głównym działaniem.
Średni: ekrany wymagające umiarkowanej nawigacji i działań.
Duży: do ekranów, które wymagają dużej ilości nawigacji i działań.

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 wewnątrz 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 przeciągnie w górę zawartość szablonu, górny pasek aplikacji zwija się. 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:

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:

Ś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():

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:

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:

Dodatkowe materiały

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