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