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 doenterAlwaysScrollBehavior
, 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) } }
Implementacja wygląda tak:
![Przykład małego górnego paska aplikacji.](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-small.png?authuser=9&hl=pl)
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) } }
Implementacja wygląda tak:
![Wpisz tutaj swój tekst alternatywny](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-centered.png?authuser=9&hl=pl)
Ś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) } }
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) } }
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.](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-large.png?authuser=9&hl=pl)
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." ) } }
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.](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-bottom.png?authuser=9&hl=pl)