Für verschiedene Bildschirmgrößen entwickeln

Deine App sollte auf Wear OS-Geräten aller Größen gut funktionieren, gegebenenfalls zusätzlichen Platz nutzen und auch auf kleineren Bildschirmen gut aussehen. 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 der Designanleitung.

Responsive Layouts mit Horologist erstellen

Layouts sollten prozentbasierte Ränder haben. Da Compose standardmäßig mit absoluten Werten ausgeführt wird, verwenden Sie Komponenten aus der Horologenbibliothek, die die folgenden Funktionen bietet:

• Horizontale Ränder sind basierend auf einem Prozentsatz der Bildschirmgröße des Geräts korrekt festgelegt.
• Der obere und untere Abstand sind richtig eingestellt. Dies bringt besondere Herausforderungen mit sich, da der empfohlene obere und untere Abstand von den verwendeten Komponenten abhängen kann. Beispielsweise sollte eine Chip einen anderen Abstand zu einer Text-Komponente haben, wenn sie in einer Liste verwendet wird.
• TimeText Ränder sind richtig festgelegt.

Im folgenden Code-Snippet wird die Horologen-Version des ScalingLazyColumn-Layouts verwendet, um Inhalte zu erstellen, die auf verschiedenen Wear OS-Bildschirmgrößen ansprechend aussehen:

import com.google.android.horologist.compose.layout.ScalingLazyColumn

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.Text,
        last = ItemType.SingleButton
    )
)

ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState,
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(...)
        }
    }
}

In diesem Beispiel werden auch ScreenScaffold]3 und AppScaffold gezeigt. Diese koordinieren zwischen der App und den einzelnen Bildschirmen (Navigationsrouten), damit das Scrollen und die TimeText-Positionierung richtig funktionieren.

Für den Abstand oben und unten ist Folgendes zu beachten:

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

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

• Die Horologenbibliothek enthält Komponenten zum Erstellen optimierter und differenzierter Apps für Wear OS.
• Das ComposeStarter-Beispiel: ein Beispiel für die in diesem Leitfaden beschriebenen Prinzipien.
• Das JetCaster-Beispiel – ein komplexeres Beispiel für die Erstellung einer App für unterschiedliche Bildschirmgrößen mithilfe der Horologist-Bibliothek.

Scroll-Layouts in Ihrer App verwenden

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

Die Auswirkungen unterschiedlicher Gerätegrößen und 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 von Horologen bereitgestellten Komponente ResponsiveDialog wird Folgendes hinzugefügt:

• Standardmäßig scrollen.
• Prozentuale Margen korrigieren.
• Schaltflächen, die ihre Breite anpassen, wenn genügend Platz vorhanden ist, um mehr Tippziele zu erreichen.

Responsive Dialogfelder mit standardmäßigem Scrollen und Schaltflächen, die sich an den verfügbaren Platz anpassen.

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 sind der Hauptbildschirm des Players in einer Medien-App und der Trainingsbildschirm in einer Fitness-App.

Sehen Sie sich in diesen Fällen die kanonische Anleitung in den Figma-Designkits an und implementieren Sie ein Design, das mit den richtigen Rändern an die Bildschirmgröße angepasst wird.

Durch Haltepunkte differenzierte Inhalte anbieten

Auf größeren Displays können Sie zusätzliche Inhalte und Funktionen präsentieren. Um diese Art von differenzierter Darstellung zu implementieren, kannst du Haltepunkte für die Bildschirmgröße verwenden, 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.
}

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:

• Die Darstellung Ihrer Bildschirme bei extremen Größen, z. B. größte Schriftart kombiniert mit kleinstem Bildschirm.
• 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 ListScreenPreview() {
    ListScreen()
}

Screenshot-Test

Neben Vorschautests können Sie mit Screenshot-Tests auch Tests mit einer Reihe von vorhandenen Hardwaregrößen durchführen. Das ist besonders nützlich, wenn diese Geräte nicht sofort für Sie verfügbar sind und das Problem bei anderen Bildschirmgrößen nicht auftritt.

Mit Screenshottests können Sie auch Regressionen an bestimmten Stellen Ihrer Codebasis identifizieren.

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

1. Konfigurieren Sie Ihre Projekt- und Anwendungsdateien build.gradle für die Verwendung von Roborazzi.
2. Erstellen Sie einen Screenshot-Test für jeden Bildschirm in Ihrer App. Im ComposeStarter-Beispiel wird beispielsweise ein Test für GreetingScreen implementiert, wie in GreetingScreenTest dargestellt:

@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 können Sie Screenshots generieren, in denen sich TimeText nicht ändert und versehentlich Tests fehlschlagen lassen.
• WearDevice.entries enthält Definitionen für die gängigsten Wear OS-Geräte, sodass 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

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 Beispiel ComposeStarter.