Entwickeln Sie Kacheln für verschiedene Bildschirmgrößen

Die Kacheln deiner App sollten auf Wear OS-Geräten aller Größen gut funktionieren, wobei gegebenenfalls zusätzlicher Platz genutzt wird 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 ProtoLayout erstellen

Die Bibliothek ProtoLayout Material enthält vordefinierte Layouts, die Ihnen beim Erstellen Ihrer Kacheln helfen. Diese Layouts sind bereits so konzipiert, dass sie sich an die Bildschirmgröße anpassen.

In den Figma-Designlayouts sind die verfügbaren kanonischen Layouts und die Erstellung Ihres Designs mit ihnen beschrieben:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

Für die meisten Anwendungsfälle empfehlen wir PrimaryLayout oder EdgeContentLayout als Layout der obersten Ebene. Legen Sie das responsive Verhalten mit setResponsiveContentInsetEnabled fest. Beispiel:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

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:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

Im Leitfaden für das Design finden Sie weitere Möglichkeiten.

Kacheln mithilfe der Vorschau auf verschiedenen Bildschirmgrößen testen

Es ist wichtig, Ihre Layouts bei verschiedenen Bildschirmgrößen zu testen. Verwenden Sie die Annotationen der Kachelvorschau zusammen mit den Klassen TilePreviewHelper und TilePreviewData:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

So kannst du eine Vorschau deiner Kachellayouts direkt in Android Studio ansehen. Das vorherige Beispiel für Haltepunkte zeigt, wie zusätzliche Schaltflächen in der Vorschau angezeigt werden, wenn der Platz auf dem Bildschirm dies zulässt:

Ein vollständiges Beispiel finden Sie im Beispiel für Medienkacheln auf GitHub.