Le classi di dimensioni delle finestre sono un insieme di punti di interruzione dell'area visibile con i comandi vocali che ti consentono di progettare, sviluppare e testare layout adattabili/adattivi. I punti di interruzione bilanciano la semplicità del layout con la flessibilità di ottimizzare l'app per casi unici.
Le classi di dimensioni della finestra classificano l'area di visualizzazione disponibile per la tua app come compatta, media o espansa. La larghezza e l'altezza disponibili sono classificate separatamente, quindi in qualsiasi momento la tua app prevede due classi di dimensioni delle finestre: una per la larghezza e una per l'altezza. In genere, la larghezza disponibile è più importante dell'altezza disponibile a causa dell'ubiquità dello scorrimento verticale, pertanto la classe delle dimensioni della finestra della larghezza è probabilmente più pertinente all'UI della tua app.
Come mostrati nelle figure, i punti di interruzione consentono di continuare a pensare ai layout in termini di dispositivi e configurazioni. Ogni punto di interruzione della classe di dimensione rappresenta un caso tipico degli scenari tipici dei dispositivi, il che può essere un utile quadro di riferimento per la progettazione dei layout basati sui punti di interruzione.
| Classe dimensioni | Punto di interruzione | Rappresentazione del dispositivo |
|---|---|---|
| Larghezza compatta | larghezza < 600 dp | 99,96% degli smartphone in verticale |
| Larghezza media | 600 dp ≤ larghezza < 840 dp | il 93,73% dei tablet in verticale,
più grandi display interni aperti in verticale |
| Larghezza espansa | larghezza ≥ 840 dp | il 97,22% dei tablet in orizzontale,
più grandi display interni aperti in orizzontale |
| Altezza compatta | Altezza < 480 dp | 99,78% degli smartphone in orizzontale |
| Altezza media | 480 dp ≤ altezza < 900 dp | il 96,56% dei tablet in orizzontale,
97,59% degli smartphone in verticale |
| Altezza espansa | altezza ≥ 900 dp | 94,25% dei tablet in verticale |
Sebbene possa essere utile visualizzare le classi di dimensioni come dispositivi fisici, le classi di dimensioni delle finestre non sono esplicitamente determinate dalle dimensioni dello schermo del dispositivo. Le classi di dimensioni delle finestre non sono destinate alla logica di tipo isTablet. Piuttosto, le classi di dimensioni delle finestre sono determinate dalle dimensioni delle finestre disponibili per l'applicazione indipendentemente dal tipo di dispositivo su cui viene eseguita l'app, il che ha due importanti implicazioni:
I dispositivi fisici non garantiscono una specifica classe di dimensioni delle finestre. Per diversi motivi, lo spazio disponibile sullo schermo dell'app può essere diverso dalle dimensioni dello schermo del dispositivo. Sui dispositivi mobili, la modalità schermo diviso può suddividere lo schermo tra due applicazioni. Su ChromeOS, le app Android possono essere presentate in finestre in formato libero ridimensionabili in modo arbitrario. I dispositivi pieghevoli possono avere due schermi di diverse dimensioni, accessibili singolarmente piegando o aprendo.
La classe delle dimensioni della finestra può cambiare durante l'intero ciclo di vita dell'app. Mentre l'app è in esecuzione, l'orientamento del dispositivo cambia, il multitasking e la quantità di spazio pieghevole e aperta può cambiare la quantità di spazio disponibile sullo schermo. Di conseguenza, la classe delle dimensioni della finestra è dinamica e l'UI della tua app dovrebbe adattarsi di conseguenza.
Le classi di dimensioni delle finestre corrispondono ai punti di interruzione compatti, medi ed espansi nelle linee guida sul layout di Material Design. Utilizza le classi di dimensioni delle finestre per prendere decisioni generali sul layout dell'applicazione, ad esempio per decidere se usare un layout canonico specifico per sfruttare lo spazio aggiuntivo dello schermo.
Puoi calcolare l'attuale
WindowSizeClass
utilizzando la funzione di primo livello
currentWindowAdaptiveInfo
della libreria
androidx.compose.material3.adaptive. L'esempio seguente mostra come calcolare la classe di dimensioni della finestra e ricevere aggiornamenti ogni volta che la classe di dimensioni della finestra cambia:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Gestire i layout con le classi di dimensioni delle finestre
Le classi di dimensioni della finestra ti consentono di modificare il layout dell'app quando cambia lo spazio di visualizzazione disponibile per l'app, ad esempio quando un dispositivo si piega o si apre, cambia l'orientamento del dispositivo o la finestra dell'app viene ridimensionata nella modalità multi-finestra.
Localizza la logica per la gestione delle modifiche alle dimensioni del display passando le classi delle dimensioni della finestra come stato ai componibili nidificati come qualsiasi altro stato dell'app:
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
// Perform logic on the size class to decide whether to show the top app bar.
val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT
// MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
MyScreen(
showTopAppBar = showTopAppBar,
/* ... */
)
}
Classi di dimensioni delle finestre di test
Man mano che apporti modifiche al layout, verificane il comportamento in tutte le dimensioni delle finestre, soprattutto in base alle larghezze dei punti di interruzione compatte, medie ed espanse.
Se già esiste un layout per gli schermi compatti, ottimizzalo per la classe di dimensioni della larghezza espansa, poiché questa classe di dimensioni offre la maggiore quantità di spazio per ulteriori modifiche a contenuti e UI. Decidi quindi quale layout è più adatto per la classe di larghezza media; valuta la possibilità di aggiungerne uno specializzato.
Passaggi successivi
Per scoprire di più su come utilizzare le classi di dimensioni delle finestre per creare layout adattabili/adattivi, consulta quanto segue:
Per i layout basati su Scrittura: supportare diverse dimensioni dello schermo
Per i layout basati sulle visualizzazioni: design adattabile/adattivo con visualizzazioni
Per scoprire di più su ciò che rende un'app ideale per tutti i dispositivi e le dimensioni dello schermo, consulta: