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à dello schermo, classi di dimensioni, fattori di forma e proporzioni dei dispositivi Android.
Possessi guadagnati
- Se utilizzi una griglia di base, applica le misure pari a 4 e 8.
- Annota le specifiche in dp e sp, anziché in pixel.
- Esporta grafica bitmap/raster per tutti i bucket.
- Progetta tenendo a mente le classi di dimensioni, le risoluzioni e le proporzioni.
- Pixel indipendenti dalla densità (dp): i pixel indipendenti dalla densità sono unità flessibili ridimensionate per avere dimensioni uniformi su qualsiasi schermo. Questi 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 un sp corrisponde al valore predefinito di un 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 con impostazioni di testo più grandi per l'accessibilità possono vedere le dimensioni del carattere che preferiscono. Scopri come modificare le dimensioni del carattere in Compose.
Android usa queste unità per scalare e tradurre su tutta la 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 con le 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 intervalli di densità dello schermo in "bucket" e li utilizza per pubblicare l'insieme ottimale di asset sul tuo dispositivo. I bucket di densità
più comunemente utilizzati sono mdpi, hdpi, xhdpi, xxhdpi e xxxhdpi (nodpi e
anydpi fanno riferimento a un bucket non scalabile in base alla risoluzione del dispositivo, generalmente
utilizzati per i 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
Usare una griglia sottostante permette di creare spazi e allineamenti coerenti nell'interfaccia utente. La UI 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 da 4 dp.
Griglia a colonne
Le colonne creano una struttura a griglia per fornire la definizione verticale a un layout suddividendo i contenuti all'interno dell'area del corpo. I contenuti vengono posizionati nelle aree della schermata che contengono colonne. Allinea i contenuti a una griglia sottostante per allineare i contenuti, ma mantieni le dimensioni flessibili. Per conoscere le nozioni 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 informazioni dettagliate sulla creazione di layout flessibili in base ai fattori di forma.
Classi di dimensioni
Le classi di dimensioni delle finestre sono un insieme di punti di interruzione dell'area visibile comprovati che consentono di progettare, sviluppare e testare layout delle applicazioni adattabili e adattivi. Android suddivide le classi di dimensioni delle finestre in 3: Compatta, Medie ed Espansa. Scopri di più sulle classi di dimensioni delle finestre.
Proporzioni
Le proporzioni sono la proporzione 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.
È consigliabile utilizzare le seguenti proporzioni in tutta l'interfaccia utente:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3