Verschiedene Bildschirmgrößen unterstützen

Die Unterstützung für unterschiedliche Bildschirmgrößen ermöglicht den Zugriff auf deine App von den unterschiedlichsten Geräten und der größten Anzahl von Nutzern.

Damit möglichst viele Bildschirmgrößen unterstützt werden, sollten Sie Ihre App-Layouts so gestalten, dass sie responsiv und adaptiv sind. Responsive/adaptive Layouts sorgen unabhängig von der Bildschirmgröße für eine optimale Nutzererfahrung. So kann Ihre App für Smartphones, Tablets, faltbare Smartphones, ChromeOS-Geräte, Hoch- und Querformate sowie Konfigurationen mit anpassbarer Größe wie den Mehrfenstermodus verwendet werden.

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 sorgen für ein einfaches Layout und die Flexibilität, Ihre App 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 Breite und eine für 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 Benutzeroberfläche Ihrer App wahrscheinlich relevanter.

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

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 eine isTablet-Logik vorgesehen. Vielmehr werden Fenstergrößenklassen unabhängig vom Gerätetyp, auf dem die App ausgeführt wird, durch die für Ihre App verfügbare Fenstergröße bestimmt. Dies hat zwei wichtige Auswirkungen:

• Physische Geräte können keine bestimmte Fenstergrößenklasse garantieren. Der für Ihre App verfügbare Bildschirmplatz 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 Freiform-Fenstern angezeigt 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 bedienbar sind.

• 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 sowie das Auf- und Zuklappen den verfügbaren Platz auf dem Bildschirm beeinflussen. Daher ist die Fenstergrößenklasse dynamisch und die Benutzeroberfläche Ihrer App sollte sich entsprechend anpassen.

Fenstergrößenklassen werden den Layout-Haltpunkten im responsiven Layoutraster von 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 mithilfe 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:

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

Sobald Sie in Ihrer App Fenstergrößenklassen beobachten, können Sie das Layout basierend auf der aktuellen Fenstergrößenklasse ändern.

Layouts und Fenstergröß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 Ihr Layout für die Größenklasse für die maximierte Breite, da diese Größenklasse den größten Platz für zusätzliche Inhalte und Änderungen der Benutzeroberfläche bietet. Entscheiden Sie dann, welches Layout für die mittlere Breite am besten geeignet 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:

• Für auf Text basierende Layouts: Adaptive Layouts erstellen

• Für ansichtsbasierte Layouts: Responsives/adaptives Design mit Ansichten

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

• UI zu responsiven Layouts migrieren
• Qualität von Apps auf großem Bildschirm