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:
