Crea un flusso e un ritmo flessibili con una struttura e metodi di contenimento per i tuoi contenuti. Inizia progettando i contenitori di layout, quindi aggiungi i contenuti.
1. Struttura di base: griglia di layout per guidare i contenuti
Per iniziare a creare una struttura solida con guardrail coerenti, aggiungi margini e colonne ai layout.
I margini forniscono spaziatura sui bordi sinistro e destro dello schermo e dei contenuti. Un valore di margine standard per le dimensioni compatte è di 16 dp, ma i margini devono adattarsi per ospitare schermi più grandi. I contenuti e le azioni del corpo dell'app devono rimanere all'interno di questi margini e allinearsi a essi.
In questo passaggio puoi anche assicurarti che le zone sicure o gli inset siano inseriti. Gli inset della barra di sistema impediscono che le azioni cruciali finiscano sotto le barre di sistema. Dovresti disegnare i contenuti dietro le barre di sistema.
Utilizza le colonne per creare una struttura a 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 le colonne. Queste colonne conferiscono struttura al layout, fornendo una struttura pratica per disporre gli elementi.
L'importanza dei contenuti, o gerarchia, può contribuire a determinare il tipo di griglia di layout per conferire maggiore struttura. Se i contenuti hanno una gerarchia chiara, è appropriata una griglia di layout gerarchica, ad esempio un layout editoriale o una schermata dei dettagli con un'intestazione grande e un'immagine principale.
Una griglia modulare è adatta per contenuti e layout ugualmente importanti ma molto strutturati, come una galleria fotografica.
Scegli una griglia di colonne per layout unidirezionali e costantemente reattivi o quando hai bisogno di maggiore flessibilità.
Indipendentemente dal tipo, la griglia di layout deve adattarsi anche alle dimensioni e ai fattori di forma.
Questo esempio utilizza una griglia di colonne per allineare i contenuti a una griglia sottostante mantenendo le dimensioni flessibili. Per adattarsi a diversi fattori di forma, la griglia di colonne modifica le dimensioni e il numero di colonne in base alle dimensioni dello schermo, il che consente anche di scalare i contenuti. Evita di essere troppo granulare con la griglia di layout. Utilizza invece la griglia di base per fornire unità di spaziatura coerenti.
Inizia ad aggiungere testo alla struttura del layout. I margini proteggono i contenuti dai bordi dello schermo. Le colonne forniscono una struttura di spaziatura e allineamento coerente.
In alternativa, utilizza una griglia di layout gerarchica per mantenere in ordine la schermata dei dettagli.
Inizia con una griglia di layout coerente. Se i contenuti lo richiedono, interrompi la griglia. Anche in questo caso, potresti scoprire che un'altra griglia si allinea comunque alle esigenze dei tuoi contenuti.
Scopri di più sui contenitori di layout, come i pager e il layout di flusso.
Manoscritto e muratura sono altri tipi di griglie di layout.
Qualunque griglia di layout tu scelga può anche utilizzare il concetto di contenimento dei riquadri per raggruppare i contenuti per i layout adattivi. Ad esempio, l'esempio utilizzato è una schermata dei dettagli, un riquadro che potrebbe essere mostrato in un layout elenco-dettagli.
2. Applicare il contenimento
Utilizza il contenimento per raggruppare visivamente gli elementi.
Il contenimento si riferisce all'utilizzo combinato di spazi vuoti ed elementi visibili per creare un raggruppamento visivo. Un contenitore è una forma che rappresenta un'area chiusa. In un singolo layout, puoi raggruppare gli elementi che condividono contenuti o funzionalità simili e separarli da altri elementi utilizzando spazi aperti, tipografia e divisori.
Android utilizza righe, colonne e riquadri come blocchi predefiniti, quindi puoi progettare il contenimento in modo simile. Raggruppa gli elementi simili con spazi vuoti o divisioni visibili per aiutarti a navigare tra i contenuti.
Il contenimento implicito utilizza spazi vuoti per raggruppare visivamente i contenuti per creare i bordi dei contenitori, mentre il contenimento esplicito utilizza oggetti come linee di divisione 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. I punti salienti sono contenuti esplicitamente all'interno delle schede. Utilizzo di iconografia e gerarchia dei tipi per una maggiore separazione visiva.
3. Posizionare i contenuti
Con una griglia di layout scelta e i contenuti nei contenitori, Android offre vari modi per gestire gli elementi dei contenuti e posizionarli, con blocchi predefiniti e modificatori di base o contenitori di layout come griglia e flexbox.
Valuta se i contenuti sono unidimensionali o bidimensionali. Ad esempio, i contenuti possono scorrere orizzontalmente, verticalmente o in entrambe le direzioni.
Come mostrato nella figura seguente, un layout di autenticazione può utilizzare un layout a griglia bidimensionale.
Gli elementi dell'interfaccia utente possono anche essere flessibili e scorrere in una dimensione, come i filtri o i tag dei contenuti. Scopri di più su flexbox.
I layout possono anche utilizzare una combinazione di tipi di layout. Ad esempio, potresti abbinare un carosello o uno scorrimento orizzontale a schede verticali. In alternativa, potresti presentare un grafico personalizzato con dati di elenco verticali.
Puoi presentare i contenuti in righe o colonne scorrevoli con righe e colonne lazy.
Allineamento
Analogamente al flusso e all'allineamento del layout automatico, puoi specificare la disposizione degli elementi dell'interfaccia utente e l'allineamento.
Utilizza AlignmentLine per creare linee di allineamento personalizzate, che i layout principali
possono utilizzare per allineare e posizionare i relativi elementi secondari.
Cosa fare
Cosa non fare
4. Scalare e ritagliare i contenuti
La scalabilità è fondamentale per adattarsi a contenuti dinamici, orientamento del dispositivo e dimensioni dello schermo. Gli elementi possono rimanere fissi o essere scalati.
Specifica come scalare e posizionare le immagini all'interno dei relativi contenitori per assicurarti che vengano visualizzate correttamente su qualsiasi dispositivo. In caso contrario, il punto focale principale di un'immagine potrebbe essere tagliato oppure l'immagine potrebbe essere troppo piccola o troppo grande per il layout.
Adatta le proporzioni e gli orientamenti dei diversi dispositivi con scalabilità e ritaglio appropriati. Poiché le proporzioni possono variare in modo significativo, specifica come i contenuti gestiscono questi scenari.
Ad esempio, un'immagine hero a larghezza intera occupa l'intero schermo di uno smartphone in orientamento orizzontale.
Cosa fare
Cosa non fare
Se i contenuti devono mantenere le proporzioni, ad esempio i video solo verticali, limita le proporzioni e bilancia lo spazio vuoto.
Cosa non fare
Contenuti fissati
Molti componenti hanno interazioni, scorrimento e posizionamento integrati con slot o scaffold, come le barre delle app. Alcuni elementi possono essere modificati in modo che rimangano fissi anziché reagire allo scorrimento, ad esempio i pulsanti di azione mobile (FAB) che ospitano azioni critiche. Fissa gli elementi per una migliore messa a fuoco in determinati casi d'uso, ad esempio fissa un input di testo a una tastiera per evitare input nascosti.
Per l'input di testo, come la messaggistica e l'autenticazione, l'input è collegato alla tastiera e viene data la massima attenzione.
Componenti nel layout
I componenti Material 3 forniscono le proprie configurazioni e stati per l'interazione e i contenuti.
Compose fornisce layout pratici per combinare i componenti Material in pattern di schermata comuni. I composable come Scaffold forniscono slot per vari componenti e altri elementi dello schermo. Scopri di più sui componenti Material e sul layout.