Mehr als 300 Millionen Android-Geräte mit großem Bildschirm, darunter Tablets, faltbare Geräte, ChromeOS-Geräte, Autodisplays und Fernseher werden heute verwendet, kontinuierlich vorankommen. Um an die wachsende Zahl der Nutzer zu denken und die Vielfalt großer Geräte und auf Standard-Smartphones – adaptive Apps.
Was sind adaptive Apps?
Adaptive App-Layouts basieren auf Änderungen im App-Display, hauptsächlich die Größe des App-Fensters ändert. Adaptive Apps bieten aber auch Änderungen der Haltung von faltbaren Geräten, z. B. auf einem Tisch oder in Büchern, und Änderungen der Bildschirmdichte und Schriftgröße.
Anstatt UI-Elemente nur als Reaktion auf verschiedene ersetzen adaptive Apps Layoutkomponenten und blenden Inhalte ein oder aus. Auf herkömmlichen Smartphones kann in einer adaptiven App z. B. eine unten angezeigte auf großen Bildschirmen eine Navigationsleiste. Auf großen Bildschirmen adaptive Apps zeigen mehr Inhalte an, z. B. ein Layout mit zwei Fenster und einer Liste mit Details. am kleinen Bildschirmen, weniger Inhalt, entweder die Liste oder die Details.
<ph type="x-smartling-placeholder">Früher gingen Apps im Vollbildmodus über das Smartphone hinaus. Heutzutage werden Apps in Mehrfenstermodus in Fenstern mit beliebiger Größe unabhängig vom Gerätebildschirm Größe. Nutzer können die Fenstergröße jederzeit ändern. So können sogar auf einem einzigen Gerät müssen Apps anpassungsfähig sein.
Adaptive Apps sehen toll aus und funktionieren auf jedem Gerät und in jeder Konfiguration.
Warum adaptive UIs erstellen?
Nutzer erwarten, dass Ihre App auf allen ihren Geräten einwandfrei funktioniert und und verbesserte Funktionen auf großen Bildschirmen. Multitasking leicht gemacht – im Mehrfenstermodus für eine verbesserte App-Erfahrung und eine höhere Produktivität.
Apps, die auf Standardtelefonen auf Single-Tasking beschränkt sind, lassen eine expandierende Nutzerin oder ein größeres Publikum aus. Basis vielfältiger Möglichkeiten.
Google Play
Google Play bietet App-Sammlungen für Tablets und faltbare Geräte sowie Empfehlungen, mit denen Nutzer hochwertige Apps entdecken können.
Google Play stuft Apps und Spiele ein, die für große Bildschirme optimiert sind als nicht optimierte Apps und Spiele. Apps. Das Ranking basiert auf den Qualitätsrichtlinien für Apps für große Bildschirme. Höhere Bildqualität Durch Ranking wird die Sichtbarkeit erhöht, da Nutzer, die mehrere Geräte verwenden, Folgendes sehen: für große Bildschirme.
Apps, die den Play Store-Qualitätsstandards für große Bildschirme nicht entsprechen, haben eine auf der Detailseite der App. Die Warnung weist Nutzer darauf hin, dass die App auf ihren Geräten mit großem Bildschirm nicht gut funktioniert.
<ph type="x-smartling-placeholder">![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/building-adaptive-apps/app_with_Play_warning_message.png?authuser=6&hl=de)
Entwickeln Sie adaptive Apps, um die Sichtbarkeit bei Google Play zu erhöhen und die Anzahl der Geräte, auf denen deine App heruntergeladen werden kann.
Erste Schritte
Denken Sie an adaptives Design in allen Phasen der App-Entwicklung: von der Planung bis Bereitstellung. Grafikdesignschaffende über adaptives Design informieren Entwickeln Sie Ihre App anpassungsfähig sein und eine App entwickeln, die verwaltbar, erweiterbar und für zukünftige Formfaktoren und Windowing-Modi.
So erstellen Sie eine adaptive App, die alle Displaygrößen und -konfigurationen unterstützt: Folgendes:
- Fenstergrößenklassen verwenden, um Layoutentscheidungen zu treffen
- Mit der „Compose Material 3 Adaptive-Bibliothek“ entwickeln
- Nicht nur Berührung, sondern auch Unterstützung
- Auf allen Gerätetypen testen
Fenstergrößenklassen
Die Abmessungen des App-Fensters können auf verschiedenen Geräten oder auf demselben bei faltbaren Geräten verwenden, auch wenn die App im Vollbildmodus ist. Unterschiedliche Geräteausrichtungen erzeugen unterschiedliche Seitenverhältnisse. In Mehrfenstermodus, Größe, Seitenverhältnis und Ausrichtung des App-Fensters vom Gerätebildschirm abweichen.
Adaptive Apps vereinfachen und generalisieren das Problem der Bestimmung und Verwaltung. Fenstergröße, Seitenverhältnis und Ausrichtung, wobei nur das App-Fenster berücksichtigt wird beim Rendern von Layouts. Dies funktioniert auch, wenn das App-Fenster den Vollbildmodus umfasst.
Durch Fenstergrößenklassen werden App-Fenster als kompakt, mittel oder maximiert je nach Fensterbreite oder -höhe.
<ph type="x-smartling-placeholder">![Darstellung der Fenstergrößenklassen mit kompakter, mittlerer und maximierter Breite.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/window-size-classes/window_size_classes_width.png?authuser=6&hl=de)
Berechnen Sie den WindowSizeClass
Ihrer App mithilfe des
currentWindowAdaptiveInfo()
-Funktion der obersten Ebene von Schreiben
Adaptive-Bibliothek von Material 3. Die Funktion gibt eine Instanz von
WindowAdaptiveInfo
enthält windowSizeClass
. Ihre App
erhält Updates, wenn sich die Klasse der Fenstergröße ändert:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Inhaltsbereiche
Das Layout einer Aktivität wird manchmal auch als Bildschirm bezeichnet. Beispiel: Ihre App möglicherweise einen Startbildschirm, einen Listenbildschirm und einen Bildschirm mit Artikeldetails haben. Die Terminologie bedeutet, dass jede Aktivität den Gerätebildschirm ausfüllt.
Auf Gerätebildschirmen, die groß genug sind, um die maximierte Breite zu unterstützen, Fenstergrößenklasse können mehrere Aktivitäts-Bildschirme gleichzeitig auf dem Bildschirm angezeigt werden. Bereich ist ein präziserer Begriff für die Darstellung von Inhalten einzelner Aktivitäten.
Mit Fenstergrößenklassen können Sie festlegen, in wie vielen Inhaltsbereichen angezeigt werden soll Mehrfensterlayouts, wie in Material Design angegeben.
<ph type="x-smartling-placeholder">![Gerätebildschirme sind in zwei Bereiche unterteilt: ein Bereich in Klassen mit kompakter und mittlerer Fenstergröße, zwei Bereiche in der Klasse der erweiterten Fenstergröße.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/panes_for_window_size_classes.png?authuser=6&hl=de)
Die Bereiche sind navigierbar. In Klassen mit kompakter und mittlerer Fenstergröße zeigen Apps eine Einzelfenster; Bei der Navigation zu einem beliebigen Ziel wird also ein Bereich angezeigt.
In der Klasse für die maximierte Fenstergröße können Apps zusammengehörige Inhalte in mehreren z. B. ein Listen-Detail-Layout. Die Navigation zu beiden Bereichen wird angezeigt. das Zwei-Fenster-Layout. Wenn sich die Fenstergröße zu „Kompakt“ oder „Mittel“ ändert, nur einen Bereich, das Navigationsziel, entweder die Liste oder bis ins Detail.
<ph type="x-smartling-placeholder"> |
<ph type="x-smartling-placeholder"> |
Compose Material 3 Adaptive
Jetpack Compose ist der moderne, deklarative Ansatz zum Erstellen adaptiver Apps ohne Duplizierung und Wartungsaufwand für mehrere Layoutdateien.
Die Bibliothek Compose Material 3 Adaptive Library enthält zusammensetzbare Funktionen, mit denen Fenstergrößenklassen, Navigationskomponenten, Mehrfensterlayouts und Position und Position des faltbaren Scharniers, z. B.:
NavigationSuiteScaffold
: Wechselt automatisch zwischen der Navigationsleiste und der Navigationsschiene je nach Größe des App-Fensters und Gerätestatus.ListDetailPaneScaffold
: Implementiert die kanonische Liste mit Details. Layout.Das Layout wird an die Größe des App-Fensters angepasst. Zeigt eine Liste und die Details der ein Listenelement in nebeneinander angezeigten Bereichen in der Größe des maximierten Fensters Klasse, sondern nur die Liste oder die Details zur kompakten und mittleren Fenstergröße Klassen.
SupportingPaneScaffold
: Implementiert die kanonische Seite des unterstützenden Fensters Layout.Zeigt den Hauptinhaltsbereich und einen unterstützenden Bereich im maximierten Fenster an Größenklasse, sondern nur den Hauptinhaltsbereich bei kompakten und mittleren Fenstergrößen Klassen.
Die Adaptive-Bibliothek für „Compose Material 3“ ist eine unverzichtbare Abhängigkeit für adaptive Apps entwickeln.
Konfiguration und Kontinuität
Adaptive Apps behalten die Kontinuität auch bei Konfigurationsänderungen.
Eine Konfigurationsänderung tritt auf, wenn die Größe des App-Fensters angepasst wird, der Status eines oder sich die Bildschirmdichte und die Schrift verändert.
Standardmäßig werden durch Konfigurationsänderungen die App-Aktivität und alle Aktivitäten neu erstellt
geht verloren. Um Kontinuität zu gewährleisten, werden adaptive Apps in der
onSaveInstanceState()
-Methode der Aktivität oder in einem ViewModel
-Objekt
Sicherheitsstatus
Adaptive Apps reagieren auf Änderungen in der Körperhaltung von faltbaren Geräten. Sicherheitsstatus „Auf dem Tisch“ und „Bücher“.
<ph type="x-smartling-placeholder">![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/building-adaptive-apps/foldable_in_tabletop_posture.png?authuser=6&hl=de)
Mit der Schnittstelle WindowInfoTracker
in Jetpack WindowManager können Sie
eine Liste der DisplayFeature
-Objekte für das Gerät abrufen Unter den Displays
Funktion FoldingFeature.State
ist. Dies gibt an, ob das Gerät
vollständig oder halb geöffnet.
Die Adaptive-Bibliothek für „Compose Material 3“ bietet die
currentWindowAdaptiveInfo()
-Funktion auf oberster Ebene, die ein
Instanz von WindowAdaptiveInfo
mit windowPosture
.
Eingabe über Berührung
Nutzer schließen oft externe Tastaturen, Touchpads, Mäuse und Eingabestifte an große Bildschirmgeräte. Peripheriegeräte steigern die Nutzerproduktivität, Eingabepräzision, persönlichen Ausdruck und Zugänglichkeit. Die meisten ChromeOS-Geräte verfügen über Tastaturen und Touchpads.
Adaptive Apps unterstützen zwar externe Eingabegeräte, aber ein Großteil der Arbeit wird für Android-Framework entwickelt:
Jetpack Compose 1.7 und höher: Tastaturnavigation mit Tabulatortaste und Maus oder Klicken, Auswählen und Scrollen auf dem Touchpad werden standardmäßig unterstützt.
Jetpack-Bibliothek
androidx.compose.material3
: Nutzer können schreiben mit einem Eingabestift in eine beliebigeTextField
-Komponente einfügen.Keyboard Shortcuts Helper: Ermöglicht die Verwendung von Tastaturkürzeln für die Android-Plattform und -App Tastenkombinationen, die Nutzer sehen können. Tastenkombinationen Ihrer App veröffentlichen in Keyboard Shortcuts Helper durch Überschreiben der
onProvideKeyboardShortcuts()
-Fenster-Callback.
Um Formfaktoren aller Größen vollständig zu unterstützen, unterstützen adaptive Apps die Eingabe aller Typen.
Adaptive Apps testen
Testen Sie verschiedene Bildschirm- und Fenstergrößen sowie unterschiedliche Gerätekonfigurationen. Verwenden Sie Screenshots auf Hostseite und Vorschauen vom Typ „Compose“, um Ihre App-Layouts zu prüfen. Führen Sie Ihre App auf Android Studio-Emulatoren und Remote-Android-Geräten aus, die in Google-Rechenzentren.
Qualitätsrichtlinien für Apps mit großen Bildschirmen
Die Qualitätsrichtlinien für Apps für große Bildschirme sorgen dafür, dass deine adaptive App einwandfrei funktioniert. auf Tablets, faltbaren Geräten und ChromeOS-Geräten. Die Richtlinien umfassen Tests, ermöglichen es Ihnen, die Funktionalität der App für kritische User Journeys zu prüfen. Obwohl die sich auf große Bildschirme konzentrieren, da sie mit allen Bildschirmgrößen kompatibel sind.
Mehrere Konfigurationen
Die DeviceConfigurationOverride
-Oberfläche in Compose 1.7 und höher
können Sie verschiedene Aspekte der Gerätekonfiguration überschreiben. Die API
Simuliert verschiedene Gerätekonfigurationen lokalisiert auf
zusammensetzbaren Inhalten,
die Sie testen möchten. Sie können beispielsweise mehrere,
UI-Größen bei einem einzigen Durchlauf der Testsuite auf einem einzelnen Gerät oder
Emulator.
Mit der Erweiterungsfunktion DeviceConfigurationOverride.then()
können Sie Folgendes tun:
Testen Sie verschiedene Konfigurationsparameter wie Schriftgröße, Sprache, Design und
die Layoutgröße anpassen.
Hostseitige Screenshots
Mit Host-Side-Screenshot-Tests lässt sich die visuelle Darstellung schnell und skalierbar überprüfen. Ihres App-Layouts. Testen Sie mithilfe von Screenshots auf Hostseite Ihre Benutzeroberfläche in unterschiedlichen Bildschirmgrößen.
Weitere Informationen finden Sie unter Screenshot-Test in der Vorschau erstellen.
Vorschauen erstellen
Mit der Vorschaufunktion „Compose“ können Sie die Benutzeroberfläche Ihrer App in der Android-Designansicht prüfen
Studio In Vorschauen werden Anmerkungen wie @PreviewScreenSizes
,
@PreviewFontScale
und @PreviewLightDark
, um zusammensetzbare Funktionen
in verschiedenen Konfigurationen erstellen. Sie können sogar mit der Vorschau interagieren.
Android Studio hebt auch häufige Probleme mit der Nutzerfreundlichkeit in Vorschauen hervor, z. B. Schaltflächen oder Textfelder, die zu breit sind.
Weitere Informationen finden Sie unter Vorschau der Benutzeroberfläche mit zusammensetzbaren Vorschauen anzeigen.
Emulatoren
Android Studio bietet eine Vielzahl von Emulatoren zum Testen verschiedener Layoutgrößen:
- Emulator mit anpassbarer Größe: Emuliert ein Smartphone, Tablet oder faltbares Gerät und lässt können Sie spontan zwischen ihnen wechseln.
- Pixel Fold Emulator: Emuliert das faltbare Pixel Fold Smartphone mit großem Display
- Pixel Tablet Emulator: Emuliert das Pixel Tablet-Gerät mit großem Display
- Desktop-Emulator: Ermöglicht das Testen von Freiform-Fenstern, Mausbewegungen und Tastenkombinationen
Remote-Gerätestreaming
Sichere Verbindung zu Android-Remote-Geräten herstellen, die in Google-Rechenzentren gehostet werden, und auf den neuesten Pixel- und Samsung-Geräten. Apps installieren und debuggen, ausführen ADB-Befehle verwenden und Geräte drehen und zusammenklappen, um sicherzustellen, dass Ihre App auf einem verschiedenen realen Geräten.
Das Remote-Gerätestreaming ist in Android Studio integriert. Weitere Informationen Siehe Android-Geräte-Streaming, unterstützt von Firebase.
Weitere Informationen
- I/O-Präsentation: Adaptive Android-Apps entwickeln