Diese Seite wurde von der Cloud Translation API übersetzt.

Adaptive Apps erstellen

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> <ph type="x-smartling-placeholder">

</ph> Abbildung 1: Die adaptive App optimiert das Layout für verschiedene Fenstergrößen.

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> **Abbildung 2**: Warnung zur technischen Qualität auf der Detailseite der App.

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.

Darstellung der Fenstergrößenklassen mit kompakter, mittlerer und maximierter Breite. — </ph> **Abbildung 3**: Fenstergrößenklassen basierend auf der Anzeigebreite.

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().windowSizeClassAdaptiveLayoutSnippets.kt

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.

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. — </ph> **Abbildung 4**: Anzahl der Inhaltsbereiche pro Fenstergrößenklasse.

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> <ph type="x-smartling-placeholder">

</ph> Abbildung 5: Layout mit Listendetails mit Listenbereich als Navigationsziel.

</ph> <ph type="x-smartling-placeholder">

</ph> Abbildung 6: Layout mit Listendetails mit Detailbereich als Navigationsziel.

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> **Abbildung 7**: Faltbares Gerät in der Haltung „Auf dem Tisch“

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 beliebige TextField-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