Paski aplikacji

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

Typ

Wygląd

Cel

Górny pasek aplikacji

U góry ekranu.

Umożliwia dostęp do najważniejszych zadań i informacji. Zwykle zawiera tytuł, główne działania i niektóre elementy nawigacyjne.

Dolny pasek aplikacji

u dołu ekranu.

Zwykle zawiera podstawowe elementy nawigacyjne. 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 (z lewej) i dolny pasek aplikacji (z prawej).

Aby wdrożyć 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 znajdziesz 4 typy górnych pasków aplikacji:

Typ

Przykład

Mały: w przypadku ekranów, które nie wymagają wielu elementów nawigacyjnych ani opcji czynności.

 Mały górny pasek aplikacji

Wyśrodkowane: w przypadku ekranów z jednym głównym działaniem.

 Wyśrodkowany górny pasek aplikacji

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

 Średni pasek aplikacji

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

 Duży górny pasek aplikacji

Powierzchnia interfejsu API

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

  • 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 umożliwiają 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 widżetu Scaffold.
  • colors: określa sposób wyświetlania paska aplikacji.

Działanie przewijania

Możesz określić, jak pasek aplikacji ma reagować, gdy użytkownik przewija wewnętrzną zawartość danego widżetu Scaffold. 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 wyciągnie wewnętrzną treść komponentu Scaffold, górny pasek aplikacji zwinie się. Pasek aplikacji rozszerza się, gdy użytkownik przeciągnie w dół wewnętrzną treść.
  • exitUntilCollapsedScrollBehavior: podobny do enterAlwaysScrollBehavior, ale pasek aplikacji dodatkowo rozszerza się, gdy użytkownik dotrze do końca wewnętrznej treści struktury.
  • pinnedScrollBehavior: pasek aplikacji pozostaje na miejscu i nie reaguje na przewijanie.

W przykładach poniżej 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. W przykładzie poniżej zaimplementowano podstawowy pasek aplikacji u góry, który zawiera tylko tytuł.

W poniższym przykładzie nie przekazano wartości TopAppBar dla parametru scrollBehavior, dlatego nie reaguje on na przewijanie wewnętrznej 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:

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

Wyśrodkowano

Górny pasek aplikacji wyśrodkowany jest w zasadzie 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 funkcji enterAlwaysScrollBehavior(), aby uzyskać wartość przekazywaną w przypadku parametru scrollBehavior. Dlatego pasek zwija się, gdy użytkownik przewija wewnętrzną zawartość elementu Scaffold.

@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:

Przykład górnego paska aplikacji wyrównanego do środka.
Rysunek 3. Górny pasek aplikacji wyrównany do środka.

Średni

Średni pasek aplikacji u góry umieszcza tytuł pod dodatkowymi ikonami. Aby utworzyć taki element, użyj funkcji kompozycyjnej MediumTopAppBar.

Podobnie jak w poprzednim fragmencie kodu, w tym przykładzie użyto enterAlwaysScrollBehavior(), aby uzyskać wartość przekazywaną w parametrze 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, z demonstracją działania funkcji scrollBehavior z enterAlwaysScrollBehavior():

Rysunek 4. Średni pasek aplikacji u góry, który zwija się, gdy użytkownik przewija w górę, i rozwija się, 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 on więcej miejsca na ekranie. Aby utworzyć taki element, użyj funkcji kompozycyjnej LargeTopAppBar.

W odróżnieniu od poprzednich fragmentów kodu w tym przykładzie użyto funkcji exitUntilCollapsedScrollBehavior(), aby uzyskać wartość przekazywaną w przypadku parametru scrollBehavior. W związku z tym pasek zwija się, gdy użytkownik przewija wewnętrzną treść elementu Scaffold, a następnie rozwija się, gdy użytkownik przewinie do końca wewnętrznej treś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, który zawiera ikony działań po lewej stronie i pływający przycisk czynności po prawej.
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żywanie tego komponentu jest dość podobne do komponentów paska aplikacji u góry opisanych w poprzednich sekcjach tej strony. Przekazujesz funkcje kompozycyjne dla tych kluczowych parametrów:

  • actions: seria ikon, które pojawiają się po lewej stronie paska; Są to zwykle 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."
        )
    }
}
AppBar.kt

Ta implementacja wygląda tak:

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

Dodatkowe materiały