Classi di finestra

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.

di Gemini Advanced.

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.

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.

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:

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.
    }
}

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.
    }
}

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:

• Eseguire la migrazione della UI ai layout adattabili
• Qualità delle app su schermi grandi