Las barras de la app son contenedores que proporcionan al usuario acceso a funciones clave y elementos de navegación. Existen dos tipos de barras de la aplicación: las barras superiores y las inferiores. Su aspecto y propósito respectivos son los siguientes:
Tipo |
Apariencia |
Propósito |
|---|---|---|
Barra superior de la app |
En la parte superior de la pantalla. |
Proporciona acceso a información y tareas clave. Generalmente, aloja un título, elementos de acción principales y ciertos elementos de navegación. |
Barra de la app inferior |
En la parte inferior de la pantalla. |
Por lo general, incluye elementos de navegación principal. También puede proporcionar acceso a otras acciones clave, como a través de un botón de acción flotante contenido. |
Para implementar una barra superior de la app y una barra inferior de la app, usa los elementos componibles TopAppBar y BottomAppBar, respectivamente. Te permiten crear interfaces coherentes que encapsulan los controles de navegación y acción, y que están alineados con los principios de Material Design.
Barras superiores de la aplicación
En la siguiente tabla, se describen los cuatro tipos de barras superiores de la app:
Tipo |
Ejemplo |
|---|---|
Pequeña: Para pantallas que no requieren muchas acciones ni navegación. |
|
Alineado al centro: Para pantallas que tienen una sola acción principal. |
|
Mediana: Para pantallas que requieren una cantidad moderada de navegación y acciones. |
|
Grande: Para pantallas que requieren mucha navegación y acciones. |
|
Plataforma de API
Los distintos elementos componibles que te permiten implementar las cuatro barras superiores de la app son bastante similares. Comparten varios parámetros clave:
title: Es el texto que aparece en la barra de la app.navigationIcon: Es el ícono principal de navegación. Aparece a la izquierda de la barra de la app.actions: Íconos que proporcionan al usuario acceso a acciones clave. Aparecen a la derecha de la barra de la app.scrollBehavior: Determina cómo responde la barra superior de la app al desplazamiento del contenido interno del andamiaje.colors: Determina cómo aparece la barra de la app.
Comportamiento de desplazamiento
Puedes controlar cómo responde la barra de la app cuando el usuario se desplaza por el contenido interno del andamiaje determinado. Para hacerlo, crea una instancia de TopAppBarScrollBehavior y pásala a la barra superior de la app para el parámetro scrollBehavior.
Existen tres tipos de TopAppBarScrollBehavior. Son los siguientes:
enterAlwaysScrollBehavior: Cuando el usuario abre el contenido interno del andamiaje, se contrae la barra superior de la app. La barra de la app se expande cuando el usuario extrae el contenido interno.exitUntilCollapsedScrollBehavior: Es similar aenterAlwaysScrollBehavior, aunque la barra de la app también se expande cuando el usuario llega al final del contenido interno del andamiaje.pinnedScrollBehavior: La barra de la app permanece en su lugar y no reacciona al desplazamiento.
En los siguientes ejemplos, se implementan varias de estas opciones.
Ejemplos
En las siguientes secciones, se proporcionan implementaciones para los cuatro tipos diferentes de barras superiores de la app, incluidos diferentes ejemplos sobre cómo controlar el comportamiento de desplazamiento.
Pequeño
Para crear una barra superior pequeña de la app, usa el elemento componible TopAppBar. Esta es la barra superior de la app más simple posible y, en este ejemplo, solo contiene un título.
En el siguiente ejemplo, no se pasa un valor a TopAppBar para scrollBehavior y, por lo tanto, no reacciona al desplazamiento del contenido interno.
@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)
}
}
Esta implementación se muestra de la siguiente manera:
Centrado
La barra superior centrada de la app es básicamente la misma que la barra pequeña, aunque el título está centrado dentro del componente. Para implementarlo, usa el elemento componible CenterAlignedTopAppBar dedicado.
En este ejemplo, se usa enterAlwaysScrollBehavior() para obtener el valor que pasa para scrollBehavior. Como tal, la barra se contrae cuando el usuario se desplaza por el contenido interno del andamiaje.
@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)
}
}
Esta implementación se muestra de la siguiente manera:
Medium
La barra superior mediana de la app coloca el título debajo de los íconos adicionales. Para crear uno, usa el elemento componible MediumTopAppBar.
Al igual que el fragmento anterior, en este ejemplo se usa enterAlwaysScrollBehavior() para obtener el valor que pasa para 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)
}
}
Esta implementación aparece de la siguiente manera, con una demostración de cómo aparece el comportamiento de desplazamiento desde enterAlwaysScrollBehavior():
Grande
Una barra superior grande de la app es similar a la mediana, aunque el padding entre el título y los íconos es mayor y ocupa más espacio en la pantalla en general. Para crear uno, usa el elemento componible LargeTopAppBar.
A diferencia de los fragmentos anteriores, en este ejemplo se usa exitUntilCollapsedScrollBehavior() para obtener el valor que pasa para scrollBehavior. Como tal, la barra se contrae cuando el usuario se desplaza por el contenido interno del andamiaje, pero luego se expande cuando se desplaza hasta el final del contenido interno.
@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)
}
}
Esta implementación se muestra de la siguiente manera:
Barra de la app inferior
Para crear una barra inferior de la app, usa el elemento componible BottomAppBar. El uso de este elemento es bastante similar al de los elementos de la barra superior de la app descritos en las secciones anteriores de esta página. Pasas elementos componibles para los siguientes parámetros clave:
actions: Es una serie de íconos que aparecen en el lado izquierdo de la barra. Por lo general, estos son acciones clave para la pantalla determinada o elementos de navegación.floatingActionButton: Es el botón de acción flotante que aparece en el lado derecho de la barra.
@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."
)
}
}
Esta implementación se muestra de la siguiente manera:
Recursos adicionales
- Documentos de Material3: Barra superior de la app
- Documentos de Material3: Barra de la app inferior
- Scaffold