Für verschiedene Bildschirmgrößen entwickeln

Deine App sollte auf Wear OS-Geräten aller Größen gut funktionieren, zusätzlichen Platz nutzen, sofern verfügbar, und auch auf kleineren Bildschirmen gut aussehen. In diesem Leitfaden finden Sie Empfehlungen, wie Sie diese Nutzerfreundlichkeit erreichen können.

Weitere Informationen zu den Designprinzipien für adaptive Layouts findest du in den Designrichtlinien.

Responsive Layouts mit Material 3 erstellen

Layouts sollten prozentuale Ränder haben. In Wear Compose Material 3 berechnet ScreenScaffold automatisch den prozentualen Abstand und stellt contentPadding für das Inhalts-Lambda bereit. Übergebt diesen contentPadding-Parameter an TransformingLazyColumn.

Im folgenden Code-Snippet wird eine TransformingLazyColumn-Komponente verwendet, um Inhalte zu erstellen, die auf verschiedenen Wear OS-Bildschirmgrößen gut aussehen:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

In diesem Beispiel werden auch ScreenScaffold und AppScaffold veranschaulicht. Diese koordinieren zwischen der App und einzelnen Bildschirmen (Navigationsrouten), um das richtige Scrollverhalten und die richtige Positionierung von TimeText zu gewährleisten.

Beachten Sie außerdem Folgendes für den oberen und unteren Abstand:

  • Die Verwendung von Modifier.minimumVerticalContentPadding (z. B. ListHeaderDefaults.minimumTopListContentPadding und ButtonDefaults.minimumVerticalListContentPadding), damit TransformingLazyColumn mindestens das empfohlene Padding oben und unten verwendet, wenn diese Elemente am Rand der Liste angezeigt werden.
  • Die Verwendung von ListHeader für das erste Element in der Liste anstelle eines einfachen Text-Kompositionselements.

Die vollständigen Spezifikationen finden Sie in den Figma-Design-Kits. Weitere Informationen und Beispiele finden Sie unter:

  • Die Horologist-Bibliothek bietet Hilfsprogramme, mit denen du optimierte und differenzierte Apps für Wear OS entwickeln kannst.
  • ComposeStarter-Beispiel: Ein Beispiel, das die in diesem Leitfaden beschriebenen Prinzipien veranschaulicht.
  • Das JetCaster-Beispiel: Ein komplexeres Beispiel für die Entwicklung einer App, die mit verschiedenen Bildschirmgrößen funktioniert, unter Verwendung der Horologist-Bibliothek.

Scrollbare Layouts in Ihrer App verwenden

Verwende beim Implementieren deiner Bildschirme standardmäßig ein scrollbares Layout, wie weiter oben auf dieser Seite gezeigt. So können Nutzer die Komponenten deiner App unabhängig von den Anzeigeeinstellungen oder der Bildschirmgröße des Wear OS-Geräts erreichen.

Die Auswirkungen unterschiedlicher Gerätegrößen und Schriftskalierungen

Die Auswirkungen unterschiedlicher Gerätegrößen und Schriftartskalierungen.

Dialogfelder

Dialogfelder sollten auch scrollbar sein, es sei denn, es gibt einen sehr guten Grund, dies nicht zu tun. Die Komponente AlertDialog ist responsiv und standardmäßig scrollbar, wenn der Inhalt die Höhe des Darstellungsbereichs überschreitet.

Benutzerdefinierte Bildschirme erfordern möglicherweise Layouts ohne Scrollen

Einige Bildschirme eignen sich möglicherweise weiterhin für Layouts ohne Scrollen. Beispiele hierfür sind der Hauptbildschirm des Players in einer Medien-App und der Trainingsbildschirm in einer Fitness-App.

In diesen Fällen solltest du die kanonischen Anleitungen in den Figma-Design-Kits beachten und ein Design implementieren, das auf die Bildschirmgröße reagiert und die richtigen Ränder verwendet.

Unterschiedliche Nutzererfahrungen durch Haltepunkte bieten

Auf größeren Displays können Sie zusätzliche Inhalte und Funktionen anbieten. Wenn du eine solche differenzierte Oberfläche implementieren möchtest, verwende Breakpoints für die Bildschirmgröße, um ein anderes Layout anzuzeigen, 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.
    }
    // ...

In den Designrichtlinien werden weitere dieser Möglichkeiten veranschaulicht.

Kombinationen aus Bildschirm- und Schriftgrößen mithilfe von Vorschauen testen

Compose-Vorschauen helfen Ihnen bei der Entwicklung für verschiedene Wear OS-Bildschirmgrößen. Verwenden Sie sowohl die Geräte- als auch die Schriftgrößenvorschau, um Folgendes zu sehen:

  • Wie Ihre Bildschirme bei extremen Größen aussehen, z. B. bei der größten Schriftart in Kombination mit dem kleinsten Bildschirm.
  • Wie sich die differenzierte Darstellung bei verschiedenen Haltepunkten verhält.

Achte darauf, dass du für alle Bildschirme in deiner App Vorschauen mit WearPreviewDevices und WearPreviewFontScales implementierst. Ausführliche Informationen zum Konfigurieren von Wear OS-Vorschauen, benutzerdefinierten Hardwarespezifikationen und der Vorschau von gescrollten Listen findest du unter Vorschau der Benutzeroberfläche in Compose für Wear OS.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}

Screenshot-Tests

Über die Vorschau hinaus können Sie mit Screenshot-Tests eine Reihe vorhandener Hardwaregrößen testen. Das ist besonders nützlich, wenn diese Geräte nicht sofort verfügbar sind und das Problem bei anderen Bildschirmgrößen möglicherweise nicht auftritt.

Screenshot-Tests helfen Ihnen auch, Regressionen an bestimmten Stellen in Ihrer Codebasis zu identifizieren.

In unseren Beispielen wird Roborazzi für Screenshot-Tests verwendet:

  1. Konfigurieren Sie die Projekt- und App-build.gradle-Dateien für die Verwendung von Roborazzi.
  2. Erstellen Sie für jeden Bildschirm in Ihrer App einen Screenshot-Test. Der folgende Code zeigt beispielsweise einen Screenshot-Test für einen Bildschirm mit einer Liste:
@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

Wichtige Hinweise:

  • WearDevice.entries enthält Definitionen für die gängigsten Wear OS-Geräte, damit die Tests auf einer repräsentativen Auswahl von Bildschirmgrößen ausgeführt werden.

Goldene Images generieren

Führen Sie den folgenden Befehl in einem Terminal aus, um Bilder für Ihre Bildschirme zu generieren:

./gradlew recordRoborazziDebug

Bilder bestätigen

Führen Sie den folgenden Befehl in einem Terminal aus, um Änderungen an vorhandenen Images zu prüfen:

./gradlew verifyRoborazziDebug

Ein vollständiges Beispiel für Screenshot-Tests finden Sie im ComposeStarter-Beispiel.