I pixel indipendenti dalla densità (dp) e i pixel scalabili (sp) sono essenziali per creare layout e presentare caratteri che rispondano in modo uniforme all'ampia 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 riferimento, mantieni le misure di 4 e 8.
- Indica le specifiche in dp e sp anziché in pixel.
- Esporta immagini bitmap/raster per tutti i bucket.
- Progetta tenendo presente un approccio responsive, con classi di dimensioni, risoluzioni e proporzioni diverse.
- Pixel indipendenti dalla densità (dp): i pixel indipendenti dalla densità sono unità flessibili che si adattano in base alle dimensioni dello schermo. Si basano sulla densità fisica dello schermo. Queste unità si riferiscono a uno schermo di 160 dpi (punti per pollice), su cui 1 dp è approssimativamente uguale a 1 px.
- Pixel scalabili (sp): i pixel scalabili hanno la stessa funzione dei dp, ma per i caratteri. Il valore predefinito di un elemento sp è uguale al valore predefinito di un elemento dp. Il sistema Android calcola le dimensioni effettive dei caratteri da utilizzare in base al dispositivo e alle preferenze dell'utente impostate nell'app Impostazioni del dispositivo Android.
La differenza principale tra queste unità di misura è che i pixel scalabili mantengono le impostazioni dei caratteri di un utente. Gli utenti che hanno impostato dimensioni del testo più grandi per l'accessibilità vedono le dimensioni dei caratteri corrispondenti alle loro preferenze. Scopri come modificare le dimensioni del carattere in Scrivi.
Android utilizza queste unità per adattarsi e tradurre in base alla 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 dell'interfaccia utente con le stesse dimensioni in pixel appaiono più grandi su schermi a bassa densità e più piccoli su schermi ad alta densità. Ecco perché non devi dichiarare le misurazioni in pixel.
Android raggruppa le gamme di densità dello schermo in "bucket" e le utilizza per fornire al tuo dispositivo l'insieme ottimale di asset. I bucket di densità più utilizzati sono mdpi, hdpi, xhdpi, xxhdpi e xxxhdpi (nodpi e anydpi fanno riferimento a un bucket che non si adatta alla risoluzione del dispositivo, in genere utilizzato per gli elementi drawable vettoriali) e corrispondono ciascuno a un file di risorse della tua app.
Per calcolare il dp:
dp = (larghezza in pixel * 160) / densità dello schermo
Griglie
Griglia di riferimento
La creazione di un layout con una griglia di base consente di creare spaziature e allineamenti coerenti nell'interfaccia utente. L'interfaccia utente di Android utilizza una griglia di 8 dp per il layout, i componenti e la spaziatura.
Gli elementi più piccoli, come icone, testo e alcuni elementi all'interno dei componenti, sono meglio allineati a una griglia di 4 dp.
Griglia di 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 posizionati nelle aree dello schermo che contengono colonne. Allinea i contenuti a una griglia sottostante, ma mantieni le dimensioni flessibili. Scopri le nozioni di base su come configurare una griglia di colonne e applicare i contenuti in Nozioni di base sul layout.
Consulta la pagina Layout canonici di Material 3 per informazioni dettagliate sulla creazione di layout flessibili su diversi fattori di forma.
Classi di dimensioni
Le classi di dimensioni della finestra sono un insieme di breakpoint dell'area visibile che ti aiutano a progettare, sviluppare e testare layout di applicazioni adattabili e responsive. Android suddivide le classi di dimensioni della finestra in tre: compatta, media ed espansa. Scopri di più sulle classi di dimensioni della finestra.
Proporzioni
Le proporzioni sono il rapporto tra la larghezza e l'altezza di un elemento. Le proporzioni vengono indicate come larghezza:altezza.
Per mantenere la coerenza del layout, utilizza proporzioni coerenti per elementi come immagini, piattaforme 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