Barre delle app

Le barre delle app sono contenitori che forniscono all'utente l'accesso a funzionalità chiave ed elementi di navigazione. Esistono due tipi di barre delle app: in alto e in basso. L'aspetto e lo scopo sono i seguenti:

Tipo	Aspetto	Finalità
Barra delle app in alto	Nella parte superiore dello schermo.	Fornisce l'accesso ad attività e informazioni chiave. In genere ospita un titolo, le attività principali e alcuni elementi di navigazione.
Barra dell'app in basso	Nella parte inferiore dello schermo.	In genere include gli elementi di navigazione principali. Potrebbe anche fornire l'accesso ad altre azioni chiave, ad esempio tramite un pulsante di azione mobile contenuto.

Per implementare una barra delle app superiore e una barra delle app in basso, utilizza rispettivamente i componenti componibili TopAppBar e BottomAppBar. Consentono di creare interfacce coerenti che incapsulano i controlli di navigazione e delle azioni e che sono allineate ai principi di Material Design.

Barre delle app in alto

Nella tabella seguente vengono descritti i quattro tipi di barre delle app principali:

Tipo	Esempio
Piccole: per schermate che non richiedono molta navigazione o azioni.
Allineata al centro: per le schermate che hanno una singola azione principale.
Medio: per le schermate che richiedono un numero moderato di navigazione e azioni.
Grandi: per le schermate che richiedono molte navigazione e azioni.

Piattaforma API

I vari componibili che consentono di implementare le quattro diverse barre delle app principali sono abbastanza simili. Condividono diversi parametri chiave:

• title: il testo visualizzato nella barra delle app.
• navigationIcon: l'icona principale per la navigazione. Viene visualizzata a sinistra della barra delle app.
• actions: icone che forniscono all'utente l'accesso alle azioni chiave. Vengono visualizzati a destra della barra delle app.
• scrollBehavior: determina la risposta della barra superiore delle app allo scorrimento dei contenuti interni dello scaffold.
• colors: determina l'aspetto della barra delle app.

Comportamento di scorrimento

Puoi controllare il modo in cui la barra delle app risponde quando l'utente fa scorrere i contenuti interni dello scaffold specificato. Per farlo, crea un'istanza di TopAppBarScrollBehavior e passala alla barra delle app in alto per il parametro scrollBehavior.

Esistono tre tipi di TopAppBarScrollBehavior. Sono i seguenti:

• enterAlwaysScrollBehavior: quando l'utente visualizza i contenuti interni dello scaffold, la barra delle app in alto si comprime. La barra delle app si espande quando l'utente tira verso il basso i contenuti interni.
• exitUntilCollapsedScrollBehavior: simile a enterAlwaysScrollBehavior, anche se la barra delle app si espande ulteriormente quando l'utente raggiunge la fine dei contenuti interni dello strumento.
• pinnedScrollBehavior: la barra delle app rimane in posizione e non reagisce allo scorrimento.

I seguenti esempi implementano diverse di queste opzioni.

Esempi

Le sezioni seguenti illustrano le implementazioni per i quattro diversi tipi di barre principali delle app, inclusi diversi esempi di come controllare il comportamento di scorrimento.

Piccolo

Per creare una barra delle app piccola, utilizza il componibile TopAppBar. Questa è la barra delle app in alto più semplice possibile e in questo esempio contiene solo un titolo.

L'esempio seguente non trasferisce un valore a TopAppBar per scrollBehavior e, pertanto, non reagisce allo scorrimento dei contenuti interni.

@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

Questa implementazione si presenta nel seguente modo:

Allineato al centro

La barra delle app in alto allineata al centro è essenzialmente la stessa della piccola barra delle app, sebbene il titolo sia centrato all'interno del componente. Per implementarlo, utilizza l'apposito modulo componibile CenterAlignedTopAppBar.

Questo esempio utilizza enterAlwaysScrollBehavior() per ottenere il valore che passa per scrollBehavior. Di conseguenza, la barra si comprime quando l'utente scorre i contenuti interni del supporto.

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

Questa implementazione si presenta nel seguente modo:

Medium

La barra delle app in alto di medie dimensioni posiziona il titolo sotto eventuali icone aggiuntive. Per crearne uno, utilizza il componibile MediumTopAppBar.

Come lo snippet precedente, questo esempio utilizza enterAlwaysScrollBehavior() per ottenere il valore che passa per 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

Questa implementazione ha il seguente aspetto, con una dimostrazione del comportamento di scorrimento da enterAlwaysScrollBehavior():

Large

Una grande barra delle app in alto è simile al mezzo, anche se la spaziatura interna tra il titolo e le icone è maggiore e occupa più spazio sullo schermo nel complesso. Per crearne uno, utilizza il componibile LargeTopAppBar.

A differenza degli snippet precedenti, questo esempio utilizza exitUntilCollapsedScrollBehavior() per ottenere il valore che passa per scrollBehavior. Di conseguenza, la barra si comprime quando l'utente scorre i contenuti interni dello scaffold, per poi espandersi quando l'utente scorre fino alla fine dei contenuti interni.

@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

Questa implementazione si presenta nel seguente modo:

Barra dell'app in basso

Per creare una barra delle app in basso, usa il componibile BottomAppBar. L'utilizzo di questo componibile è molto simile ai componibili della barra dell'app in alto descritti nelle sezioni precedenti di questa pagina. Passi i componibili per i seguenti parametri chiave:

• actions: una serie di icone visualizzate sul lato sinistro della barra. Di solito, si tratta di azioni chiave per la schermata specifica o di elementi di navigazione.
• floatingActionButton: il pulsante di azione mobile visualizzato sul lato destro della 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

Questa implementazione si presenta nel seguente modo:

Risorse aggiuntive

• Documenti Material3 - Barra delle app in alto
• Documenti Material3 - Barra delle app in basso
• Trappola