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.
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 obersten currentWindowAdaptiveInfo-Funktion der Bibliothek androidx.compose.material3.adaptive berechnen. Das folgende Beispiel zeigt, wie die Fenstergrößenklasse berechnet wird und Aktualisierungen erhalten, wenn sich die Fenstergrößenklasse ändert:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Layouts mit Fenstergrößenklassen verwalten
Mit Fenstergrößenklassen können Sie das App-Layout ändern, wenn sich der für Ihre App verfügbare Anzeigebereich ändert. Das ist beispielsweise der Fall, wenn ein Gerät auf- oder zugeklappt wird, sich die Geräteausrichtung ändert oder die Größe des App-Fensters im Mehrfenstermodus geändert wird.
Lokalisieren Sie die Logik für die Verarbeitung von Änderungen der Anzeigegröße. Übergeben Sie dazu Fenstergrößenklassen wie jeden anderen Anwendungsstatus als Status an verschachtelte zusammensetzbare Funktionen:
@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,
/* ... */
)
}
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:
Für Layouts, die auf Erstellung basieren: Unterstützung verschiedener Bildschirmgrößen
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, findest du hier: