Für verschiedene Bildschirmgrößen entwickeln

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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

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

Responsive Layouts mit Material 3 erstellen

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 contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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. Sie koordinieren die App und die einzelnen Bildschirme (Navigationsrouten), um das richtige Scrollen und die richtige TimeText-Positionierung zu ermöglichen.

Beachten Sie außerdem Folgendes:

• Die Angabe des ersten und letzten ItemType, um das richtige Padding zu bestimmen.
• Die Verwendung von ListHeader für den ersten Eintrag in der Liste, da Text-Überschriften keinen Abstand haben sollten.

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

• Die Horologist-Bibliothek bietet Hilfsfunktionen zum Erstellen optimierter und differenzierter Apps für Wear OS.
• Das Beispiel „ComposeStarter“, das die in diesem Leitfaden beschriebenen Prinzipien veranschaulicht.
• Das JetCaster-Beispiel: Ein komplexeres Beispiel für die Erstellung einer App, die mit verschiedenen Bildschirmgrößen funktioniert, mit der Horologist-Bibliothek.

Scroll-Layouts in Ihrer App verwenden

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

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

Dialogfelder

Dialogfelder sollten auch scrollbar sein, es sei denn, es gibt einen triftigen Grund, dies nicht zu tun. Die Komponente AlertDialog ist responsiv und kann standardmäßig gescrollt werden, wenn die Inhalte die Höhe des Darstellungsbereichs überschreiten.

Für benutzerdefinierte Bildschirme sind möglicherweise Layouts ohne Scrollen erforderlich.

Für einige Bildschirme eignen sich möglicherweise weiterhin 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 sollten Sie sich die kanonischen Richtlinien in den Figma-Designkits ansehen und ein Design implementieren, das sich an die Größe des Bildschirms anpasst und die richtigen Ränder verwendet.

Durch Breakpoints unterschiedliche Darstellungen bereitstellen

Auf größeren Displays können Sie zusätzliche Inhalte und Funktionen einbinden. Verwenden Sie Bruchstellen für die Bildschirmgröße, um diese Art von differenzierter Darstellung zu implementieren. Dabei wird ein anderes Layout angezeigt, 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 den Designrichtlinien werden weitere dieser Möglichkeiten veranschaulicht.

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

Mit Vorschauen erstellen können Sie für eine Vielzahl von Wear OS-Bildschirmgrößen entwickeln. Wenn Sie sowohl die Definitionen für Geräte als auch für die Schriftgrößen verwenden, sehen Sie Folgendes:

• Wie Ihre Bildschirme bei den extremen Größen aussehen, z. B. die größte Schriftart in Kombination mit dem kleinsten Bildschirm.
• Wie sich die differenzierte Darstellung bei verschiedenen Seitenaufruf-Bruchpunkten verhält.

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

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

Screenshot-Tests

Neben den Vorschautests können Sie mithilfe von Screenshot-Tests auch eine Reihe von vorhandenen 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 build.gradle-Dateien Ihres Projekts und Ihrer App für die Verwendung von Roborazzi.
2. Erstellen Sie einen Screenshot-Test für jeden Bildschirm in Ihrer App. Im Beispiel „ComposeStarter“ ist beispielsweise ein Test für die GreetingScreen implementiert, wie in GreetingScreenTest zu sehen:

@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

    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 Bilder 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 überprüfen:

./gradlew verifyRoborazziDebug

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