Barras de la app

Las barras de 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: barras superiores y de aplicación inferior. barras. Su respectiva apariencia y propósito son los siguientes:

Tipo	Aspecto	Propósito
Barra superior de la app	En la parte superior de la pantalla	Proporciona acceso a información y tareas clave. Suele alojar 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 principales. 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 y una inferior, usa TopAppBar y Elementos BottomAppBar componibles, respectivamente. Te permiten crear imágenes interfaces de usuario que encapsulan la navegación y los controles de acción, y que alineadas con los principios de Material Design.

Barras superiores de la app

En la siguiente tabla, se describen los cuatro tipos de barras superiores de la app:

Tipo	Ejemplo
Pequeña: Para pantallas que no requieren mucha navegación o acciones.
Alineación central: Para pantallas que tienen una sola acción principal.
Media: 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 apps principales diferentes las barras son bastante similares. Comparten varios parámetros clave:

• title: El texto que aparece en la barra de la app.
• navigationIcon: Es el ícono principal de navegación. Aparece en el a la izquierda de la barra de la aplicación.
• actions: Son íconos que le brindan al usuario acceso a acciones clave. Aparecen a la derecha de la barra de la aplicación.
• scrollBehavior: Determina cómo responde la barra superior de la app al desplazamiento de el 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 una lista el contenido interno de andamiaje. Para hacerlo, crea una instancia de TopAppBarScrollBehavior y pásalo a la barra superior de la app para el scrollBehavior.

Existen tres tipos de TopAppBarScrollBehavior. Son los siguientes:

• enterAlwaysScrollBehavior: Cuando el usuario levanta el interior del andamiaje contenido, la barra superior de la app se contrae. La barra se expande cuando el usuario despliega el contenido interno.
• exitUntilCollapsedScrollBehavior: Similar a enterAlwaysScrollBehavior, aunque la barra de la aplicación también se expande cuando el usuario llega al final de la el contenido interno de andamiaje.
• pinnedScrollBehavior: La barra de la aplicación permanece en su lugar y no reacciona a el 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 de cómo puedes controlar el comportamiento de desplazamiento.

Pequeño

Para crear una barra superior pequeña de la app, usa el elemento componible TopAppBar. Este es el la barra superior 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.

@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)
    }
}
AppBar.kt

Esta implementación aparece de la siguiente manera:

Centrado

La barra superior de la aplicación alineada en el centro es, en esencia, la misma que la barra pequeña de la aplicación. aunque el título está centrado dentro del componente. Para implementarla, usa el elemento componible CenterAlignedTopAppBar dedicado.

En este ejemplo, se usa enterAlwaysScrollBehavior() para obtener el valor que pasa para scrollBehavior. Por lo tanto, la barra se contrae cuando el usuario se desplaza por el contenido interno de andamiaje.

@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)
    }
}
AppBar.kt

Esta implementación aparece de la siguiente manera:

Medio

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 en el fragmento anterior, en este ejemplo, se usa enterAlwaysScrollBehavior() para obtén 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.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Esta implementación aparece de la siguiente manera, con una demostración de cómo el desplazamiento se muestra el comportamiento de enterAlwaysScrollBehavior():

.

Grande

Una barra superior grande de la app es similar al mediana, aunque el padding entre las título y los iconos son más grandes y ocupan más espacio en la pantalla en general. Para crea uno, usa el elemento componible LargeTopAppBar.

A diferencia de los fragmentos anteriores, este ejemplo usa exitUntilCollapsedScrollBehavior() para obtener el valor que pasa scrollBehavior Por lo tanto, la barra se contrae cuando el usuario se desplaza por el contenido interno de andamiaje, pero luego se expande cuando el usuario se desplaza hasta el final el 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.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Esta implementación aparece de la siguiente manera:

Barra de la app inferior

Para crear una barra inferior de la aplicación, usa el elemento componible BottomAppBar. Uso de componibilidad es bastante similar a los de la barra superior de la aplicación que se describen en el secciones anteriores de esta página. Pasas elementos componibles para la siguiente clave parámetros:

• actions: Es una serie de íconos que aparecen en el lado izquierdo de la barra. Estos suelen ser acciones clave para una 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."
        )
    }
}
AppBar.kt

Esta implementación aparece de la siguiente manera:

Recursos adicionales

• Documentos de Material3: Barra superior de la app
• Documentos de Material3: Barra inferior de la app
• Scaffold