I pixel indipendenti dalla densità (dp) e i pixel scalabili (sp) sono essenziali per creare layout e presentare caratteri che rispondono in modo uniforme all'ampia gamma di densità, classi di dimensioni, fattori di forma e proporzioni dello schermo che compongono i dispositivi Android.
Possessi guadagnati
- Se utilizzi una griglia di base, attieniti alle misurazioni di 4 e 8.
- Annota le specifiche in dp e sp anziché in pixel.
- Esporta grafica bitmap/raster per tutti i bucket.
- Progetta con un approccio reattivo tenendo in considerazione classi di dimensioni, risoluzioni e proporzioni diverse.
- Pixel indipendenti dalla densità (dp): i pixel indipendenti dalla densità sono unità flessibili che si adattano in modo da avere dimensioni uniformi su qualsiasi schermo. Si basano sulla densità fisica dello schermo. Queste unità sono relative a uno schermo di 160 dpi (punti per pollice), in cui 1 dp equivale approssimativamente a 1 px.
- Pixel scalabili (sp): i pixel scalabili svolgono la stessa funzione di dp, ma per i caratteri. Il valore predefinito di sp corrisponde a quello di 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 dell'utente. Gli utenti che usano impostazioni di testo più grandi per l'accessibilità vedranno le dimensioni dei caratteri corrispondenti alle loro preferenze per le dimensioni del testo. Scopri come modificare le dimensioni dei caratteri in Scrivi.
Android usa queste unità per scalare e tradurre su tutta la gamma di dispositivi e risoluzioni.
Bucket densità
Gli schermi ad alta densità hanno più pixel per pollice rispetto a quelli a bassa densità. Di conseguenza, gli elementi UI con le stesse dimensioni in pixel appaiono più grandi sugli schermi a bassa densità e più piccoli sugli schermi 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 pubblicare l'insieme ottimale di risorse sul tuo dispositivo. I bucket di densità più comunemente utilizzati sono mdpi, hdpi, xhdpi, xxhdpi e xxxhdpi (nodpi e anydpi si riferiscono a un bucket non scalabile in base alla risoluzione del dispositivo, generalmente utilizzato per i disegni di disegno vettoriali), ciascuno corrispondente a un file di risorse della tua app.
Per calcolare il dp:
dp = (larghezza in pixel * 160) / densità schermo
Griglie
Griglia di riferimento
L'utilizzo di una griglia sottostante consente di creare una spaziatura e un allineamento coerenti nell'interfaccia utente. La UI di Android utilizza una griglia da 8 dp per layout, componenti e spaziatura.
Gli elementi più piccoli, come icone, tipo e alcuni elementi all'interno dei componenti, sono allineati al meglio su una griglia da 4 dp.
Griglia delle colonne
Le colonne creano una struttura a griglia che fornisce la definizione verticale di un layout suddividendo i contenuti all'interno dell'area del corpo. I contenuti sono posizionati nelle aree della schermata che contengono colonne. Allineati a una griglia sottostante per allineare i contenuti, ma mantieni un dimensionamento flessibile. Per le informazioni di base su come impostare una griglia a colonne e applicare i contenuti, consulta Nozioni di base sul layout.
Consulta la pagina Layout canonici di Material 3 per dettagli sulla creazione di layout flessibili in vari fattori di forma.
Classi di dimensioni
Le classi di dimensioni delle finestre sono un insieme di punti di interruzione dell'area visibile "guidata" che aiutano a progettare, sviluppare e testare layout delle applicazioni adattabili e adattivi. Android suddivide le classi di dimensioni delle finestre in tre: Compatta, Media ed Espansa. Leggi ulteriori informazioni sul supporto di schermi di dimensioni diverse.
Proporzioni
Le proporzioni sono le proporzioni tra la larghezza di un elemento e la sua altezza. Le proporzioni sono scritte come larghezza:altezza.
Per mantenere la coerenza del layout, utilizza proporzioni coerenti per elementi come immagini, superfici e dimensioni dello schermo.
Si consiglia di utilizzare le seguenti proporzioni nell'interfaccia utente:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3