Un layout definisce la struttura visiva che consente a un utente di interagire con la tua app, come in un'attività. Android fornisce una serie di librerie, punti di partenza canonici e tecniche per visualizzare e posizionare i contenuti.
Concetti principali
Rispetta le aree sicure del dispositivo, che includono parti dell'interfaccia utente come i ritagli del display, gli inserti da bordo a bordo, i display laterali, le tastiere software e le barre di sistema.
Da fare:fornisci un layout flessibile per consentire agli utenti di interagire con la tastiera.
Video 1: Fornire un layout flessibile per consentire agli utenti di interagire
Mantieni le interazioni essenziali, come la navigazione principale, in un'area dello schermo accessibile.
Figura 1: i pulsanti di azione mobile (FAB) forniscono un punto di interazione in evidenza e raggiungibile Utilizza il contenimento per raggruppare contenuti correlati e guidare l'utente tra contenuti e azioni.
Figura 2: schede che utilizzano il contenimento esplicito per raggruppare i contenuti con azioni correlate Fornisci un allineamento coerente tra contenuti simili ed elementi dell'interfaccia utente.
Non:interrompere la leggibilità mantenendo una spaziatura incoerente tra elementi simili, il che può rendere i design disordinati.
Da fare:stabilisci una spaziatura coerente tra gli elementi simili.
Figura 3: non interrompere la leggibilità Non limitarti al formato verticale o a un layout ideale: prendi in considerazione le diverse proporzioni, le classi di dimensioni e le risoluzioni che gli utenti potrebbero riscontrare.
Non sovraccaricare l'utente con troppe azioni per visualizzazione.
Quando crei layout personalizzati, tieni presente come i contenuti devono essere posizionati all'interno del layout utilizzando termini di allineamento, vincoli o gravità. Includi come le immagini devono rispondere al contenitore per essere visualizzate correttamente.
Parti di una schermata di app Android tipica
La maggior parte delle app per Android è composta da regioni chiamate barre di sistema, la barra di navigazione e il corpo.
Barre di sistema
La barra di stato e la barra di navigazione, note collettivamente come barre di sistema, visualizzano informazioni importanti come il livello della batteria, l'ora e gli avvisi di notifica e consentono di interagire direttamente con il dispositivo da qualsiasi luogo. Scopri di più sulle barre del sistema.
Regione di navigazione
La navigazione rappresenta le diverse funzionalità che consentono a un utente di navigare all'interno della tua app, accedere ad azioni importanti o alla piattaforma Android.
Regione del corpo
La regione del corpo contiene i contenuti dello schermo. Il contenuto del corpo è composto da parametri di layout e raggruppamenti aggiuntivi. Deve continuare sotto le regioni della barra di navigazione e del sistema.
Dichiara WindowCompat.setDecorFitsSystemWindows(window, false) per gli inserti da bordo a bordo.
Per determinare i pattern di composizione e navigazione appropriati per il tuo layout, cerca di capire in che modo gli utenti interagiscono con i tuoi contenuti e come navigano nell'architettura dell'informazione della tua app. Questa conoscenza può orientare il design verso un approccio più incentrato sull'utente creando un'interfaccia utente su cui gli utenti possono intervenire.
Composizione e struttura dei contenuti
Crea un flusso e un ritmo flessibili con una struttura e metodi di contenimento per i tuoi contenuti.
Struttura di base: utilizza i margini e le colonne per i parapetti visivi
Per iniziare a creare una struttura solida con linee guida coerenti, aggiungi margini e colonne ai layout.
I margini creano spaziatura sui bordi sinistro e destro dello schermo e dei contenuti. Un valore di margine standard per le dimensioni compatte è 16 dp, ma i margini devono adattarsi per adattarsi agli schermi più grandi. I contenuti e le azioni del corpo dell'app devono rientrare e allinearsi a questi margini.
In questo passaggio puoi anche assicurarti che le zone di sicurezza o gli inserti siano inseriti. Gli inserti della barra di sistema impediscono che azioni cruciali vengano nascoste dalle barre di sistema. Per maggiori dettagli, consulta Disegna i contenuti dietro le barre di sistema.
Utilizza le colonne per creare una struttura della griglia flessibile per un allineamento coerente e per fornire una definizione verticale a un layout dividendo i contenuti all'interno dell'area del corpo. I contenuti vengono inseriti nelle aree dello schermo contenenti colonne. Queste colonne danno struttura al layout, offrendo una comoda struttura per disporre gli elementi.
Utilizza una griglia di colonne per allineare i contenuti a una griglia di base, mantenendo però le dimensioni flessibili. La griglia di colonne può adattarsi a diversi fattori di forma modificando le dimensioni e il numero di colonne in base alle dimensioni dello schermo in determinati punti, consentendo al contempo la scalabilità dei contenuti. Evita di essere troppo granulare con la griglia di colonne, per questo serve la griglia di riferimento: fornire unità di spaziatura coerenti.
Fai attenzione a impostare una griglia di righe aggiuntiva, in quanto può limitare la scalabilità orizzontale dei contenuti in base a orientamenti e fattori di forma. In genere, l'impostazione di regole di spaziatura interna garantisce la coerenza visiva necessaria.
Utilizza il contenimento per raggruppare visivamente gli elementi
Per contenimento si intende l'utilizzo combinato di spazi bianchi ed elementi visibili per creare un raggruppamento visivo. Un contenitore è una forma che rappresenta un'area chiusa. In un unico layout, puoi raggruppare elementi che condividono contenuti o funzionalità simili e separarli da altri elementi utilizzando spazi aperti, tipografia e divisori.
Puoi raggruppare elementi simili con spazi bianchi o suddivisioni visibili per aiutare l'utente a navigare nei contenuti.
Il contenimento implicito utilizza gli spazi bianchi per raggruppare visivamente i contenuti e creare i confini dei contenitori, mentre il contenimento esplicito utilizza oggetti come linee di separazione e schede per raggruppare i contenuti.
La figura seguente mostra un esempio di utilizzo del contenimento implicito per contenere l'intestazione e il testo principale. La griglia di colonne viene utilizzata per allineare e creare raggruppamenti. Gli elementi in evidenza sono contenuti esplicitamente nelle schede. Utilizza l'iconografia e la gerarchia dei tipi per una maggiore separazione visiva.
Posizionamento dei contenuti
Android offre diversi modi per gestire gli elementi dei contenuti nei rispettivi contenitori che possono aiutarti a posizionarli in modo appropriato, tra cui gravità, spaziatura e ridimensionamento.
Gravity è uno standard per il posizionamento di un oggetto all'interno di un contenitore potenzialmente più grande per casi d'uso specifici. La figura seguente mostra esempi di posizionamento degli oggetti inizio e centro (1), superiore e orizzontale al centro (2), in basso a sinistra (3) e in basso a destra (4).
Scalabilità
La scalabilità è fondamentale per adattarsi a contenuti dinamici, all'orientamento del dispositivo e alle dimensioni dello schermo. Gli elementi possono rimanere fissi o essere scalati.
È importante tenere presente come le immagini vengono visualizzate all'interno dei relativi contenitori con ridimensionamento e posizione per assicurarsi che vengano visualizzate come vuoi nonostante il contesto del dispositivo, altrimenti l'elemento principale dell'immagine potrebbe essere tagliato, le immagini potrebbero essere troppo piccole o grandi per il layout o potrebbero verificarsi altri effetti indesiderati.
I contenuti non annotati possono apparire in modo diverso da quanto previsto o desiderato.
Contenuti fissati
Molti elementi hanno interazioni, scorrimento e posizionamento integrati con slot o strutture. Alcuni elementi possono essere modificati in modo da rimanere fissi anziché reagire allo scorrimento, ad esempio i pulsanti di azione flottanti (FAB) che contengono azioni fondamentali.
Allineamento
Utilizza AlignmentLine per creare linee di allineamento personalizzate, che i layout principali possono utilizzare per allineare e posizionare i layout secondari.
Non:interrompere la leggibilità mantenendo spaziature incoerenti tra elementi simili, il che può rendere i design disordinati.
Da fare:stabilisci una spaziatura coerente tra gli elementi simili.
Layout dei componenti
I componenti di Material 3 forniscono le proprie configurazioni e i propri stati per l'interazione e i contenuti.
Compose fornisce layout pratici per combinare i componenti Material in schemi di schermate comuni. I composabili come Scaffold forniscono spazi per vari componenti e altri elementi della schermata. Scopri di più su Material Component e Layout.
Layout e schemi di navigazione
Se la tua app contiene più destinazioni che gli utenti possono visitare, ti consigliamo di utilizzare combinazioni di layout e navigazione comunemente utilizzate da altre app. Poiché molti utenti possiedono già i modelli mentali per queste associazioni, la tua app sarà più intuitiva per loro.
Accoppiamenti di layout e navigazione
La barra di navigazione e il riquadro di navigazione modale vengono utilizzati come pattern di navigazione principali per le visualizzazioni del layout principale e le destinazioni di navigazione principali.
La barra di navigazione può contenere da tre a cinque destinazioni di navigazione nello stesso livello della gerarchia. Questo componente si traduce nella barra di navigazione per gli schermi di grandi dimensioni.
Sebbene il riquadro di navigazione a scomparsa possa contenere più di cinque destinazioni, il pattern non è ideale come la barra di navigazione perché è necessario raggiungere la barra superiore nelle dimensioni compatte.
Le schede di Material 3 e la barra delle app in basso sono modelli di navigazione secondari che puoi utilizzare per integrare la navigazione principale o visualizzare nelle visualizzazioni per bambini.
Azioni di layout
Fornisci controlli per consentire agli utenti di eseguire azioni. I pattern comuni includono azioni della barra superiore, pulsante di azione mobile (FAB) e menu.
Per le azioni di massima importanza, un FAB offre all'utente un pulsante grande e in evidenza. Fornisci una sola azione alla volta a questo livello. Un FAB può essere visualizzato in più dimensioni e in un formato espanso, che include un'etichetta. Usa Scaffold per bloccare un pulsante flottante, assicurandoti che sia sempre visibile anche quando scorri.
Puoi posizionare le azioni secondarie nella barra superiore o, se sono raggruppate vicino ai contenuti correlati, all'interno della pagina.
Per eventuali azioni aggiuntive che non sono necessarie immediatamente o di frequente, aggiungile in un menu extra.
Layout canonici
Utilizza i layout canonici come punto di partenza, ovvero composizioni pronte all'uso che aiutano ad adattare i layout a casi d'uso e dimensioni dello schermo comuni. Questi layout sono estetici e funzionali e derivano dalle linee guida di Material 3.
Il framework Android include componenti specializzati che semplificano e rendono affidabile l'implementazione dei layout utilizzando le API Jetpack Compose o Views.
Layout dei dettagli dell'elenco
Un layout con dettagli dell'elenco consente agli utenti di esplorare elenchi di articoli con informazioni descrittive, esplicative o di altro tipo, ovvero i dettagli dell'articolo. Per le dimensioni dello schermo compatte, sono visibili solo la visualizzazione elenco o quella dettagliata. Gli elenchi, che mostrano una raccolta di contenuti in un layout basato su righe, costituiscono la forma più comune di layout per le app. La visualizzazione elenco è ideale per app di messaggistica, gestori dei contatti, browser di file o qualsiasi app in cui i contenuti possono essere organizzati come elenco di elementi che rivelano informazioni aggiuntive.
I contenuti possono essere statici o dinamici.
- I contenuti dinamici sono contenuti pubblicati dalla tua app in tempo reale e sono ideali per mostrare contenuti generati dagli utenti o riflettere le preferenze o le azioni dell'utente. Ad esempio, immagina un'app di foto con un elenco scorrevole di foto generate dagli utenti, univoco per ogni utente e che cambia man mano che l'utente carica altre immagini. Queste immagini sono contenuti dinamici.
- I contenuti statici rappresentano contenuti hardcoded, che possono essere modificati solo apportando modifiche direttamente al codice dell'app. Alcuni esempi di contenuti statici sono le immagini e il testo che ogni utente potrebbe vedere.
Il file Figma Ora su Android fornisce diversi esempi di layout. L'esempio seguente mostra una raccolta di contenuti unidimensionale.
Consulta Elenchi di Material 3 per ulteriori indicazioni di progettazione su componenti e specifiche degli elenchi.
Layout del feed
Un layout del feed organizza gli elementi di contenuti equivalenti in una griglia configurabile per visualizzare in modo rapido e pratico una grande quantità di contenuti. Consulta le linee guida del Materiale 3 per l'utilizzo delle schede in una raccolta. I feed possono essere configurati in base a elenchi o griglie su display compatti, in genere in schede o riquadri. I contenuti possono essere dinamici, il che significa che vengono "inviati" da un'origine esterna dinamica come un'API.
Un layout a griglia è composto da righe e colonne costituite da principi di contenimento impliciti o espliciti. Per ulteriori informazioni, consulta la sezione Contenimento di questa pagina. Un layout a griglia può essere applicato in modo più rigido o alternato per variare le righe e le colonne. Entrambi devono avere un'applicazione coerente di spaziatura e logica per evitare di confondere gli utenti. Consulta le linee guida di Material 3 sulla progettazione dei feed.
Puoi implementare un layout del feed in Scrivi con elenchi o griglie lazy o in Visualizzazioni con RecyclerView o CardView.
Layout del riquadro di supporto
Una visualizzazione mobile potrebbe richiedere contenuti o controlli di supporto. In genere, sotto forma di schede o finestre di dialogo, possono contribuire a mantenere la visualizzazione principale chiara e ordinata. Consulta le linee guida di M3 per l'utilizzo del layout canonico del riquadro di supporto.
Scopri le linee guida M3 per i fogli inferiori.
Layout relativi
Input, contenuti o altre azioni possono essere visualizzati in relazione tra loro o vincolati a un contenitore principale. I layout possono essere più personalizzati, ma assicurati di seguire raggruppamenti, colonne e spaziature coerenti.
I layout possono anche utilizzare una combinazione di tipi di layout. Ad esempio, puoi abbinare un carousel o uno scorrimento orizzontale a schede verticali. In alternativa, puoi presentare un grafico personalizzato con dati dell'elenco verticale.
Puoi presentare i contenuti in righe o colonne con scorrimento con righe e colonne lazy.
Scopri di più sulle nozioni di base del layout di Compose e su cosa è costituito un composable.
L'autenticazione è un layout relativo comune, come mostrato nella figura seguente.
Il layout a schermo intero è un altro layout comune, utilizzato in modalità immersiva.
Se utilizzi le visualizzazioni anziché Componi, puoi utilizzare
ConstraintLayout per disporre le visualizzazioni in base alle relazioni tra le visualizzazioni con lo stesso genitore e il layout principale, consentendo layout di grandi dimensioni e complessi.
ConstraintLayout ti consente di creare interamente tramite trascinamento anziché modificare il codice XML utilizzando l'editor di layout. Scopri di più sulla creazione di un'interfaccia utente con Editor di layout.
Adattare i layout
Il design adattivo è la pratica di progettare layout che si adattano a breakpoint e dispositivi specifici. Di solito prendiamo in considerazione la larghezza del dispositivo per determinare dove deve cambiare o adattarsi il layout. Sia il web che Android utilizzano concetti di responsive design, come griglie e immagini flessibili, per creare layout che rispondano meglio al contesto.
Per le linee guida di progettazione sull'adattamento dei layout alle dimensioni dello schermo espanse, leggi la guida per gli sviluppatori su come supportare schermi di dimensioni diverse in Compose e la pagina M3 Applicazione del layout. Puoi anche consultare la galleria di Android per le pagine canoniche per schermi grandi per trovare ispirazione e informazioni sull'implementazione di layout per schermi grandi.
Sebbene non sia necessario che ogni app sia disponibile su tutte le dimensioni dello schermo, questa scelta consente ai tuoi utenti di avere più libertà in termini di ergonomia, usabilità e qualità dell'app.
- Puoi progettare schermate chiave (che comunicano i concetti essenziali della tua app) con dimensioni dei gruppi come interruzioni per fungere da linee guida.
- In alternativa, progetta i contenuti in modo che agiscano in modo reattivo indicando come devono essere vincolati, espansi o riorganizzati.
Per saperne di più sui layout, consulta la pagina Informazioni sul layout di Material Design 3 (M3).
WebView
Una visualizzazione WebView mostra le pagine web in-app. Nella maggior parte dei casi, consigliamo di utilizzare un browser web standard, come Chrome, per fornire contenuti all'utente. Per approfondire i browser web, leggi la guida su come richiamare un browser con un intento.