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 Nutzerfreundlichkeit erreichen.

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 Kacheln erstellen können. Diese Layouts sind bereits so konzipiert, dass sie sich an die Bildschirmgröße anpassen.

Sehen Sie sich die Figma-Designlayouts an, in denen die verfügbaren kanonischen Layouts und die Verwendung dieser Layouts für Ihr Design veranschaulicht werden:

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

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

Durch Breakpoints unterschiedliche Darstellungen bereitstellen

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 die besten 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:

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

In den Designrichtlinien werden weitere Möglichkeiten veranschaulicht.

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

Es ist wichtig, Ihre Layouts auf 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 Bildschirmplatz dies zulässt:

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

Kleine und große Displays, die die Auswirkungen des Wendepunkts zeigen

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