Listen unter Wear OS erstellen

Mithilfe von Listen können Nutzer auf Wear OS-Geräten ganz einfach Elemente aus einer Reihe von Elementen auswählen.

Die Wearable-UI-Bibliothek enthält die Klasse WearableRecyclerView, eine RecyclerView-Implementierung zum Erstellen von Listen, die für Wearable-Geräte optimiert sind. Du kannst diese Oberfläche in deiner Wearable-App verwenden, indem du einen neuen WearableRecyclerView-Container erstellst.

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

Hinweis:Vermeiden Sie komplexe Layouts. Nutzer sollten nur einen Blick auf einen Artikel werfen müssen, um zu verstehen, worum es sich handelt. Das gilt vor allem bei der begrenzten Bildschirmgröße von Wearables.

Durch die Erweiterung der vorhandenen RecyclerView-Klasse wird für WearableRecyclerView-APIs standardmäßig eine vertikal scrollbare Liste von Elementen in einer geraden Liste angezeigt. Du kannst auch die WearableRecyclerView APIs verwenden, um ein geschwungenes Layout und eine kreisförmige Scroll-Geste in deinen Wearable-Apps zu aktivieren.

Abbildung 1: Standardlistenansicht unter Wear OS.

In diesem Leitfaden erfährst du, wie du mit der Klasse WearableRecyclerView Listen in deinen Wear OS-Apps erstellen, ein gebogenes Layout für scrollbare Elemente aktivieren und das Erscheinungsbild von untergeordneten Elementen beim Scrollen anpassen kannst.

WearableRecyclerView per XML einer Aktivität hinzufügen

Im folgenden Layout wird einer Aktivität ein WearableRecyclerView hinzugefügt:

<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 den WearableRecyclerView, der auf eine Aktivität angewendet wird:

class MainActivity : Activity() {

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

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

Kurvenlayout erstellen

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

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

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

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

Wenn für Ihre App bestimmte Anforderungen an das Anpassen der Darstellung der untergeordneten Elemente beim Scrollen gelten und beispielsweise die Symbole und der Text skaliert werden müssen, während die Elemente von der Mitte weg scrollen, können Sie die Klasse WearableLinearLayoutManager.LayoutCallback erweitern und die Methode onLayoutFinished überschreiben.

Die folgenden Code-Snippets zeigen ein Beispiel für das Anpassen des Scrollens von Elementen, damit sie weiter vom Mittelpunkt weg skaliert werden können, indem die Klasse WearableLinearLayoutManager.LayoutCallback erweitert wird:

/** 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
        }
    }
}

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);
    }
}

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

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