Entwickeln Sie Kacheln für verschiedene Bildschirmgrößen

Die Kacheln Ihrer App sollten auf Wear OS-Geräten aller Größen gut funktionieren, nach Möglichkeit zusätzlichen Platz nutzen, und sehen auf kleineren Bildschirmen gut aus. und Bildschirmen. Dieser Leitfaden enthält Empfehlungen, wie Sie diese Nutzer*innen erreichen. Nutzererfahrung.

Weitere Informationen zu den Designprinzipien für adaptive Layouts finden Sie in den Tipps für das Design.

Responsive Layouts mit ProtoLayout erstellen

Die Bibliothek ProtoLayout Material enthält vordefinierte Layouts, die Ihnen Ihre Kacheln erstellen. Diese Layouts sind bereits so konzipiert, dass sie sich an den Bildschirm anpassen. Größe.

Sehen Sie sich die Figma-Designlayouts an. Diese zeigen die kanonische Layouts verfügbar und wie Sie damit Ihr Design erstellen:

Wir empfehlen PrimaryLayout oder EdgeContentLayout als oberste Ebene Layouts für die meisten Anwendungsfälle. Legen Sie das responsive Verhalten fest mit setResponsiveContentInsetEnabled, z. B.:

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

Durch Haltepunkte differenzierte Inhalte anbieten

Layouts aus der Bibliothek ProtoLayout Material sind bereits responsiv und achten Sie auf die richtige Platzierung und Sichtbarkeit der Elemente. In einigen Fällen sollten Sie die Anzahl der sichtbaren Elemente variieren, um optimale Ergebnisse zu erzielen. Für können Sie z. B. 3 Schaltflächen auf einem kleineren Bildschirm und 5 auf einem größeren Display.

Verwenden Sie zur Implementierung dieser differenzierten Nutzererfahrung die Bildschirmgröße. Haltepunkte. So zeigen Sie bei einer Bildschirmgröße von mehr als 225 dp ein anderes Layout an:

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 Methode Anmerkungen der Kachelvorschau sowie TilePreviewHelper und TilePreviewData-Klassen:

@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. Die Das vorherige Beispiel für Haltepunkte zeigt, wie zusätzliche Schaltflächen werden angezeigt, wenn der Bildschirmraum dies zulässt, in der Vorschau:

Zusätzliche Schaltflächen auf größeren Displays

Kleine und große Bildschirme, die die Auswirkungen des Haltepunkts anzeigen

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