Questa pagina è stata tradotta dall'API Cloud Translation.

Barre delle app

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

Digitazione	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.

Un esempio di barra delle app superiore e inferiore. — **Figura 1.** Una barra delle app in alto (a sinistra) e una in basso (a destra).

Per implementare una barra delle app superiore e una barra delle app inferiore, utilizza rispettivamente i composabili TopAppBar e BottomAppBar. Ti consentono di creare interfacce coerenti che incapsulano i controlli di navigazione e azione e sono in linea con i principi di Material Design.

Barre delle app in alto

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

Digitazione	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 una quantità moderata di navigazione e azioni.
Grandi: per le schermate che richiedono molte navigazione e azioni.

API surface

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

title: il testo visualizzato nella barra delle app.
navigationIcon: l'icona principale per la navigazione. Viene visualizzato nella a sinistra della barra delle app.
actions: icone che consentono all'utente di accedere alle azioni principali. Vengono visualizzati a destra della barra delle app.
scrollBehavior: determina in che modo la barra delle app superiore risponde allo scorrimento dei contenuti interni della struttura.
colors: determina l'aspetto della barra delle app.

Comportamento di scorrimento

Puoi controllare il comportamento della barra delle app quando l'utente scorre i contenuti interni della struttura indicata. 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 solleva l'interno dell'impalcatura contenuti, la barra delle app in alto si comprime. La barra delle app si espande quando l'utente abbassa il contenuto interno.
exitUntilCollapsedScrollBehavior: simile a enterAlwaysScrollBehavior, anche se la barra delle app si espande ulteriormente quando l'utente raggiunge la fine dei contenuti interni della struttura.
pinnedScrollBehavior: la barra delle app rimane in posizione e non reagisce allo scorrimento.

Gli esempi riportati di seguito implementano diverse di queste opzioni.

Esempi

Le sezioni seguenti forniscono implementazioni per i quattro diversi tipi di barre delle app superiori, inclusi esempi diversi di come puoi controllare il comportamento di scorrimento.

Piccolo

Per creare una barra delle app piccola, utilizza il componibile TopAppBar. Questo è il nella barra delle app più semplice possibile e in questo esempio contiene soltanto un titolo.

L'esempio seguente non passa a TopAppBar un valore per scrollBehavior e quindi 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 è visualizzata come segue:

Un esempio di una barra delle app piccola in alto. — **Figura 2.** Una piccola barra delle app in alto.

Allineato al centro

La barra superiore, allineata al centro, è essenzialmente la stessa della piccola barra delle app, anche se il titolo è centrato all'interno del componente. Per implementarla, utilizza componibile CenterAlignedTopAppBar dedicato.

In questo esempio viene utilizzato enterAlwaysScrollBehavior() per ottenere il valore che passa per scrollBehavior. In questo modo, la barra si comprime quando l'utente fa scorrere il i contenuti che li creano.

@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

Questa implementazione è visualizzata come segue:

Scrivi il testo alternativo qui — **Figura 3.** Una barra delle app superiore allineata al centro.

Medio

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

Come lo snippet precedente, questo esempio utilizza enterAlwaysScrollBehavior() per ottiene 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 viene visualizzata come segue, con una dimostrazione di come viene visualizzato il comportamento di scorrimento da enterAlwaysScrollBehavior():

Figura 4. Una barra delle app in alto allineata al centro.

Grande

Una grande barra superiore delle app è simile al mezzo, sebbene la spaziatura interna tra e le icone sono più grandi e occupano più spazio sullo schermo. Per crearne uno, utilizza il composable LargeTopAppBar.

A differenza degli snippet precedenti, questo esempio utilizza exitUntilCollapsedScrollBehavior() per ottenere il valore trasmesso scrollBehavior. In questo modo, la barra si comprime quando l'utente fa scorrere il i contenuti interni dello scaffold, ma poi si espande quando l'utente scorre fino alla fine contenuto 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

Questa implementazione si presenta nel seguente modo:

Schermata di un'app con una barra in basso che contiene le icone di azione a sinistra e un pulsante di azione mobile a destra. — **Figura 5.** Un esempio di implementazione di una barra delle app superiore di grandi dimensioni.

Barra dell'app in basso

Per creare una barra delle app in basso, usa il componibile BottomAppBar. Utilizzo di questo componibile è molto simile ai componibili della barra delle app in alto descritti nell'articolo sezioni precedenti di questa pagina. Devi passare i composabili per i seguenti parametri chiave:

actions: una serie di icone visualizzate sul lato sinistro della barra. Questi sono spesso azioni chiave per la schermata o elementi di navigazione.
floatingActionButton: il pulsante di azione mobile visualizzato nella a destra 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