Utilizzare le classi di dimensioni delle finestre

Le classi di dimensioni della finestra sono un insieme di punti di interruzione del viewport che ti aiutano a progettare, sviluppare e testare layout adattabili/responsive. 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, espansa, grande o molto grande. La larghezza e l'altezza disponibili sono classificate separatamente, quindi in qualsiasi momento la tua app ha due classi di dimensioni della finestra: una per la larghezza e una per l'altezza. La larghezza disponibile è in genere più importante dell'altezza disponibile a causa dell'ubiquità dello scorrimento verticale, quindi la classe di dimensioni della finestra di larghezza è probabilmente più pertinente all'interfaccia utente della tua app.

Come illustrato nelle figure, i punti di interruzione ti consentono di continuare a pensare ai layout in termini di dispositivi e configurazioni. Ogni punto di interruzione della classe di dimensioni rappresenta un caso maggioritario per gli scenari tipici dei dispositivi, che può essere un utile punto di riferimento quando pensi alla progettazione dei layout basati sui punti di interruzione.

Sebbene la visualizzazione delle classi di dimensioni come dispositivi fisici possa essere utile, le classi di dimensioni delle finestre non sono determinate esplicitamente dalle dimensioni dello schermo del dispositivo. Le classi di dimensioni della finestra non sono destinate alla logica di tipo isTablet. Le classi di dimensioni della finestra sono determinate dalle dimensioni della finestra 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 classe di dimensioni della finestra specifica. Lo spazio dello schermo disponibile per la tua app può differire dalle dimensioni dello schermo del dispositivo per molti motivi. Sui dispositivi mobili, la modalità schermo diviso può dividere lo schermo tra due applicazioni. Su ChromeOS, le app per Android possono essere presentate in finestre di tipo desktop ridimensionabili in modo arbitrario. I dispositivi pieghevoli possono avere due schermi di dimensioni diverse a cui si accede singolarmente piegando o aprendo il dispositivo.

• La classe di dimensioni della finestra può cambiare durante il ciclo di vita dell'app. Mentre l'app è in esecuzione, le modifiche all'orientamento del dispositivo, il multitasking e l'apertura/chiusura possono modificare la quantità di spazio sullo schermo disponibile. Di conseguenza, la classe di dimensioni della finestra è dinamica e l'UI della tua app deve adattarsi di conseguenza.

Le classi di dimensioni della finestra corrispondono ai punti di interruzione compatti, medi ed espansi nelle linee guida per il layout di Material Design. Utilizza le classi di dimensioni delle finestre per prendere decisioni di alto livello sul layout dell'applicazione, ad esempio se utilizzare un layout canonico specifico per sfruttare lo spazio aggiuntivo dello schermo.

Calcola l'attuale WindowSizeClass utilizzando currentWindowAdaptiveInfo() funzione di primo livello della androidx.compose.material3.adaptive. La funzione restituisce un istanza di WindowAdaptiveInfo, che contiene windowSizeClass. La l'esempio seguente mostra come calcolare la classe delle dimensioni della finestra e ricevere si aggiorna ogni volta che la classe delle dimensioni della finestra cambia:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

Gestire i layout con classi di dimensioni delle finestre

Le classi di dimensioni delle finestre consentono di modificare il layout dell'app come spazio di visualizzazione disponibili per le modifiche alla tua app, ad esempio, quando un dispositivo si piega o si apre, l'orientamento del dispositivo cambia o la finestra dell'app viene ridimensionata in modalità multi-finestra .

Localizza la logica per la gestione delle modifiche alle dimensioni del display trasmettendo le dimensioni della finestra per passare a componibili nidificati come qualsiasi altro stato dell'app:

@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Decide whether to show the top app bar based on window size class.
    val showTopAppBar = windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)

    // MyScreen logic is based on the showTopAppBar boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}
AdaptiveLayoutSnippets.kt

Testare le classi di dimensioni della finestra

Man mano che apporti modifiche al layout, testa il comportamento del layout in tutte le dimensioni della finestra, soprattutto alle larghezze dei breakpoint compatti, medi ed espansi.

Se hai un layout esistente per schermi compatti, ottimizzalo prima per la classe di dimensioni della larghezza espansa, poiché questa classe di dimensioni offre lo spazio maggiore per contenuti aggiuntivi e modifiche all'interfaccia utente. Poi decidi quale layout è più adatto alla classe di dimensioni di larghezza media; valuta la possibilità di aggiungere un layout specializzato.

Passaggi successivi

Per scoprire di più su come utilizzare le classi di dimensioni delle finestre per creare layout reattivi/adattivi, consulta quanto segue:

• Per i layout basati su Compose: Supportare diverse dimensioni del display

• Per i layout basati sulla visualizzazione: Progettazione reattiva/adattabile con visualizzazioni

Per scoprire di più su cosa rende un'app ideale per tutti i dispositivi e le dimensioni dello schermo, consulta:

• Eseguire la migrazione dell'interfaccia utente a layout adattabili
• Qualità delle app per schermi di grandi dimensioni