Le classi di dimensioni delle finestre sono un insieme di punti di interruzione dell'area visibile guidati che ti aiutano progettare, sviluppare e testare layout reattivi/adattivi. Il saldo dei punti di interruzione un layout semplice e la flessibilità di ottimizzare la tua app per casi unici.
Le classi di dimensioni delle finestre classificano l'area di visualizzazione disponibile per la tua app come compact, medium o Expanded. La larghezza e l'altezza disponibili sono classificate separatamente, in modo che in qualsiasi momento l'app abbia due dimensioni di finestra una per la larghezza, una per l'altezza. La larghezza disponibile è in genere superiore importante rispetto all'altezza disponibile a causa dell'ubiquità dello scorrimento verticale, quindi la classe di dimensioni della finestra della larghezza è probabilmente più pertinente all'interfaccia utente dell'app.
Come mostrato nelle figure, i punti di interruzione consentono di continuare a pensare sui layout in termini di dispositivi e configurazioni. Punto di interruzione della classe di ogni dimensione nella maggior parte dei casi gli scenari tipici dei dispositivi, il che può essere utile quando rifletti sulla progettazione di un sistema basato su punti di interruzione layout.
| Classe dimensioni | Punto di interruzione | Rappresentazione del dispositivo |
|---|---|---|
| Larghezza compatta | larghezza < 600dp | 99,96% dei telefoni in verticale |
| Larghezza media | 600 dp ≤ larghezza < 840dp | il 93,73% dei tablet in verticale,
la maggior parte dei display interni aperti in verticale |
| Larghezza espansa | larghezza ≥ 840 dp | il 97,22% dei tablet in orizzontale
la maggior parte degli schermi interni più grandi in orizzontale |
| Altezza compatta | altezza < 480dp | 99,78% dei telefoni in orizzontale |
| Altezza media | 480 dp ≤ altezza < 900dp | il 96,56% dei tablet in orizzontale
97,59% dei telefoni 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 dimensioni della finestra sono esplicitamente non determinate dalle dimensioni dello schermo del dispositivo. Finestra le classi di dimensioni non sono destinate alla logica di tipo isTablet. Piuttosto, finestra Le classi di dimensioni sono determinate dalle dimensioni della finestra disponibile per l'applicazione a prescindere dal tipo di dispositivo su cui è in esecuzione l'app, per cui sono importanti implicazioni:
I dispositivi fisici non garantiscono una classe specifica di dimensioni delle finestre. La lo spazio disponibile sullo schermo dell'app può essere diverso dalle dimensioni dello schermo dispositivo per molti motivi. Sui dispositivi mobili, la modalità schermo diviso può lo schermo tra due applicazioni. Su ChromeOS, le app per Android essere presentati in finestre in formato libero ridimensionabili arbitrariamente. I pieghevoli possono avere due schermi di diverse dimensioni accessibili singolarmente piegando o aprendo il dispositivo.
La classe delle dimensioni della finestra può cambiare per tutta la durata dell'app. Mentre l'app è in esecuzione, l'orientamento del dispositivo cambia, il multitasking e La capacità di piegatura o apertura può influire sulla quantità di spazio disponibile sullo schermo. Come come risultato, la classe delle dimensioni della finestra è dinamica e l'interfaccia utente dell'app deve adattarsi di conseguenza.
Le classi di dimensioni delle finestre vengono mappate ai punti di interruzione compatti, medi ed espansi nella Layout Material Design assistenza. Usa le classi di dimensioni delle finestre per prendere decisioni di alto livello sul layout delle applicazioni, ad esempio decidere se utilizzare un layout canonico specifico per sfruttare spazio aggiuntivo sullo 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
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:
@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 della finestra di test
Quando apporti modifiche al layout, verificane il comportamento su tutte le dimensioni delle finestre soprattutto per larghezze compatte, medie ed espanse dei punti di interruzione.
Se hai già un layout per schermi compatti, ottimizzalo per la classe di larghezza espansa, poiché questa classe fornisce la maggior parte dello spazio per ulteriori modifiche all'interfaccia utente e ai contenuti. Decidi poi il layout adatto la classe di larghezza media; valuta la possibilità di aggiungere un layout specializzato.
Passaggi successivi
Per saperne di più su come utilizzare le classi di dimensioni delle finestre per creare modelli layout, consulta quanto segue:
Per i layout basati su Scrittura: Supportare schermi di dimensioni diverse
Per i layout basati sulle visualizzazioni: design reattivo/adattivo con visualizzazioni
Per scoprire cosa rende un'app ottimale su tutti i dispositivi e le dimensioni dello schermo, consulta: