Fenstergrößenklassen

Fenstergrößenklassen sind eine Reihe von Haltepunkten für den Darstellungsbereich, mit denen Sie responsive/adaptive Layouts entwerfen, entwickeln und testen können. Die Haltepunkte sind ein Gleichgewicht zwischen dem einfachen Layout und der Flexibilität, Ihre Anwendung für besondere Fälle zu optimieren.

Mit Fenstergrößenklassen wird der für Ihre App verfügbare Anzeigebereich als kompakt, mittel oder erweitert kategorisiert. Die verfügbaren Werte für Breite und Höhe werden separat klassifiziert. Daher hat Ihre App jederzeit zwei Fenstergrößenklassen: eine für die Breite und eine für die Höhe. Die verfügbare Breite ist aufgrund der Allgegenwärtigkeit des vertikalen Scrollens normalerweise wichtiger als die verfügbare Höhe. Daher ist die Breite der Fenstergrößenklasse für die UI Ihrer App wahrscheinlich relevanter.

Abbildung 1: Darstellungen von breitenbasierten Fenstergrößenklassen.
Abbildung 2. Darstellungen von höhenbasierten Fenstergrößenklassen.

Wie in den Abbildungen dargestellt, ermöglichen Ihnen die Haltepunkte, Layouts in Bezug auf Geräte und Konfigurationen zu betrachten. Jeder Haltepunkt in einer Größenklasse stellt einen Mehrheitsfall für typische Geräteszenarien dar. Das kann ein hilfreicher Bezugspunkt sein, wenn Sie über das Design Ihrer haltepunktbasierten Layouts nachdenken.

Klasse Größe Haltepunkt Gerätedarstellung
Kompakte Breite Breite < 600 dp 99,96% der Smartphones im Hochformat
Mittlere Breite 600 dp ≤ Breite < 840 dp 93,73% der Tablets im Hochformat,

Die meisten großen aufgeklappten inneren Displays im Hochformat
Maximierte Breite Breite ≥ 840 dp 97,22% der Tablets im Querformat,

Die meisten großen aufgeklappten inneren Displays im Querformat
Kompakte Höhe Höhe < 480 dp 99,78% der Smartphones im Querformat
Mittlere Größe 480 dp ≤ Höhe < 900 dp 96,56% der Tablets im Querformat,

97,59% der Smartphones im Hochformat
Höhe bei Maximierung Höhe ≥ 900 dp 94,25% der Tablets im Hochformat

Obwohl die Visualisierung von Größenklassen als physische Geräte nützlich sein kann, werden Fenstergrößenklassen nicht explizit durch die Größe des Gerätebildschirms bestimmt. Fenstergrößenklassen sind nicht für die isTablet-basierte Logik bestimmt. Stattdessen werden Fenstergrößenklassen durch die für Ihre Anwendung verfügbare Fenstergröße unabhängig vom Gerätetyp bestimmt, auf dem die App ausgeführt wird. Dies hat zwei wichtige Auswirkungen:

  • Physische Geräte können keine bestimmte Fenstergrößenklasse garantieren. Der Platz auf dem Bildschirm, der Ihrer App zur Verfügung steht, kann aus vielen Gründen von der Bildschirmgröße des Geräts abweichen. Auf Mobilgeräten kann der Bildschirm im Splitscreen-Modus zwischen zwei Apps aufgeteilt werden. Unter ChromeOS können Android-Apps in Freiformfenstern dargestellt werden, deren Größe beliebig geändert werden kann. Faltbare Smartphones können zwei Bildschirme unterschiedlicher Größe haben, die einzeln durch Zuklappen oder Aufklappen des Geräts aufgerufen werden.

  • Die Fenstergrößenklasse kann sich im Laufe der Lebensdauer Ihrer App ändern. Während Ihre App ausgeführt wird, können Änderungen der Geräteausrichtung, Multitasking und Falten/Aufklappen den verfügbaren Bildschirmbereich beeinflussen. Daher ist die Fenstergrößenklasse dynamisch und die UI Ihrer App sollte sich dementsprechend anpassen.

Die Fenstergrößenklassen sind den kompakten, mittleren und erweiterten Haltepunkten in den Layoutanleitungen für Material Design zugeordnet. Verwenden Sie Fenstergrößenklassen, um allgemeine Entscheidungen zum Anwendungslayout zu treffen, z. B. um zu entscheiden, ob ein bestimmtes kanonisches Layout verwendet werden soll, um zusätzlichen Bildschirmplatz zu nutzen.

Sie können den aktuellen WindowSizeClass mit der WindowSizeClass#compute()-Funktion der Jetpack WindowManager-Bibliothek berechnen. Das folgende Beispiel zeigt, wie die Fenstergrößenklasse berechnet wird und Aktualisierungen erhalten, wenn sich die Fenstergrößenklasse ändert:

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

Testfenstergrößenklassen

Testen Sie bei Layoutänderungen das Layoutverhalten für alle Fenstergrößen, insbesondere bei den kompakten, mittleren und erweiterten Haltepunkten.

Wenn Sie bereits ein Layout für kompakte Bildschirme haben, optimieren Sie zuerst das Layout für die Größenklasse für die maximierte Breite, da diese Klasse am meisten Platz für zusätzliche Inhalte und Änderungen an der Benutzeroberfläche bietet. Entscheiden Sie dann, welches Layout für die mittlere Breite sinnvoll ist. Überlegen Sie sich, ein spezielles Layout hinzuzufügen.

Nächste Schritte

Weitere Informationen zur Verwendung von Fenstergrößenklassen zum Erstellen responsiver/adaptiver Layouts finden Sie hier:

Weitere Informationen dazu, was eine App für alle Geräte und Bildschirmgrößen so gut macht, findest du hier: