Fenstergrößenklassen sind eine Reihe von vorgegebenen Haltepunkten für den Darstellungsbereich, mit denen Sie responsive/adaptive Layouts entwerfen, entwickeln und testen. Haltepunkteausgleich für ein einfaches Layout und die Flexibilität, deine App für besondere Fälle zu optimieren.
Mithilfe von Fenstergrößenklassen wird der für Ihre App verfügbare Anzeigebereich kategorisiert als compact, medium oder expanded. Verfügbare Breite und Höhe werden klassifiziert Das heißt, Ihre App hat zu jedem Zeitpunkt zwei Fenstergrößen Klassen – eine für die Breite und eine für die Höhe. Die verfügbare Breite beträgt in der Regel mehr aufgrund der Allgegenwärtigkeit des vertikalen Scrollens wichtiger als die verfügbare Höhe. ist die Breite der Fenstergrößen-Klasse wahrscheinlich relevanter für die Benutzeroberfläche Ihrer App.
Wie in den Abbildungen dargestellt, können Sie anhand der Haltepunkte weiter nachdenken. über Layouts in Bezug auf Geräte und Konfigurationen. Jeder Haltepunkt der Größenklasse die meisten der Fälle bei typischen Geräteszenarien, die sehr hilfreich sein können, Bezugsrahmen für das Design der Haltepunkt-basierten Layouts.
| Klasse Größe | Haltepunkt | Gerätedarstellung |
|---|---|---|
| Kompakte Breite | Breite < 600dp | 99,96% der Smartphones im Hochformat |
| Mittlere Breite | 600 dp ≤ Breite < 840dp | 93,73% der Tablets im Hochformat,
Die meisten großen aufgeklappten inneren Displays im Hochformat |
| Breite nach Expansion | Breite ≥ 840 dp | 97,22% der Tablets im Querformat,
Die meisten aufgeklappten inneren Displays im Querformat |
| Kompakte Höhe | Höhe < 480dp | 99,78% der Smartphones im Querformat |
| Mittlere Größe | 480 dp ≤ Höhe < 900dp | 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, Klassen werden nicht explizit durch die Größe des Gerätebildschirms bestimmt. Fenster Größenklassen sind nicht für Logik vom Typ isTablet vorgesehen. Stattdessen sollten Sie Größenklassen werden durch die Fenstergröße bestimmt, die Ihrer Anwendung zur Verfügung steht. unabhängig vom Gerätetyp, auf dem die App ausgeführt wird. Auswirkungen:
Physische Geräte garantieren keine bestimmte Fenstergrößenklasse. Die der für deine App verfügbaren Bildschirmgröße von der Bildschirmgröße des gibt es viele Gründe. Auf Mobilgeräten kann der Splitscreen-Modus den Bildschirm zwischen zwei Anwendungen aufteilen. Unter ChromeOS können Android-Apps werden in Freiform-Fenstern angezeigt, deren Größe beliebig geändert werden kann. Auf faltbaren Geräten können zwei Bildschirme mit unterschiedlicher Größe einzeln aufgerufen werden indem Sie das Gerät zu- oder aufklappen.
Die Fenstergrößenklasse kann sich im Laufe der Lebensdauer deiner App ändern. Während die App ausgeführt wird, ändert sich die Ausrichtung des Geräts, Multitasking und Durch Zusammen- oder Zuklappen kann sich der verfügbare Platz auf dem Bildschirm verändern. Als ist die Fenstergrößenklasse dynamisch und die Benutzeroberfläche Ihrer App sollte sich entsprechend anpassen.
Die Fenstergrößenklassen werden den Haltepunkten „Kompakt“, „Mittel“ und „Maximiert“ in der Material Design-Layout Anleitung. Sie können Fenstergrößenklassen verwenden, um Anwendungslayout-Entscheidungen z. B. ob Sie ein bestimmtes kanonisches Layout verwenden, und mehr Platz auf dem Bildschirm.
Aktuellen WindowSizeClass berechnen mit dem
currentWindowAdaptiveInfo()-Funktion der obersten Ebene des
androidx.compose.material3.adaptive-Mediathek Die Funktion gibt eine
Instanz von WindowAdaptiveInfo, die windowSizeClass enthält. Die
Das folgende Beispiel zeigt, wie Sie die Fenstergrößenklasse berechnen und
wird aktualisiert, wenn sich die Klasse der Fenstergröße ändert:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Layouts mit Fenstergrößenklassen verwalten
Mit Fenstergrößenklassen können Sie Ihr App-Layout als Anzeigefläche ändern die für Ihre App verfügbar sind, z. B. wenn ein Gerät auf- oder zugeklappt wird, Geräteausrichtung ändert sich oder die Größe des App-Fensters wird im Mehrfenstermodus angepasst. .
Lokalisieren der Logik für die Verarbeitung von Änderungen der Anzeigegröße durch Übergeben der Fenstergröße Klassen als Zustand zu verschachtelten zusammensetzbaren Funktionen, wie bei jedem anderen App-Status:
@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,
/* ... */
)
}
Fenstergrößenklassen testen
Wenn Sie Layoutänderungen vornehmen, testen Sie das Layoutverhalten für alle Fenstergrößen, insbesondere bei den Haltepunktbreiten "Kompakt", "Mittel" und "Maximiert".
Wenn Sie bereits ein Layout für kompakte Bildschirme haben, optimieren Sie zunächst Ihr Layout. für die Klassenklasse nach maximierter Breite, da diese Klasse den meisten Platz . Entscheiden Sie dann, welches Layout der Größenklasse mittlerer Breite, ein spezielles Layout hinzufügen.
Nächste Schritte
Weitere Informationen zur Verwendung von Fenstergrößenklassen zum Erstellen responsiv/adaptiv finden Sie hier:
Für auf dem E-Mail-Editor basierende Layouts: Unterstützung verschiedener Bildschirmgrößen
Für ansichtsbasierte Layouts: Responsives/adaptives Design mit Ansichten
Weitere Informationen dazu, warum eine App für alle Geräte und Bildschirmgrößen geeignet ist, Siehe: