Für verschiedene Bildschirmgrößen entwickeln

Ihre App sollte auf Wear OS-Geräten aller Größen gut funktionieren, zusätzlichen Platz nutzen, wenn verfügbar, und auch auf kleineren Bildschirmen gut aussehen. In dieser Anleitung finden Sie Empfehlungen, wie Sie diese Nutzererfahrung erreichen.

Weitere Informationen zu den Designprinzipien für adaptive Layouts finden Sie in der Designanleitung.

Responsive Layouts mit Material 3 erstellen

Im folgenden Code-Snippet wird die Komponente TransformingLazyColumn 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,
                )
            }
        }
    }
}
List.kt

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

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

• Die Spezifikation des ersten und letzten ItemType, um den korrekten Abstand zu bestimmen.
• Die Verwendung von ListHeader für das erste Element in der Liste, da Text-Header keinen Abstand haben sollten.

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

• Die Horologist-Bibliothek bietet Hilfsfunktionen, mit denen Sie optimierte und differenzierte Apps für Wear OS erstellen können.
• Das ComposeStarter-Beispiel veranschaulicht die in dieser Anleitung beschriebenen Prinzipien.
• Das JetCaster-Beispiel ist ein komplexeres Beispiel für die Entwicklung einer App, die auf verschiedenen Bildschirmgrößen funktioniert, und verwendet die Horologist-Bibliothek.

Scrollbare Layouts in Ihrer App verwenden

Verwenden Sie ein scrollbares Layout, wie weiter oben auf dieser Seite gezeigt, als Standardauswahl bei der Implementierung Ihrer Bildschirme. So können Nutzer unabhängig von den Anzeigeeinstellungen oder der Bildschirmgröße des Wear OS-Geräts auf die Komponenten Ihrer App zugreifen.

Die Auswirkungen verschiedener Gerätegrößen und der Schriftgrößenanpassung.

Dialogfelder

Dialogfelder sollten ebenfalls 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.

Für benutzerdefinierte Bildschirme sind möglicherweise nicht scrollbare Layouts erforderlich

Einige Bildschirme sind möglicherweise besser für nicht scrollbare Layouts geeignet. Beispiele sind der Hauptbildschirm des Players in einer Media-App und der Trainingsbildschirm in einer Fitness-App.

In diesen Fällen sollten Sie sich an die kanonische Anleitung in den Figma-Design-Kitshalten und ein Design implementieren, das auf die Größe des Bildschirms reagiert und die richtigen Ränder verwendet.

Differenzierte Nutzererlebnisse durch Breakpoints ermöglichen

Auf größeren Displays können Sie zusätzliche Inhalte und Funktionen einführen. Um diese Art von differenzierter Nutzererfahrung zu implementieren, verwenden Sie Breakpoints für die Bildschirmgröße, die ein anderes Layout anzeigen, 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.
    }
    // ...
List.kt

In der Designanleitung werden weitere Möglichkeiten beschrieben.

Kombinationen von Bildschirm- und Schriftgrößen mit Vorschauen testen

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

• Wie Ihre Bildschirme bei extremen Größen aussehen, z. B. die größte Schriftart in Kombination mit dem kleinsten Bildschirm.
• Wie sich Ihre differenzierte Nutzererfahrung über Breakpoints hinweg verhält.

Implementieren Sie Vorschauen mit WearPreviewDevices und WearPreviewFontScales für alle Bildschirme in Ihrer App.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Screenshot-Tests

Neben Vorschautests können Sie mit Screenshot-Tests Ihre App auf einer 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 nicht auftritt.

Mit Screenshot-Tests können Sie auch Regressionen an bestimmten Stellen in Ihrer Codebasis identifizieren.

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

1. Konfigurieren Sie die Dateien build.gradle Ihres Projekts und Ihrer App build.gradle so, dass Roborazzi verwendet wird.
2. Erstellen Sie einen Screenshot-Test für jeden Bildschirm in Ihrer App. Im folgenden Code sehen Sie 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
    }
}
ListTest.kt

Einige wichtige Punkte:

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

Referenzbilder generieren

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

./gradlew recordRoborazziDebug

Bilder überprüfen

Führen Sie den folgenden Befehl in einem Terminal aus, um Änderungen mit vorhandenen Bildern zu vergleichen:

./gradlew verifyRoborazziDebug

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