Listen unter Wear OS erstellen

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

Die Wearable-UI-Bibliothek enthält <ph type="x-smartling-placeholder"></ph> WearableRecyclerView-Klasse, die ein RecyclerView Implementierung zum Erstellen von Listen, die für Wearables optimiert sind Sie können diese in Ihrer Wearable-App implementieren, indem Sie einen neuen WearableRecyclerView-Container erstellen.

WearableRecyclerView für ein lange Liste einfacher Elemente wie eine App-Übersicht oder eine Liste mit Kontakten. Jedes Element kann kurze Zeichenfolge und zugehöriges Symbol. Alternativ kann jedes Element auch nur einen String oder ein Symbol.

Hinweis: Vermeiden Sie komplexe Layouts. Nutzende sollten nur einen Blick auf ein Element werfen müssen, worum es sich hier handelt, vor allem bei Wearables. die Bildschirmgröße beschränkt.

Durch Erweitern der vorhandenen RecyclerView-Klasse, WearableRecyclerView In APIs wird standardmäßig eine vertikal scrollbare Liste von Elementen in einer geraden Liste angezeigt. Sie können auch die WearableRecyclerView APIs für ein geschwungenes Layout und eine kreisförmige Scroll-Geste in Ihren Wearable-Apps.

Abbildung 1: Standardmäßige Listenansicht unter Wear OS.

In dieser Anleitung erfahren Sie, wie Sie mit der Klasse WearableRecyclerView Inhalte erstellen in Ihren Wear OS-Apps aufführen, wie Sie ein geschwungenes Layout für scrollbare Elemente und wie Sie das Erscheinungsbild auf die untergeordneten Elemente.

WearableRecyclerView mithilfe von XML zu einer Aktivität hinzufügen

Mit dem 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 auf eine Aktivität angewendet:

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

Geschwungenes Layout erstellen

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

• verwenden WearableRecyclerView als Hauptcontainer im entsprechenden XML-Layout.
• Legen Sie die <ph type="x-smartling-placeholder"></ph> setEdgeItemsCenteringEnabled(boolean) auf true. Dieses das erste und das letzte Element auf dem Bildschirm vertikal zentriert.
• Verwenden Sie die Methode WearableRecyclerView.setLayoutManager(), um das Layout des Elemente auf dem Bildschirm.

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 es für Ihre App bestimmte Anforderungen gibt, um die Darstellung der Kinder beim Scrollen anzupassen, z. B. Skalieren Sie die Symbole und den Text, während die Elemente von der Mitte weg scrollen, die WearableLinearLayoutManager.LayoutCallback-Klasse und überschreiben die <ph type="x-smartling-placeholder"></ph> onLayoutFinished an.

Die folgenden Code-Snippets zeigen ein Beispiel für das Anpassen des Scrollens von Elementen, um es zu skalieren weiter vom Zentrum entfernt, indem Sie die Klasse WearableLinearLayoutManager.LayoutCallback:

/** 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));