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
![](https://developer.android.com/static/wear/images/02_uilib.png?authuser=6&hl=de)
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
undright
. 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 einemConstraintLayout
-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.