Crea un flusso e un ritmo flessibili con metodi di struttura e contenimento per i tuoi contenuti.
1. Struttura di base
Per iniziare a creare una struttura solida con protezioni coerenti, aggiungi margini e colonne ai layout.
I margini forniscono la 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 ospitare schermi più grandi. Il corpo e le azioni dell'app devono rimanere all'interno e in linea con questi margini.
In questo passaggio puoi anche assicurarti che le zone sicure o gli inserti siano inseriti. I rientri della barra di sistema impediscono che le azioni cruciali vengano nascoste sotto le barre di sistema. Per maggiori dettagli, consulta 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 danno struttura al layout, fornendo una struttura comoda per disporre gli elementi.
Utilizza una griglia a colonne per allineare i contenuti a una griglia sottostante, ma mantieni le dimensioni flessibili. La griglia a 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 di scalare i contenuti. Evita di utilizzare una griglia di colonne troppo granulare. A questo scopo, utilizza la griglia di base, che fornisce unità di spaziatura coerenti.
Fai attenzione a non creare una griglia di righe di accompagnamento, perché può limitare il ridimensionamento orizzontale dei contenuti in base a orientamenti e fattori di forma. In genere, l'impostazione di regole di spaziatura interna fornirà la coerenza visiva necessaria.
Inizia ad aggiungere il testo alla struttura del layout. I margini proteggono i contenuti dai bordi dello schermo. Le colonne forniscono una struttura di spaziatura e allineamento coerente.
2. Applica contenimento
Utilizza il contenimento per raggruppare visivamente gli elementi.
Il contenimento si riferisce all'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 gli elementi che condividono contenuti o funzionalità simili e separarli dagli altri elementi utilizzando spazio aperto, tipografia e separatori.
Puoi raggruppare elementi simili con spazi bianchi o divisioni visibili per aiutare l'utente a navigare tra i contenuti.
Il contenimento implicito utilizza lo spazio bianco per raggruppare visivamente i contenuti e creare i limiti 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 delle colonne viene utilizzata per allineare e creare raggruppamenti. I punti salienti sono contenuti esplicitamente nelle schede. Utilizzo dell'iconografia e della gerarchia dei tipi per una maggiore separazione visiva.
3. Posizionare i 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 scalabilità.
Gravity è uno standard per il posizionamento di un oggetto all'interno di un container potenzialmente più grande per casi d'uso specifici. La figura seguente mostra esempi di posizionamento degli oggetti all'inizio e al centro (1), in alto e al centro orizzontalmente (2), in basso a sinistra (3) e alla fine e a destra (1).
4. Scalare i contenuti
Il ridimensionamento è fondamentale per adattarsi a contenuti dinamici, orientamento del dispositivo e dimensioni dello schermo. Gli elementi possono rimanere fissi o essere scalati.
È importante notare come le immagini vengono visualizzate all'interno dei contenitori con scalabilità e posizione per assicurarsi che appaiano come desideri, nonostante il contesto del dispositivo. In caso contrario, il punto focale principale dell'immagine potrebbe apparire tagliato, le immagini potrebbero essere troppo piccole o grandi per il layout o potrebbero verificarsi altri effetti indesiderati.
I contenuti non annotati potrebbero essere visualizzati in modo diverso da come ti aspetti o desideri.
Contenuti fissati
Molti elementi hanno interazioni, scorrimento e posizionamento integrati con slot o strutture. Alcuni elementi possono essere modificati in modo che rimangano fissi anziché reagire allo scorrimento, ad esempio i pulsanti di azione rapida (FAB) che contengono azioni critiche.
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
Layout del componente
I componenti Material 3 forniscono configurazioni e stati propri 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 e sul layout di Material.