Mostrare una barra delle app in alto

Crea una barra delle app in alto per aiutare gli utenti a navigare e accedere alle funzioni della tua app utilizzando il composable TopAppBar.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Creare un componente composable per la barra delle app superiore

Crea una barra delle app superiore utilizzando il composable MediumTopAppBar che si comprime quando l'utente scorre verso il basso nell'area dei contenuti e si espande quando l'utente scorre nuovamente verso l'alto fino all'inizio dei contenuti:

Punti chiave del codice

  • Un Scaffold esterno con un TopBar impostato.
  • Un titolo composto da un singolo elemento Text.
  • Una barra in alto con una singola azione definita.
  • Un'azione IconButton con una funzione lambda onClick per eseguire l'azione.
  • Un IconButton contenente un Icon con un'immagine di icona e un testo di descrizione dei contenuti.
  • Il comportamento di scorrimento per i contenuti interni di Scaffold è definito come enterAlwaysScrollBehavior(). La barra dell'app si comprime quando l'utente solleva i contenuti interni e si espande quando l'utente li abbassa.
  • Oltre a MediumTopBar, che contiene il titolo, puoi utilizzare anche:
    • TopAppBar: da utilizzare per le schermate che non richiedono molto movimento o azioni.
    • CenterAlignedTopAppBar: da utilizzare per le schermate con una sola azione principale.Il titolo è centrato all'interno del componente.
    • MediumTopAppBar: da utilizzare per le schermate che richiedono una quantità moderata di navigazione e azioni.
    • LargeTopAppBar: da utilizzare per le schermate che richiedono molto movimento e azioni. Utilizza un maggiore spaziatura rispetto a MediumTopAppBar e posiziona il titolo sotto le eventuali icone aggiuntive.

Risultati

Figura 1. Una barra dell'app superiore di medie dimensioni.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Scopri come utilizzare una piattaforma standardizzata per creare interfacce utente complesse. La struttura tiene insieme le diverse parti della UI, conferendo alle app un aspetto coerente.
Collezione di guide rapide
Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback