Entwickeln Sie Kacheln für verschiedene Bildschirmgrößen

Die Kacheln Ihrer App sollten auf Wear OS-Geräten aller Größen gut funktionieren. Nutzen Sie zusätzlichen Platz, wenn er verfügbar ist, und sorgen Sie dafür, dass die Kacheln auch auf kleineren Displays gut aussehen. In diesem Leitfaden finden Sie Empfehlungen, wie Sie diese Nutzererfahrung erreichen können.

Weitere Informationen zu den Designprinzipien für adaptive Layouts

Differenzierte Nutzererlebnisse durch Breakpoints

Layouts aus der ProtoLayout Material-Bibliothek sind responsiv und sorgen für die richtige Platzierung und Sichtbarkeit von Elementen. In einigen Fällen kann es jedoch sinnvoll sein, die Anzahl der sichtbaren Elemente zu variieren, um optimale Ergebnisse zu erzielen. Auf einem kleineren Display möchten Sie vielleicht drei Schaltflächen und auf einem größeren Display fünf.

Um diese Art von differenzierter Nutzererfahrung zu implementieren, verwenden Sie Breakpoints für die Bildschirmgröße. So zeigen Sie ein anderes Layout an, wenn die Bildschirmgröße 225 dp überschreitet:

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

Die Designrichtlinien enthalten weitere Möglichkeiten.

Kacheln auf verschiedenen Bildschirmgrößen mit Vorschauen testen

Es ist wichtig, Ihre Layouts auf verschiedenen Bildschirmgrößen zu testen. Verwenden Sie die Anmerkungen für die Kachelvorschau zusammen mit den Klassen TilePreviewHelper und TilePreviewData:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

So können Sie sich eine Vorschau Ihrer Kachel-Layouts direkt in Android Studio ansehen.

Ein vollständiges Beispiel finden Sie im Beispiel für Timer-Kacheln auf GitHub.