Paski aplikacji

Paski aplikacji to kontenery, które dają użytkownikowi dostęp do kluczowych funkcji elementy nawigacyjne. Istnieją 2 typy pasków aplikacji: górne paski aplikacji i u dołu strony bary. Ich wygląd i przeznaczenie są następujące:

Typ

Wygląd

Cel

Górny pasek aplikacji

W górnej części 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

Na dole ekranu.

Zwykle obejmuje główne elementy nawigacyjne. Może też zapewniać dostęp do innych kluczowych działań, np. przy użyciu ograniczonego 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 klawiszy TopAppBar oraz BottomAppBar elementy kompozycyjne. Pozwalają tworzyć spójne z interfejsami obejmującymi nawigację i sterowanie działaniami. zgodne z zasadami Material Design.

Najlepsze paski aplikacji

W tabeli poniżej opisujemy 4 rodzaje pasków najpopularniejszych 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środkowane: dotyczy ekranów z 1 głównym działaniem.

 Wyśrodkowany górny pasek aplikacji

Średnia: na ekranach, które wymagają umiarkowanej nawigacji i liczby dodatkowych czynności.

 Średni górny pasek aplikacji

Duży: na ekrany, które wymagają dużej liczby działań i nawigacji.

 Duży górny pasek aplikacji

Interfejs API

różne elementy kompozycyjne, które umożliwiają implementację 4 różnych najpopularniejszych aplikacji; słupki są dość podobne. Obejmują one kilka kluczowych parametrów:

  • title: tekst widoczny na pasku aplikacji.
  • navigationIcon: główna ikona nawigacji. Wyświetla się na po lewej stronie paska aplikacji.
  • actions: ikony, które dają użytkownikowi dostęp do kluczowych działań. Wyświetlają się po prawej stronie paska aplikacji.
  • scrollBehavior: określa, jak górny pasek aplikacji reaguje na przewijanie i wnętrza rusztowania.
  • colors: określa sposób wyświetlania paska aplikacji.

Zachowanie podczas przewijania

Możesz kontrolować, jak pasek aplikacji reaguje po przewinięciu danego elementu na scaffold. Aby to zrobić, utwórz instancję TopAppBarScrollBehavior i przekaż ją na górnym pasku aplikacji w przypadku aplikacji scrollBehavior.

Istnieją 3 typy: TopAppBarScrollBehavior. Są to:

  • enterAlwaysScrollBehavior: gdy użytkownik przyciągnie wewnętrzny rusztowanie pasek aplikacji zwija się u góry strony. Pasek aplikacji rozwija się, gdy użytkownik która pobiera wewnętrzną treść.
  • exitUntilCollapsedScrollBehavior: podobne do enterAlwaysScrollBehavior, chociaż pasek aplikacji również się rozwija, gdy użytkownik dotrze do końca na scaffold.
  • pinnedScrollBehavior: pasek aplikacji pozostaje na swoim miejscu i nie reaguje na przewijanie.

Podane niżej przykłady implementują kilka z tych opcji.

Przykłady

W sekcjach poniżej znajdziesz informacje o implementacjach dla czterech różnych typów pasków najpopularniejszych aplikacji, w tym różne przykłady możliwości sterowania przewijaniem.

Mały

Aby utworzyć mały górny pasek aplikacji, użyj funkcji kompozycyjnej TopAppBar. To jest najprostszy z możliwych górnego paska aplikacji. W tym przykładzie zawiera on tylko tytuł.

Poniższy przykład nie przekazuje TopAppBar wartości dla argumentu scrollBehavior i dlatego nie reaguje na przewijanie wewnętrznego elementu 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środkowano

Wyrównany do środka górny pasek aplikacji jest taki sam jak mały pasek aplikacji. ale tytuł jest wyśrodkowany w komponencie. Aby go wdrożyć, użyj funkcja kompozycyjna CenterAlignedTopAppBar.

W tym przykładzie użyto funkcji enterAlwaysScrollBehavior() do uzyskania przekazywanej wartości za scrollBehavior. Pasek zwija się, gdy użytkownik przewinie na 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

Implementacja wygląda tak:

Wpisz tutaj swój tekst alternatywny
Rysunek 3. Wyrównany do środka górny pasek aplikacji.

Średni

Na średnim górnym pasku aplikacji znajduje się tytuł pod ewentualnymi dodatkowymi ikonami. Aby utworzyć pierwszy, użyj funkcji kompozycyjnej MediumTopAppBar.

Podobnie jak w poprzednim fragmencie, w tym przykładzie użyto elementu enterAlwaysScrollBehavior() do uzyskać wartość przekazywaną 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

Implementacja wygląda w następujący sposób i przedstawia sposób przewijania zachowanie użytkownika enterAlwaysScrollBehavior() wygląda na:

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

Duży

Duży górny pasek aplikacji jest podobny do średniego, ale dopełnienie między tytuł i ikony są większe i zajmują więcej miejsca na ekranie. Do utwórz regułę, użyj funkcji kompozycyjnej LargeTopAppBar.

W odróżnieniu od poprzednich fragmentów w tym przykładzie użyto exitUntilCollapsedScrollBehavior(), aby uzyskać wartość, dla której przekazuje wartość scrollBehavior Pasek zwija się, gdy użytkownik przewinie scaffold, ale rozwija się, gdy użytkownik przewinie stronę do końca do treści wewnętrznych.

@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 aplikacji z dolnym paskiem aplikacji, na którym po lewej stronie znajdują się ikony działań, oraz pływającym przyciskiem polecenia po prawej.
Rysunek 5. Przykład implementacji dużego górnego paska aplikacji.

Dolny pasek aplikacji

Aby utworzyć dolny pasek aplikacji, użyj funkcji kompozycyjnej BottomAppBar. Użycie tego Funkcja kompozycyjna jest podobna do funkcji kompozycyjnej umieszczonej na pasku aplikacji poprzednich sekcji tej strony. Elementy kompozycyjne są przekazywane dla poniższego klucza parametry:

  • actions: seria ikon wyświetlanych po lewej stronie paska. Te to zwykle albo kluczowe działania na danym ekranie, albo elementy nawigacyjne.
  • floatingActionButton: pływający przycisk polecenia wyświetlany na 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 aplikacji z dolnym paskiem aplikacji, na którym po lewej stronie znajdują się ikony działań, oraz pływającym przyciskiem polecenia po prawej.
Rysunek 6. Przykład implementacji dolnego paska aplikacji.
.

Dodatkowe materiały