I pixel indipendenti dalla densità (dp) e i pixel scalabili (sp) sono essenziali per creare layout e presentare caratteri che rispondono in modo uniforme alla vasta gamma di densità dello schermo, classi di dimensioni, fattori di forma e proporzioni che compongono i dispositivi Android.
Concetti principali
- Se utilizzi una griglia di base, attieniti alle misurazioni di 4 e 8.
- Prendi nota delle specifiche in dp e sp, anziché in pixel.
- Esporta la grafica bitmap (raster) per tutti i bucket.
- Progetta con una mentalità adattabile, tenendo presente le diverse classi di dimensioni, risoluzioni e proporzioni.
- Pixel indipendenti dalla densità (dp): i pixel indipendenti dalla densità sono unità flessibili che vengono scalate per avere dimensioni uniformi su qualsiasi schermo. Si basano sulla densità fisica dello schermo. Queste unità sono relative a uno schermo da 160 dpi (punti per pollice), su cui 1 dp è approssimativamente uguale a 1 px.
- Pixel scalabili (sp): i pixel scalabili svolgono la stessa funzione dei dp, ma per i caratteri. Il valore predefinito di un sp è lo stesso del valore predefinito di un dp. Il sistema Android calcola le dimensioni effettive del carattere da utilizzare in base al dispositivo e alle preferenze dell'utente impostate nelle impostazioni del dispositivo.
La differenza principale tra queste unità di misura è che i pixel scalabili conservano le impostazioni dei caratteri di un utente. Gli utenti che hanno impostazioni di testo più grandi per l'accessibilità vedono le dimensioni dei caratteri corrispondere alle loro preferenze per le dimensioni del testo. Scopri come modificare le dimensioni dei caratteri in Compose.
Android utilizza queste unità per facilitare la scalabilità e la traduzione nella gamma di dispositivi e risoluzioni.
Bucket di densità
Gli schermi ad alta densità hanno più pixel per pollice rispetto a quelli a bassa densità. Di conseguenza, gli elementi UI delle stesse dimensioni in pixel appaiono più grandi sugli schermi a bassa densità e più piccoli su quelli ad alta densità. Per questo motivo non devi dichiarare le misurazioni in pixel.
Android raggruppa gli intervalli di densità dello schermo in "bucket" e li utilizza per fornire il set ottimale di asset al tuo dispositivo. I bucket di densità di uso comune sono mdpi, hdpi, xhdpi, xxhdpi, e xxxhdpi (nodpi e anydpi si riferiscono a un bucket che non viene scalato in base alla risoluzione del dispositivo, in genere utilizzato per i disegni vettoriali), ognuno dei quali corrisponde a un file di risorse della tua app.
Per calcolare i dp:
dp = (larghezza in pixel * 160) / densità dello schermo
Griglia di base
La creazione con una griglia sottostante consente di creare spaziatura e allineamento coerenti nell'interfaccia utente. L'interfaccia utente di Android utilizza una griglia di 8 dp per layout, componenti e spaziatura.
Gli elementi più piccoli, come icone, tipo e alcuni elementi all'interno dei componenti, sono allineati meglio a una griglia di 4 dp.
Griglie di layout
Le griglie sono la spina dorsale di qualsiasi layout. Considera la gerarchia, la quantità e persino il messaggio dei contenuti.
Griglia gerarchica
Una griglia gerarchica viene creata tenendo presente la gerarchia o l'importanza dei contenuti. Pensa al layout di un giornale: una storia principale coerente occupa la maggior parte del layout, mentre una colonna più piccola mostra gli articoli precedenti.
Quando si adatta alle dimensioni dello schermo, un layout gerarchico può essere ridimensionato e rivelare le celle della griglia.
Griglia modulare
Una griglia modulare è configurata in colonne e righe coerenti, creando un sistema di griglia rettangolare per allineare i contenuti. Le griglie modulari sono adatte per i contenuti con importanza e dimensioni simili, come una galleria di schede.
Una griglia modulare adattabile può aggiungere altre celle della griglia e i contenuti al suo interno possono essere agganciati o adattati a celle della griglia diverse. Le celle della griglia possono rimanere coerenti tra le dimensioni o essere ridimensionate in base alle esigenze dei contenuti.
Griglia a colonne
Le colonne creano una struttura a griglia 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 che contengono le colonne. Allinea con una griglia sottostante per allineare i contenuti, ma mantieni le dimensioni flessibili.
Scopri le nozioni di base su come configurare una griglia a colonne e applicare i contenuti in Nozioni di base sul layout. La griglia a colonne può adattarsi a fattori di forma diversi modificando le dimensioni e il numero di colonne in base alle dimensioni dello schermo in determinati punti, consentendo al contempo di scalare i contenuti.
Classi di dimensioni
Le classi di dimensioni delle finestre sono un insieme di punti di interruzione del viewport che ti aiutano a progettare, sviluppare e testare i layout delle applicazioni adattabili e reattive. Android suddivide le classi di dimensioni delle finestre in 3: Compatta, Media ed Espansa. Scopri di più sulle classi di dimensioni delle finestre.
Proporzioni
Le proporzioni sono la proporzione tra la larghezza e l'altezza di un elemento. Le proporzioni vengono scritte come larghezza:altezza.
Per mantenere la coerenza del layout, utilizza proporzioni coerenti su elementi come immagini, superfici e dimensioni dello schermo.
Per l'interfaccia utente sono consigliate le seguenti proporzioni:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3