Le classi di dimensioni della finestra sono un insieme di breakpoint del viewport basati su opinioni 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 o espansa. La larghezza e l'altezza disponibili sono classificate distintamente, pertanto 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, pertanto la classe della dimensione della finestra larghezza è probabilmente più pertinente per l'interfaccia utente della tua app.
Come mostrato nelle figure, i breakpoint ti consentono di continuare a pensare ai layout in termini di dispositivi e configurazioni. Ogni breakpoint della classe di dimensioni rappresenta un caso prevalente per gli scenari di dispositivi tipici, che può essere un utile riferimento quando pensi al design dei layout basati su breakpoint.
| Taglia | Punto di interruzione | Rappresentazione del dispositivo |
|---|---|---|
| Larghezza compatta | larghezza < 600 dp | 99,96% di smartphone in verticale |
| Larghezza media | 600 dp ≤ larghezza < 840 dp | 93,73% di tablet in orientamento verticale,
La maggior parte dei display interni non piegati di grandi dimensioni in formato verticale |
| Larghezza espansa | larghezza ≥ 840 dp | 97,22% dei tablet in orizzontale,
Display interni più grandi quando sono aperti in formato orizzontale |
| Altezza compatta | altezza < 480 dp | 99,78% di smartphone in orizzontale |
| Altezza media | 480 dp ≤ altezza < 900 dp | 96,56% dei tablet in orizzontale,
97,59% di smartphone in verticale |
| Altezza espansa | altezza ≥ 900 dp | 94,25% dei tablet in orientamento verticale |
Sebbene possa essere utile visualizzare le classi di dimensioni come dispositivi fisici, le classi di dimensioni della finestra non sono esplicitamente determinate dalle dimensioni dello schermo del dispositivo. Le classi di dimensione 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 è in esecuzione l'app. Ciò ha due importanti implicazioni:
I dispositivi fisici non garantiscono una classe di dimensioni della finestra specifica. Lo spazio sullo schermo disponibile per la tua app può essere diverso dalle dimensioni dello schermo del dispositivo per diversi motivi. Sui dispositivi mobili, la modalità schermo diviso può suddividere lo schermo tra due applicazioni. Su ChromeOS, le app per Android possono essere visualizzate in finestre di tipo desktop ridimensionabili in modo arbitrario. I dispositivi pieghevoli possono avere due schermi di dimensioni diverse a cui si accede singolarmente chiudendo o aprendo il dispositivo.
La classe delle 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 la chiusura/l'apertura possono cambiare la quantità di spazio sullo schermo disponibile. Di conseguenza, la classe delle dimensioni della finestra è dinamica e l'interfaccia utente dell'app deve adattarsi di conseguenza.
Le classi di dimensioni delle finestre corrispondono ai punti di interruzione compatti, medi ed espansi nelle linee guida per il layout di Material Design. Utilizza le classi di dimensioni della finestra per prendere decisioni di layout dell'applicazione di alto livello, ad esempio decidere se utilizzare un layout canonico specifico per sfruttare lo spazio aggiuntivo sullo schermo.
Puoi calcolare lo stato attuale
WindowSizeClass
utilizzando
WindowSizeClass#compute()
funzione fornita da Jetpack
nella libreria WindowManager. Nell'esempio che segue
mostra come calcolare la classe delle dimensioni della finestra e ricevere aggiornamenti ogni volta che
modifiche alla classe delle dimensioni della finestra:
Kotlin
class MainActivity : Activity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// ...
// Replace with a known container that you can safely add a
// view to where the view won't affect the layout and the view
// won't be replaced.
val container: ViewGroup = binding.container
// Add a utility view to the container to hook into
// View.onConfigurationChanged(). This is required for all
// activities, even those that don't handle configuration
// changes. You can't use Activity.onConfigurationChanged(),
// since there are situations where that won't be called when
// the configuration changes. View.onConfigurationChanged() is
// called in those scenarios.
container.addView(object : View(this) {
override fun onConfigurationChanged(newConfig: Configuration?) {
super.onConfigurationChanged(newConfig)
computeWindowSizeClasses()
}
})
computeWindowSizeClasses()
}
private fun computeWindowSizeClasses() {
val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this)
val width = metrics.bounds.width()
val height = metrics.bounds.height()
val density = resources.displayMetrics.density
val windowSizeClass = WindowSizeClass.compute(width/density, height/density)
// COMPACT, MEDIUM, or EXPANDED
val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass
// COMPACT, MEDIUM, or EXPANDED
val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass
// Use widthWindowSizeClass and heightWindowSizeClass.
}
}
Java
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ...
// Replace with a known container that you can safely add a
// view to where the view won't affect the layout and the view
// won't be replaced.
ViewGroup container = binding.container;
// Add a utility view to the container to hook into
// View.onConfigurationChanged(). This is required for all
// activities, even those that don't handle configuration
// changes. You can't use Activity.onConfigurationChanged(),
// since there are situations where that won't be called when
// the configuration changes. View.onConfigurationChanged() is
// called in those scenarios.
container.addView(new View(this) {
@Override
protected void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
computeWindowSizeClasses();
}
});
computeWindowSizeClasses();
}
private void computeWindowSizeClasses() {
WindowMetrics metrics = WindowMetricsCalculator.getOrCreate()
.computeCurrentWindowMetrics(this);
int width = metrics.getBounds().width
int height = metrics.getBounds().height()
float density = getResources().getDisplayMetrics().density;
WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density)
// COMPACT, MEDIUM, or EXPANDED
WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass()
// COMPACT, MEDIUM, or EXPANDED
WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass()
// Use widthWindowSizeClass and heightWindowSizeClass.
}
}
Testare le classi di dimensioni delle finestre
Mentre apporti modifiche al layout, testa il comportamento del layout in tutte le dimensioni della finestra, in particolare con le larghezze dei breakpoint compatto, medio ed espanso.
Se hai già un layout per le schermate compatte, ottimizzalo innanzitutto per la classe di dimensioni con larghezza espansa, poiché questa offre lo spazio maggiore per modifiche dell'interfaccia utente e contenuti aggiuntivi. Poi decidi quale layout è più adatto per la classe di dimensioni medie. Valuta la possibilità di aggiungere un layout specializzato.
Passaggi successivi
Per scoprire di più su come utilizzare le classi di dimensioni della finestra per creare layout adattabili/reattivi, consulta quanto segue:
Per i layout basati su Compose: supporta diverse dimensioni dei display
Per i layout basati sulle visualizzazioni: Design adattabile/reattivo con visualizzazioni
Per scoprire di più su cosa rende un'app eccezionale su tutti i dispositivi e le dimensioni dello schermo, consulta:
- Eseguire la migrazione dell'interfaccia utente ai layout adattabili
- Qualità delle app per schermi di grandi dimensioni