Paski aplikacji to kontenery, które zapewniają użytkownikowi dostęp do kluczowych funkcji i elementów nawigacyjnych. Istnieją dwa 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 |
U góry ekranu. |
Zapewnia dostęp do kluczowych zadań i informacji. Zasadniczo hostuje tytuł, podstawowe działania i określone elementy nawigacyjne. |
Dolny pasek aplikacji |
Na dole ekranu. |
Zwykle zawiera podstawowe elementy nawigacyjne. Może też umożliwiać dostęp do innych kluczowych działań, takich jak pływający przycisk polecenia. |
Aby zaimplementować pasek aplikacji u góry i na dole, użyj odpowiednio funkcji kompozycyjnych TopAppBar i BottomAppBar. Umożliwiają one tworzenie spójnych interfejsów z nawigacją i elementami sterującymi działaniami, zgodnych z zasadami Material Design.
Najlepsze paski aplikacji
W tabeli poniżej opisujemy 4 typy pasków najpopularniejszych aplikacji:
Typ |
Przykład |
|---|---|
Mały: dotyczy ekranów, które nie wymagają nawigacji ani wykonywania wielu czynności. |
|
Wyśrodkowane: w przypadku ekranów z 1 głównym działaniem. |
|
Średnia: dotyczy ekranów, które wymagają umiarkowanej nawigacji i wymagających działań. |
|
Duży: do wyświetlania na ekranach, które wymagają intensywnej nawigacji i dużych działań. |
|
Interfejs API
Różne funkcje kompozycyjne, które umożliwiają implementowanie 4 górnych pasków aplikacji, są dość podobne. Mają one kilka kluczowych parametrów:
title: tekst wyświetlany na pasku aplikacji.navigationIcon: główna ikona nawigacji. wyświetla się po lewej stronie paska aplikacji.actions: ikony zapewniające użytkownikowi dostęp do najważniejszych działań. Pojawiają się po prawej stronie paska aplikacji.scrollBehavior: określa, jak górny pasek aplikacji reaguje na przewijanie wewnętrznej zawartości scaffold.colors: określa sposób wyświetlania paska aplikacji.
Zachowanie podczas przewijania
Możesz określić, jak pasek aplikacji reaguje, gdy użytkownik przewinie wewnętrzną zawartość danego scaffold. Aby to zrobić, utwórz instancję TopAppBarScrollBehavior i przekaż ją na górny pasek aplikacji jako parametr scrollBehavior.
Są 3 rodzaje wartości TopAppBarScrollBehavior. Są one następujące:
enterAlwaysScrollBehavior: gdy użytkownik otworzy wewnętrzną zawartość scaffold, zwija się górny pasek aplikacji. Pasek aplikacji rozwija się, gdy użytkownik wyciągnie wewnętrzną zawartość.exitUntilCollapsedScrollBehavior: podobnie jak w przypadkuenterAlwaysScrollBehavior, jednak pasek aplikacji dodatkowo się rozwija, gdy użytkownik dotrze do końca wewnętrznej zawartości scaffold.pinnedScrollBehavior: pasek aplikacji pozostaje na swoim miejscu i nie reaguje na przewijanie.
W podanych niżej przykładach zastosowano kilka z tych opcji.
Przykłady
W kolejnych sekcjach znajdziesz implementacje 4 różnych typów pasków widocznych na górze aplikacji, w tym różne przykłady kontrolowania działania przewijania.
Mały
Aby utworzyć mały pasek aplikacji u góry, użyj funkcji kompozycyjnej TopAppBar. To najprostszy z możliwych sposobów na górny pasek aplikacji. W tym przykładzie zawiera on tylko tytuł.
Ten przykład nie przekazuje TopAppBar wartości dla scrollBehavior i dlatego nie reaguje na przewijanie zawartości wewnętrznej.
@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
Wyśrodkowany górny pasek aplikacji przypomina mały pasek aplikacji, ale tytuł jest wyśrodkowany w obrębie komponentu. Aby go wdrożyć, użyj dedykowanego elementu kompozycyjnego CenterAlignedTopAppBar.
W tym przykładzie używany jest mechanizm enterAlwaysScrollBehavior(), który pobiera wartość dla funkcji scrollBehavior. W związku z tym pasek zwija się, gdy użytkownik przewinie 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.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 pasku aplikacji umieszcza się tytuł pod dodatkowymi ikonami. Aby go utworzyć, użyj funkcji kompozycyjnej MediumTopAppBar.
Podobnie jak w poprzednim fragmencie, ten przykład używa funkcji enterAlwaysScrollBehavior() do pobrania wartości przekazywanej dla parametru 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.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 z przykładem działania przewijania z enterAlwaysScrollBehavior():
Duży
Duży pasek aplikacji u góry jest podobny do medium, ale dopełnienie między tytułem a ikonami jest większe i zajmuje więcej miejsca na ekranie. Aby go utworzyć, 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 przewinie wewnętrzną zawartość scaffold, ale potem rozwija się, gdy użytkownik przewinie stronę na koniec.
@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.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 opisanych w poprzednich sekcjach tej strony na najpopularniejszych elementach kompozycyjnych na pasku aplikacji. Przekazujesz elementy kompozycyjne dla tych parametrów kluczowych:
actions: seria ikon po lewej stronie paska. Są to zwykle kluczowe działania na danym ekranie lub elementy nawigacji.floatingActionButton: pływający przycisk polecenia wyświetlany 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:
