Verschiedene Smartwatch-Formen bedienen

Apps unter Wear OS nutzen dieselben Layouttechniken wie andere Android-Geräte, müssen aber mit uhrspezifischen Einschränkungen entwickelt werden.

Hinweis:Du solltest nicht die exakte Funktionalität und Benutzeroberfläche einer mobilen App zu Wear OS übertragen, da du sonst eine gute Nutzererfahrung erwarten kannst.

Wenn du deine App für ein rechteckiges Handheld-Gerät entwickelst, werden Inhalte in den Ecken des Bildschirms auf runden Uhren möglicherweise abgeschnitten. Wenn du eine scrollbare vertikale Liste verwendest, ist das weniger Problem, da der Nutzer scrollen 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 Bildschirmen 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>

Verwende zur Lösung dieses Problems Layouts in der Wear OS-UI-Bibliothek, die runde Geräte unterstützen.

  • Mit BoxInsetLayout können Sie verhindern, dass Ansichten an den Rändern von runden Bildschirmen abgeschnitten werden.
  • Mit WearableRecyclerView kannst du ein gebogenes Layout erstellen, wenn du eine vertikale Liste von Elementen anzeigen und bearbeiten möchtest, die für runde Bildschirme optimiert sind.

Weitere Informationen zum Entwerfen von Apps findest du in den Designrichtlinien für Wear OS.

BoxInsetLayout verwenden

Abbildung 2: Fenstereinblendungen auf einem runden Bildschirm.

Mit der Klasse BoxInsetLayout in der Wear OS-UI-Bibliothek kannst du ein Layout definieren, das für runde Bildschirme geeignet ist. Mit dieser Klasse können Sie Ansichten problemlos an der Mitte oder nahe den Bildschirmrändern ausrichten.

Das graue Quadrat in Abbildung 2 zeigt den Bereich, in dem BoxInsetLayout seine untergeordneten Ansichten automatisch auf runden Bildschirmen platzieren kann, nachdem die erforderlichen Fenstereinsätze angewendet wurden. Damit der Bereich innerhalb dieses Bereichs angezeigt wird, geben untergeordnete Ansichten das Attribut layout_boxedEdges mit den folgenden Werten an:

  • Eine Kombination aus top, bottom, left und right. Beispielsweise positioniert der Wert "left|top" den linken und oberen Rand des untergeordneten Elements innerhalb des grauen Quadrats in Abbildung 2.
  • Mit dem Wert "all" werden alle Inhalte des untergeordneten Elements im grauen Quadrat in Abbildung 2 positioniert. Dies ist die gebräuchlichste Methode mit einem ConstraintLayout-Element.

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

<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 Teile des Layouts, die fett markiert sind:

  • android:padding="15dp"

    Durch diese Zeile wird dem <BoxInsetLayout>-Element ein Innenrand zugewiesen.

  • android:padding="5dp"

    Durch diese Zeile wird dem inneren ConstraintLayout-Element ein Innenrand zugewiesen.

  • app:layout_boxedEdges="all"

    Durch diese Linie wird sichergestellt, dass das ConstraintLayout-Element und seine untergeordneten Elemente in dem Bereich positioniert werden, der von den Fenstereinfügungen auf runden Bildschirmen definiert wird.

Gebogenes Layout verwenden

Mit der Klasse WearableRecyclerView in der Wear OS-UI-Bibliothek kannst du ein geschwungenes Layout aktivieren, das für runde Displays optimiert ist. Informationen zum Aktivieren eines gebogenen Layouts für scrollbare Listen in Ihrer App finden Sie unter Listen unter Wear OS erstellen.