Verschiedene Smartwatch-Formen bedienen

<ph type="x-smartling-placeholder">

Apps unter Wear OS nutzen dieselben Layouttechniken wie auf anderen Android-Geräten müssen aber mit Smartwatch-spezifischen Einschränkungen gestaltet werden.

Hinweis:Wenn Sie die Funktionen und die Benutzeroberfläche einer mobilen App nicht genau auf Wear OS übertragen, User Experience zu schaffen.

Wenn Sie Ihre App für ein rechteckiges Handheld-Gerät entwerfen, werden Inhalte in der Nähe der Ecken des Bildschirms kann bei runden Uhren abgeschnitten werden. Wenn Sie eine scrollbare vertikale Liste verwenden, ist dies weniger ein Problem, da der Nutzer scrollen kann, um den Inhalt zu zentrieren. Für einzelne Bildschirme kann es jedoch eine schlechte User Experience bieten.

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


<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>

Um dieses Problem zu lösen, verwenden Sie Layouts im Wear OS-UI-Bibliothek, die runde Geräte unterstützt.

  • Sie können ein BoxInsetLayout- um zu verhindern, dass Ansichten an den Rändern von runden Displays abgeschnitten werden.
  • Du kannst einen WearableRecyclerView verwenden geschwungenes Layout erstellen, wenn Sie ein vertikale Liste von Artikeln, die für runde Bildschirme optimiert sind.

Weitere Informationen über das Entwerfen von Apps finden Sie in den Designrichtlinien für Wear OS

BoxInsetLayout verwenden

Abbildung 2: Fenstereinblendungen auf einem runden Bildschirm

Die <ph type="x-smartling-placeholder"></ph> Mit der Klasse BoxInsetLayout in der Wear OS-UI-Bibliothek definieren Sie ein Layout, das für runde Bildschirme geeignet ist. In diesem Kurs können Sie Ansichten in der Mitte oder am Bildschirmrand ausrichten.

Das graue Quadrat in Abbildung 2 stellt den Bereich dar, in dem BoxInsetLayout kann seine Kinder nach dem Anwenden automatisch auf runden Bildschirmen platzieren die erforderlichen Fenstereinlagen. Um in diesem Bereich angezeigt zu werden, Ansichten geben das Attribut layout_boxedEdges mit den folgenden Werten an:

  • Eine Kombination aus top, bottom, left und right. Beispiel: Der Wert „"left|top"“ positioniert das untergeordnete Element links und oben innerhalb des grauen Quadrats in Abbildung 2.
  • Mit dem Wert "all" werden alle Inhalte des untergeordneten Publishers positioniert. das graue Quadrat in Abbildung 2. Dies ist der gängigste Ansatz mit einem ConstraintLayout im Inneren.

Das in Abbildung 2 gezeigte Layout verwendet <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 fett dargestellten Teile des Layouts:

  • android:padding="15dp"

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

  • android:padding="5dp"

    Mit dieser Zeile wird dem inneren ConstraintLayout-Element ein Innenrand zugewiesen.

  • app:layout_boxedEdges="all"

    Mit dieser Zeile wird sichergestellt, dass das ConstraintLayout-Element Die untergeordneten Elemente sind innerhalb des vom Fenster definierten Bereichs Einsätze auf runden Displays.

Geschwungenes Layout verwenden

Klasse WearableRecyclerView in der Wear OS-UI-Bibliothek können Sie ein geschwungenes Layout verwenden, das für runde Bildschirme optimiert ist. So aktivieren Sie ein geschwungenes Layout für scrollbare Listen in der App findest du unter Listen unter Wear OS erstellen