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.

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.
Wyśrodkowane: dotyczy ekranów z 1 głównym działaniem.
Średnia: na ekranach, które wymagają umiarkowanej nawigacji i liczby dodatkowych czynności.
Duży: na ekrany, które wymagają dużej liczby działań i nawigacji.

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:

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:

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

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:

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:

.

Dodatkowe materiały

• Dokumentacja Material3 – górny pasek aplikacji
• Dokumentacja Material3 – dolny pasek aplikacji
• Ruszt