Paski aplikacji

Paski aplikacji to kontenery, które zapewniają użytkownikowi dostęp do najważniejszych funkcji i elementów nawigacyjnych. Istnieją 2 rodzaje pasków aplikacji: górny i dolny. Ich wygląd i przeznaczenie 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ł, najważniejsze działania i niektóre elementy nawigacyjne.

Dolny pasek aplikacji

U dołu ekranu.

Zwykle zawiera najważniejsze 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 (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 nawigacyjne i przyciski poleceń 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 działań.

 Mały górny pasek aplikacji

Wyśrodkowany: w przypadku ekranów, które mają jedno główne działanie.

 Wyśrodkowany górny pasek aplikacji

Średni: 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 API

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

  • title: tekst, który pojawia się na pasku aplikacji.
  • navigationIcon: główna ikona nawigacji. Pojawia się po lewej stronie paska aplikacji.
  • actions: ikony, które zapewniają użytkownikowi dostęp do najważniejszych działań. Pojawiają się po prawej stronie paska aplikacji.
  • scrollBehavior: określa, jak górny pasek aplikacji reaguje na przewijanie wewnętrznej treści szkieletu.
  • colors: określa wygląd paska aplikacji.

Zachowanie podczas przewijania

Możesz określić, jak pasek aplikacji reaguje, gdy użytkownik przewija wewnętrzną treść danego szkieletu. Aby to zrobić, utwórz instancję TopAppBarScrollBehavior i przekaż ją do górnego paska aplikacji jako wartość parametru scrollBehavior.

Dostępne są 3 typy TopAppBarScrollBehavior: Są to:

  • enterAlwaysScrollBehavior: gdy użytkownik przeciągnie wewnętrzną treść szkieletu w górę, górny pasek aplikacji się zwija. Pasek aplikacji rozwija się, gdy użytkownik zacznie przeciągać wewnętrzną treść w dół.
  • exitUntilCollapsedScrollBehavior: podobnie jak enterAlwaysScrollBehavior, ale pasek aplikacji rozwija się tylko wtedy, gdy użytkownik przeciągnie treść do samego dołu.
  • pinnedScrollBehavior: pasek aplikacji pozostaje na swoim miejscu i nie reaguje na przewijanie.

W przykładach poniżej zaimplementowano 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 tego, jak możesz kontrolować zachowanie podczas przewijania.

Mały

Aby utworzyć mały górny pasek aplikacji, użyj funkcji kompozycyjnej TopAppBar. W przykładzie poniżej zaimplementowano podstawowy górny pasek aplikacji, który zawiera tylko tytuł.

W przykładzie poniżej nie przekazano do TopAppBar wartości 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

Implementacja wygląda tak:

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

Wyśrodkowany

Wyśrodkowany górny pasek aplikacji jest zasadniczo taki sam jak mały pasek aplikacji, ale tytuł jest wyśrodkowany w komponencie. Aby go zaimplementować, użyj specjalnej CenterAlignedTopAppBar funkcji kompozycyjnej.

W tym przykładzie użyto funkcji enterAlwaysScrollBehavior() do pobrania wartości, która jest przekazywana jako scrollBehavior. Dlatego pasek zwija się, gdy użytkownik przewija wewnętrzną treść szkieletu.

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    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:

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

Średni

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

Podobnie jak w poprzednim fragmencie kodu, w tym przykładzie użyto funkcji enterAlwaysScrollBehavior() do pobrania wartości, która jest przekazywana jako 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 tak, z demonstracją zachowania podczas przewijania z funkcji enterAlwaysScrollBehavior():

Rysunek 4. Średni górny pasek aplikacji, 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 ma większy odstęp między tytułem a ikonami i zajmuje więcej miejsca na ekranie. Aby go utworzyć, użyj funkcji kompozycyjnej LargeTopAppBar.

W przeciwieństwie do poprzednich fragmentów kodu w tym przykładzie użyto funkcji exitUntilCollapsedScrollBehavior() do pobrania wartości, która jest przekazywana jako scrollBehavior. Dlatego pasek zwija się, gdy użytkownik przewija wewnętrzną treść szkieletu, ale 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

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 polecenia (FAB) 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. Korzystanie z tej funkcji kompozycyjnej jest dość podobne do korzystania z funkcji kompozycyjnych górnego paska aplikacji 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 najważniejsze 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

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 polecenia (FAB) po prawej.
Rysunek 6. Przykładowa implementacja dolnego paska aplikacji.

Dodatkowe materiały