Entwickeln Sie Kacheln für verschiedene Bildschirmgrößen

Die Kacheln Ihrer App sollten auf Wear OS-Geräten jeder Größe gut funktionieren, den zusätzlichen Platz nutzen, wo verfügbar, und auch auf kleineren Displays 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 den Designrichtlinien.

Responsive Layouts mit ProtoLayout erstellen

Die ProtoLayout Material-Bibliothek bietet vordefinierte Layouts, mit denen Sie Ihre Ansichten erstellen können. 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

Layouts aus der Bibliothek ProtoLayout Material sind bereits responsiv und sorgen für die korrekte 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. So können Sie beispielsweise auf einem kleineren Display drei Schaltflächen und auf einem größeren Display fünf Schaltflächen verwenden.

Verwenden Sie Bruchpunkte für die Bildschirmgröße, um diese Art von differenzierter Darstellung zu implementieren. So legen Sie fest, dass ein anderes Layout angezeigt wird, 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()

In den Designrichtlinien werden weitere Möglichkeiten veranschaulicht.

Ansichten für verschiedene Bildschirmgrößen mithilfe von Vorschauen testen

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

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

So können Sie sich eine Vorschau Ihrer Ansichten direkt in Android Studio ansehen. Das vorherige Beispiel für Breakpoints zeigt, wie zusätzliche Schaltflächen in der Vorschau angezeigt werden, wenn der Bildschirm dafür ausreichend Platz bietet:

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