Barras de apps

As barras de app são contêineres que fornecem ao usuário acesso aos principais recursos e itens de navegação. Há dois tipos de barras de apps: a de cima e a de baixo barras. Suas respectivas aparência e finalidade são as seguintes:

Tipo

Aparência

Objetivo

Barra de apps superior

Na parte superior da tela.

Acesso a tarefas e informações importantes. Geralmente, hospeda um título, itens de ação principais e determinados itens de navegação.

Barra de apps inferior

Na parte inferior da tela.

Normalmente inclui os principais itens de navegação. Também pode fornecer acesso a outras ações importantes, como um botão de ação flutuante contido.
Exemplo de uma barra de apps na parte de cima e de baixo.
Figura 1. Uma barra de apps na parte de cima (esquerda) e uma barra de apps inferior (à direita).

Para implementar uma barra de apps na parte de cima e na parte de baixo, use os elementos combináveis TopAppBar e BottomAppBar, respectivamente. Eles permitem criar modelos interfaces que englobam controles de navegação e ação e que são alinhadas aos princípios do Material Design.

Principais barras de apps

A tabela abaixo descreve os quatro tipos de barras de apps principais:

Tipo

Exemplo

Pequena: para telas que não exigem muita navegação ou ações.

 Barra de apps pequena na parte de cima

Alinhado ao centro: para telas que têm uma única ação principal.

 Barra de apps superior centralizada

Médio: para telas que exigem uma quantidade moderada de navegação e ações.

 Barra de apps média na parte de cima

Grande: para telas que exigem muita navegação e ações.

 Barra de apps grande na parte de cima

Plataforma da API

Os vários elementos combináveis que permitem implementar os quatro principais apps diferentes das barras são bastante semelhantes. Eles compartilham vários parâmetros importantes:

  • title: o texto que aparece na barra de apps.
  • navigationIcon: o ícone principal da navegação. Aparece à esquerda da barra de apps.
  • actions: ícones que fornecem ao usuário acesso às principais ações. Eles aparecem à direita da barra de apps.
  • scrollBehavior: determina como a barra de apps superior responde à rolagem de o conteúdo interno da estrutura.
  • colors: determina como a barra de apps aparece.

Comportamento de rolagem

É possível controlar como a barra de apps responde quando o usuário rola o conteúdo interno do scaffold. Para fazer isso, crie uma instância de TopAppBarScrollBehavior e transmita-a para a barra de apps superior para o parâmetro scrollBehavior.

Há três tipos de TopAppBarScrollBehavior. São elas:

  • enterAlwaysScrollBehavior: quando o usuário puxa o conteúdo interno do scaffold, a barra de apps superior é recolhida. A barra de apps se expande quando o usuário puxa o conteúdo interno para baixo.
  • exitUntilCollapsedScrollBehavior: semelhante a enterAlwaysScrollBehavior. embora a barra do aplicativo também se expanda quando o usuário chega ao final do o conteúdo interno de scaffold.
  • pinnedScrollBehavior: a barra de apps permanece no lugar e não reage a rolagem.

Os exemplos a seguir implementam várias dessas opções.

Exemplos

As seções a seguir fornecem implementações para os quatro tipos diferentes de principais barras de apps, incluindo exemplos variados de como controlar o comportamento de rolagem.

Pequeno

Para criar uma barra de apps pequena na parte de cima, use o elemento combinável TopAppBar. Esta é a barra de apps superior mais simples possível e, neste exemplo, contém apenas um título.

O exemplo a seguir não transmite um valor de TopAppBar para scrollBehavior e, portanto, não reage à rolagem do conteúdo 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)
    }
}
AppBar.kt

Essa implementação aparece da seguinte maneira:

Exemplo de uma pequena barra de apps superior.
Figura 2. Uma pequena barra de apps na parte de cima.

Alinhado ao centro

A barra de apps superior alinhada ao centro é essencialmente a mesma barra de apps pequena, embora o título esteja centralizado no componente. Para implementar, use o elemento combinável CenterAlignedTopAppBar dedicado.

Este exemplo usa enterAlwaysScrollBehavior() para acessar o valor transmitido para scrollBehavior. Assim, a barra é recolhida quando o usuário rola o conteúdo interno do scaffold.

@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

Essa implementação aparece da seguinte maneira:

Escreva o texto alternativo aqui
Figura 3. Uma barra de apps superior centralizada.

Médio

A barra de apps de cima média coloca o título abaixo de outros ícones. Para criar um, use o elemento combinável MediumTopAppBar.

Como o snippet anterior, este exemplo usa enterAlwaysScrollBehavior() para receba o valor transmitido 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

Essa implementação aparece da seguinte maneira, com uma demonstração de como a rolagem comportamento de enterAlwaysScrollBehavior() é exibido:

Figura 4. Uma barra de apps superior centralizada.

Grande

Uma barra de apps grande na parte de cima é semelhante à média, embora o padding entre o título e os ícones seja maior e ocupe mais espaço na tela. Para criar um, use o elemento combinável LargeTopAppBar.

Ao contrário dos snippets anteriores, este exemplo usa exitUntilCollapsedScrollBehavior() para receber o valor transmitido para scrollBehavior. Dessa forma, a barra se recolhe quando o usuário rola o conteúdo interno de scaffold, mas que se expande quando o usuário rola até o fim o conteúdo 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

Essa implementação aparece da seguinte maneira:

Uma tela em um app com uma barra de app na parte de baixo que contém ícones de ação no lado esquerdo e um botão de ação flutuante à direita.
Figura 5. Exemplo de implementação de uma barra de apps superior grande.

Barra de apps inferior

Para criar uma barra de apps na parte de baixo da tela, use o elemento combinável BottomAppBar. Usar este é muito semelhante aos principais elementos combináveis da barra de apps descritos nos nas seções anteriores desta página. Você transmite elementos combináveis para a chave a seguir parâmetros:

  • actions: uma série de ícones que aparecem no lado esquerdo da barra. Esses geralmente são ações-chave para a tela especificada ou itens de navegação.
  • floatingActionButton: o botão de ação flutuante que aparece no lado direito da 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

Essa implementação aparece da seguinte maneira:

Tela de um app com uma barra de apps na parte de baixo da tela com ícones de ação no lado esquerdo e um botão de ação flutuante à direita.
Figura 6. Exemplo de implementação de uma barra de apps inferior.

Outros recursos