Paski aplikacji to kontenery, które zapewniają użytkownikom dostęp do kluczowych funkcji i elementów nawigacji. Są 2 rodzaje pasków aplikacji: górne i dolne. 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 odpowiednio funkcji kompozycyjnych TopAppBar
i BottomAppBar
. Pozwalają tworzyć spójne interfejsy zawierające nawigację i elementy sterujące, 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 funkcje kompozycyjne, które umożliwiają implementację 4 różnych pasków aplikacji, są dość podobne. Obejmują one kilka kluczowych parametrów:
title
: tekst widoczny na pasku aplikacji.navigationIcon
: główna ikona nawigacji. która wyświetla się po lewej stronie paska aplikacji.actions
: ikony, które dają 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 rusztowania.colors
: określa sposób wyświetlania paska aplikacji.
Zachowanie podczas przewijania
Możesz określić, jak reaguje pasek aplikacji, gdy użytkownik przewija zawartość danego rubryka. Aby to zrobić, utwórz instancję TopAppBarScrollBehavior
i przekaż ją jako parametr scrollBehavior
na górnym pasku aplikacji.
Istnieją 3 typy: TopAppBarScrollBehavior
. Są to:
enterAlwaysScrollBehavior
: gdy użytkownik pobierze wewnętrzną zawartość rubryki, pasek aplikacji zwija się u góry. Pasek aplikacji rozwija się, gdy użytkownik ściąga zawartość wewnętrzną.exitUntilCollapsedScrollBehavior
: podobnie jak w przypadkuenterAlwaysScrollBehavior
, jednak pasek aplikacji dodatkowo się rozwija, gdy użytkownik dotrze do końca wewnętrznej zawartości rusztowania.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 opis 4 rodzajów pasków u góry strony aplikacji, w tym różne przykłady sterowania przewijaniem.
Mały
Aby utworzyć mały górny pasek aplikacji, użyj funkcji kompozycyjnej TopAppBar
. Jest to najprostszy z możliwych elementów pasek aplikacji, który w tym przykładzie zawiera tylko tytuł.
W poniższym przykładzie nie podano wartości TopAppBar
w polu scrollBehavior
, więc nie ma on reakcji na przewijanie wewnętrznych 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:
Wyśrodkowano
Wyrównany do środka górny pasek aplikacji wygląda tak samo jak w małym pasku aplikacji, ale tytuł jest wyśrodkowany w komponencie. Aby go wdrożyć, użyj dedykowanego elementu kompozycyjnego CenterAlignedTopAppBar
.
W tym przykładzie użyto parametru enterAlwaysScrollBehavior()
do pobrania wartości, która jest przekazywana dla pola scrollBehavior
. Dzięki temu pasek zwija się, gdy użytkownik przewija wewnętrzną zawartość rusztowania.
@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) } }
Implementacja wygląda tak:
Medium
Na średnim górnym pasku aplikacji znajduje się tytuł pod ewentualnymi dodatkowymi ikonami. Aby utworzyć taki plik, użyj funkcji kompozycyjnej MediumTopAppBar
.
Podobnie jak w poprzednim fragmencie kodu, w tym przykładzie użyto parametru enterAlwaysScrollBehavior()
, aby pobrać wartość, która jest przekazywana 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) } }
Ta implementacja wygląda w ten sposób i pokazuje, jak działa przewijanie z interfejsu enterAlwaysScrollBehavior()
:
Duży
Duży górny pasek aplikacji jest podobny do medium, ale dopełnienie między tytułem a ikonami jest większe i zajmuje więcej miejsca na ekranie. Aby utworzyć taki plik, użyj funkcji kompozycyjnej LargeTopAppBar
.
W przeciwieństwie do poprzednich fragmentów kodu w tym przykładzie użyto parametru exitUntilCollapsedScrollBehavior()
do pobrania wartości przekazywanej dla parametru scrollBehavior
. W związku z tym pasek zwija się, gdy użytkownik przewija wewnętrzną zawartość rusztowania, a następnie rozwija się, gdy użytkownik przewinie do końca wewnętrznej zawartoś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) } }
Implementacja wygląda tak:
Dolny pasek aplikacji
Aby utworzyć dolny pasek aplikacji, użyj funkcji kompozycyjnej BottomAppBar
. Korzystanie z tego elementu kompozycyjnego jest bardzo podobne do funkcji kompozycyjnych na górnym pasku aplikacji opisanych w poprzednich sekcjach tej strony. Elementy kompozycyjne przekazujesz w przypadku tych kluczowych parametrów:
actions
: seria ikon wyświetlanych po lewej stronie paska. Są to zwykle kluczowe działania na danym ekranie lub elementy nawigacyjne.floatingActionButton
: pływający przycisk polecenia widoczny 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: