Listen unter Wear OS erstellen

Die Compose-Methode

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

Listen mit Compose für Wear OS erstellen →

Mit Listen können Nutzer auf Wear OS-Geräten ganz einfach ein Element aus einer Reihe von Optionen auswählen.

Die Wearable UI Library enthält die WearableRecyclerView-Klasse, eine RecyclerView Implementierung zum Erstellen von Listen, die für Wearable-Geräte optimiert sind. Sie können diese Schnittstelle in Ihrer Wearable-App verwenden, indem Sie einen neuen WearableRecyclerView Container erstellen.

Verwenden Sie ein WearableRecyclerView für eine lange Liste einfacher Elemente, z. B. einen Anwendungs-Launcher oder eine Kontaktliste. Jedes Element kann einen kurzen String und ein zugehöriges Symbol haben. Alternativ kann jedes Element auch nur einen String oder ein Symbol haben.

Hinweis:Vermeiden Sie komplexe Layouts. Nutzer sollten nur einen Blick auf ein Element werfen müssen, um zu verstehen, was es ist. Dies gilt insbesondere bei der begrenzten Bildschirmgröße von Wearables.

Durch Erweitern der vorhandenen RecyclerView Klasse zeigen WearableRecyclerView APIs standardmäßig eine vertikal scrollbare Liste von Elementen in einer geraden Liste an. Sie können die WearableRecyclerView APIs auch verwenden, um ein gekrümmtes Layout und eine kreisförmige Scrollbewegung in Ihren Wearable-Apps zu aktivieren.

Abbildung 1 : Standardlistenansicht unter Wear OS.

In dieser Anleitung erfahren Sie, wie Sie mit der WearableRecyclerView Klasse Listen in Ihren Wear OS-Apps erstellen, ein gekrümmtes Layout für Ihre scrollbaren Elemente aktivieren und das Erscheinungsbild der untergeordneten Elemente beim Scrollen anpassen.

WearableRecyclerView einer Aktivität mit XML hinzufügen

Das folgende Layout fügt einer Aktivität ein WearableRecyclerView hinzu:

<androidx.wear.widget.WearableRecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recycler_launcher_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical" />

Das folgende Beispiel zeigt das WearableRecyclerView auf eine Aktivität angewendete:

Kotlin

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    ...
}

Java

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    ...
}

Gekrümmtes Layout erstellen

So erstellen Sie ein gekrümmtes Layout für scrollbare Elemente in Ihrer Wearable-App:

• Verwenden Sie WearableRecyclerView als Hauptcontainer im entsprechenden XML-Layout.
• Setzen Sie die setEdgeItemsCenteringEnabled(boolean) Methode auf true. Dadurch werden das erste und das letzte Element der Liste vertikal auf dem Bildschirm zentriert.
• Verwenden Sie die WearableRecyclerView.setLayoutManager() Methode, um das Layout der Elemente auf dem Bildschirm festzulegen.

Kotlin

wearableRecyclerView.apply {
    // To align the edge children (first and last) with the center of the screen.
    isEdgeItemsCenteringEnabled = true
    ...
    layoutManager = WearableLinearLayoutManager(this@MainActivity)
}

Java

// To align the edge children (first and last) with the center of the screen.
wearableRecyclerView.setEdgeItemsCenteringEnabled(true);
...
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this));

Wenn Ihre App bestimmte Anforderungen an die Anpassung des Erscheinungsbilds der untergeordneten Elemente beim Scrollen hat, z. B. das Skalieren der Symbole und des Texts, während die Elemente vom Mittelpunkt wegscrollen, erweitern Sie die WearableLinearLayoutManager.LayoutCallback Klasse und überschreiben Sie die onLayoutFinished Methode.

Die folgenden Code-Snippets zeigen ein Beispiel für die Anpassung des Scrollens von Elementen, um sie weiter vom Mittelpunkt weg zu skalieren durch Erweitern der WearableLinearLayoutManager.LayoutCallback Klasse:

Kotlin

/** How much icons should scale, at most.  */
private const val MAX_ICON_PROGRESS = 0.65f

class CustomScrollingLayoutCallback : WearableLinearLayoutManager.LayoutCallback() {

    private var progressToCenter: Float = 0f

    override fun onLayoutFinished(child: View, parent: RecyclerView) {
        child.apply {
            // Figure out % progress from top to bottom.
            val centerOffset = height.toFloat() / 2.0f / parent.height.toFloat()
            val yRelativeToCenterOffset = y / parent.height + centerOffset

            // Normalize for center.
            progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset)
            // Adjust to the maximum scale.
            progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS)

            scaleX = 1 - progressToCenter
            scaleY = 1 - progressToCenter
        }
    }
}

Java

public class CustomScrollingLayoutCallback extends WearableLinearLayoutManager.LayoutCallback {
    /** How much icons should scale, at most. */
    private static final float MAX_ICON_PROGRESS = 0.65f;

    private float progressToCenter;

    @Override
    public void onLayoutFinished(View child, RecyclerView parent) {

        // Figure out % progress from top to bottom.
        float centerOffset = ((float) child.getHeight() / 2.0f) / (float) parent.getHeight();
        float yRelativeToCenterOffset = (child.getY() / parent.getHeight()) + centerOffset;

        // Normalize for center.
        progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset);
        // Adjust to the maximum scale.
        progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS);

        child.setScaleX(1 - progressToCenter);
        child.setScaleY(1 - progressToCenter);
    }
}

Kotlin

wearableRecyclerView.layoutManager =
        WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())

Java

CustomScrollingLayoutCallback customScrollingLayoutCallback =
                new CustomScrollingLayoutCallback();
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this, customScrollingLayoutCallback));