Verschiedene Smartwatch-Formen bedienen

Compose-Ansatz

Jetpack Compose auf Wear OS ist das empfohlene UI-Toolkit für Wear OS.

Compose auf Wear OS ausprobieren →

Apps auf Wear OS verwenden dieselben Layouttechniken wie andere Android-Geräte müssen aber mit spezifischen Einschränkungen für Smartwatches entwickelt werden.

Hinweis: Wenn Sie die genaue Funktionalität und Benutzeroberfläche einer mobilen App auf Wear OS übertragen, ist keine gute Nutzererfahrung zu erwarten.

Wenn Sie Ihre App für ein rechteckiges Mobilgerät entwickeln, werden Inhalte in der Nähe der Ecken des Displays möglicherweise auf runden Smartwatches abgeschnitten. Wenn Sie eine vertikale Liste mit Bildlauf verwenden, ist das weniger problematisch, da der Nutzer einen Bildlauf ausführen kann, um den Inhalt zu zentrieren. Bei einzelnen Bildschirmen kann dies jedoch zu einer schlechten Nutzererfahrung führen.

Wenn Sie die folgenden Einstellungen für Ihr Layout verwenden, wird Text auf Geräten mit runden Displays falsch angezeigt:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/very_long_hello_world"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Verwenden Sie Layouts in der Wear OS UI Library, die runde Geräte unterstützen, um dieses Problem zu beheben.

• Mit einem BoxInsetLayout können Sie verhindern, dass Ansichten in der Nähe der Ränder runder Displays abgeschnitten werden.
• Mit einem WearableRecyclerView können Sie ein gekrümmtes Layout erstellen, wenn Sie eine vertikale Liste von Elementen anzeigen und bearbeiten möchten, die für runde Displays optimiert ist.

Weitere Informationen zum Entwickeln von Apps finden Sie in den Designrichtlinien für Wear OS.

BoxInsetLayout verwenden

Abbildung 2 : Fenstereinzüge auf einem runden Display

Mit der Klasse BoxInsetLayout in der Wear OS UI Library können Sie ein Layout definieren, das für runde Displays geeignet ist. Mit dieser Klasse können Sie Ansichten einfach in der Mitte oder in der Nähe der Ränder des Displays ausrichten.

Das graue Quadrat in Abbildung 2 zeigt den Bereich, in dem das BoxInsetLayout seine untergeordneten Ansichten automatisch auf runden Displays platzieren kann, nachdem die erforderlichen Fenstereinzüge angewendet wurden. Damit untergeordnete Ansichten in diesem Bereich angezeigt werden können, geben sie das layout_boxedEdges Attribut mit den folgenden Werten an:

• Eine Kombination aus top, bottom, left, und right. Mit dem "left|top" Wert werden beispielsweise die linke und obere Kante des untergeordneten Elements innerhalb des grauen Quadrats in Abbildung 2 positioniert.
• Mit dem "all" Wert werden alle Inhalte des untergeordneten Elements innerhalb des grauen Quadrats in Abbildung 2 positioniert. Dies ist der häufigste Ansatz mit einem ConstraintLayout im Inneren.

Das in Abbildung 2 gezeigte Layout verwendet das <BoxInsetLayout> Element und funktioniert auf runden Displays:

<androidx.wear.widget.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="15dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:layout_boxedEdges="all">

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textAlignment="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/cancel" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:src="@drawable/ok" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.wear.widget.BoxInsetLayout>

Beachten Sie die fett markierten Teile des Layouts:

• android:padding="15dp"

  Diese Zeile weist dem <BoxInsetLayout> Element einen Abstand zu.

• android:padding="5dp"

  Diese Zeile weist dem inneren ConstraintLayout-Element einen Abstand zu.

• app:layout_boxedEdges="all"

  Diese Zeile sorgt dafür, dass das ConstraintLayout Element und seine untergeordneten Elemente in dem Bereich platziert werden, der durch die Fenstereinzüge auf runden Displays definiert wird.

Gekrümmtes Layout verwenden

Die Klasse WearableRecyclerView in der Wear OS UI Library ermöglicht Ihnen die Aktivierung eines gekrümmten Layouts, das für runde Displays optimiert ist. Informationen zum Aktivieren eines gekrümmten Layouts für scrollbare Listen in Ihrer App finden Sie unter Listen auf Wear OS erstellen.