Ihre App sollte auf Wear OS-Geräten aller Größen funktionieren, je mehr Platz verfügbar ist, und sehen auch auf kleineren Bildschirmen gut aus. In diesem Leitfaden finden Sie Empfehlungen, wie Sie diese Nutzererfahrung optimieren können.
Weitere Informationen zu den Designprinzipien für adaptive Layouts finden Sie in den Tipps für das Design.
Responsive Layouts mit Horologist erstellen
Layouts sollten prozentbasierte Ränder haben. Da die Funktion „Compose“ Standard in absoluten Werten verwenden, verwenden Sie Komponenten aus dem Horologenbibliothek mit folgenden Funktionen:
- Die horizontalen Ränder sind basierend auf einem Prozentsatz des Gerätebildschirms richtig festgelegt. Größe.
- Der obere und untere Abstand sind richtig eingestellt. Dies birgt besondere Herausforderungen
da der empfohlene Abstand oben und unten
von den Komponenten abhängen kann,
verwendet. Beispielsweise sollte ein
Chip
einen anderen Abstand haben als einText
. -Komponente, wenn sie in einer Liste verwendet wird. TimeText
Ränder sind richtig festgelegt.
Im folgenden Code-Snippet wird die Horologen-Version des
ScalingLazyColumn
-Layout, um Inhalte zu erstellen, die auf verschiedenen Geräten gut aussehen
der Wear OS-Bildschirmgrößen:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
In diesem Beispiel werden auch ScreenScaffold
und AppScaffold
veranschaulicht.
Diese Koordination zwischen der App und den einzelnen Bildschirmen
(Navigationsrouten), um für ein korrektes Scrollverhalten und
TimeText
-Positionierung.
Für den Abstand oben und unten ist Folgendes zu beachten:
- Die Spezifikation des ersten und letzten
ItemType
, um die korrekte Abstand. - Die Verwendung von
ResponsiveListHeader
für das erste Element in der Liste, weilText
-Header sollten keinen Abstand haben.
Die vollständigen Spezifikationen finden Sie in den Figma-Designkits. Weitere Informationen Details und Beispiele finden Sie hier:
- Die Horologenbibliothek enthält Komponenten, die beim Erstellen und differenzierte Apps für Wear OS optimieren.
- ComposeStarter-Beispiel: ein Beispiel für die die in diesem Leitfaden erläutert werden.
- JetCaster-Beispiel – ein komplexeres Beispiel für das Erstellen eines App für unterschiedliche Bildschirmgrößen, mit der Horologen-Bibliothek.
Scroll-Layouts in Ihrer App verwenden
Verwenden Sie als Standardauswahl ein Scroll-Layout, wie weiter oben auf dieser Seite gezeigt. Implementierung Ihrer Bildschirme. So können Nutzer auf die Komponenten Ihrer App zugreifen unabhängig von den Anzeigeeinstellungen oder der Bildschirmgröße des Wear OS-Geräts.
![Die Auswirkungen unterschiedlicher Gerätegröße und Schriftskalierung](https://developer.android.google.cn/static/images/wear/screenshot-test.png?authuser=9&hl=de)
Die Auswirkungen unterschiedlicher Gerätegrößen und die Schriftskalierung.
Dialogfelder
Die Dialogfelder sollten auch gescrollt werden können, es sei denn, es gibt einen sehr guten Grund, dies nicht zu tun.
Mit der Komponente ResponsiveDialog
von Horologist
Folgendes:
- Standardmäßig scrollen.
- Prozentuale Margen korrigieren.
- Schaltflächen, die ihre Breite anpassen, wenn der Platz ausreicht, um eine größere Tippziele
![Adaptives Dialogverhalten beim Horologen](https://developer.android.google.cn/static/images/wear/adaptive-dialogs.png?authuser=9&hl=de)
Responsive Dialogfelder mit standardmäßigem Scrollen und Schaltflächen, die sich anpassen an den verfügbaren Speicherplatz.
Für benutzerdefinierte Bildschirme sind möglicherweise nicht scrollbare Layouts erforderlich
Einige Bildschirme eignen sich möglicherweise immer noch für Layouts ohne Scrollen. Mehrere Beispiele den Hauptbildschirm des Players in einer Medien-App und den Trainingsbildschirm Fitness-App.
Sehen Sie sich in diesen Fällen die kanonischen Hinweise an, die in der Figma-Designkits an und implementieren ein Design, das auf die Größe responsiv ist. des Bildschirms mit den richtigen Rändern.
Durch Haltepunkte differenzierte Inhalte anbieten
Auf größeren Displays können Sie zusätzliche Inhalte und Funktionen präsentieren. Bis Implementieren Sie diese Art von differenzierter Erfahrung, verwenden Sie Haltepunkte für die Bildschirmgröße, mit einem anderen Layout, wenn die Bildschirmgröße 225 dp überschreitet:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
Im Leitfaden für das Design werden weitere dieser Möglichkeiten erläutert.
Kombinationen von Bildschirm- und Schriftgrößen mit Vorschauen testen
Mit der Funktion Vorschauen erstellen können Sie Apps für verschiedene Wear OS-Bildschirmgrößen entwickeln. Verwenden Sie die Vorschaudefinitionen für Geräte und für die Schriftskalierung, um Folgendes zu sehen:
- Wie Ihre Bildschirme bei extremen Größen aussehen, z. B. mit der größten Schriftart mit dem kleinsten Bildschirm gekoppelt.
- Wie sich Ihre differenzierte Erfahrung über Haltepunkte hinweg verhält.
Implementieren Sie Vorschauen mit WearPreviewDevices
und
WearPreviewFontScales
für alle Bildschirme in Ihrer App.
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Screenshot-Test
Neben Vorschautests können Sie auch Screenshots vorhandenen Hardwaregrößen. Das ist besonders nützlich, wenn diese Geräte stehen Ihnen nicht sofort zur Verfügung und das Problem tritt auf anderen Bildschirmgrößen.
Mit Screenshot-Tests können Sie auch Regressionen an bestimmten Stellen in Ihre Codebasis zu verbessern.
In unseren Beispielen wird für Screenshot-Tests Roborazzi verwendet:
- Konfigurieren Sie die zu verwendenden
build.gradle
-Dateien für Projekt und Anwendung. Roborazzi. - Erstellen Sie einen Screenshot-Test für jeden Bildschirm in Ihrer App. Beispiel:
Im ComposeStarter-Beispiel ist ein Test für
GreetingScreen
wie inGreetingScreenTest
zu sehen:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Wichtige Hinweise:
- Mit
FixedTimeSource
kannst du Screenshots generieren, wenn dasTimeText
nicht variieren und führen versehentlich dazu, dass Tests fehlschlagen. WearDevice.entries
enthält Definitionen für die gängigsten Wear OS-Geräte. dass die Tests für einen repräsentativen Bereich von Bildschirmgrößen durchgeführt werden.
Goldene Bilder generieren
Führen Sie den folgenden Befehl in einem Terminal aus, um Bilder für Ihre Bildschirme zu generieren:
./gradlew recordRoborazziDebug
Images prüfen
Um Änderungen an vorhandenen Images zu prüfen, führen Sie den folgenden Befehl in einem Terminal:
./gradlew verifyRoborazziDebug
Ein vollständiges Beispiel für Screenshot-Tests finden Sie im Beispiel ComposeStarter.