Listy umożliwiają użytkownikom łatwe wybieranie elementów z zestawu na urządzeniach z Wear OS.
Biblioteka interfejsu urządzeń do noszenia zawiera klasę
WearableRecyclerView
, która jest implementacją RecyclerView
służącą do tworzenia list zoptymalizowanych pod kątem urządzeń do noszenia. Aby używać tego interfejsu w aplikacji na urządzenia do noszenia, utwórz nowy kontener WearableRecyclerView
.
WearableRecyclerView
wyświetla długą listę prostych elementów, takich jak program uruchamiający aplikacje czy lista kontaktów. Każdy element może mieć krótki ciąg i powiązaną z nim ikonę. Każdy element może też mieć tylko ciąg znaków lub ikonę.
Uwaga: unikaj złożonych układów. Użytkownicy powinni jedynie patrzeć na produkt, aby zrozumieć, co to jest, zwłaszcza w przypadku ograniczonego rozmiaru ekranu urządzeń do noszenia.
Rozszerzając istniejącą klasę RecyclerView
, interfejsy API WearableRecyclerView
domyślnie wyświetlają możliwą do przewijania w pionie listę elementów na prostej liście. Możesz też użyć interfejsów API WearableRecyclerView
, aby włączyć zakrzywiony układ i okrągły gest przewijania w aplikacjach na urządzenia do noszenia.
Z tego przewodnika dowiesz się, jak używać klasy WearableRecyclerView
do tworzenia list w aplikacjach na Wear OS, jak włączyć krzywy układ elementów przewijanych i jak dostosować wygląd elementów dzieci podczas przewijania.
Dodawanie WearableRecyclerView do aktywności za pomocą XML
Ten układ dodaje do aktywności element WearableRecyclerView
:
<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" />
Ten przykład pokazuje użycie atrybutu WearableRecyclerView
do działania:
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); } ... }
Tworzenie układu krzywego
Aby utworzyć krzywy układ elementów, które można przewijać w aplikacji do noszenia, wykonaj te czynności:
-
Użyj
WearableRecyclerView
jako głównego kontenera w odpowiednim układzie XML. -
Ustaw metodę
setEdgeItemsCenteringEnabled(boolean)
natrue
. Spowoduje to wyśrodkowanie pierwszego i ostatniego elementu na liście na ekranie w pionie. -
Aby ustawić układ elementów na ekranie, użyj metody
WearableRecyclerView.setLayoutManager()
.
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));
Jeśli Twoja aplikacja ma określone wymagania związane z dostosowaniem wyglądu dzieci podczas przewijania (na przykład skalowanie ikon i tekstu przy przewijaniu elementów w dół od środka), rozwiń klasę
WearableLinearLayoutManager.LayoutCallback
i zastąp metodę
onLayoutFinished
.
Poniższe fragmenty kodu pokazują przykład dostosowywania przewijania elementów tak, aby skalować się dalej od środka przez rozszerzenie klasy WearableLinearLayoutManager.LayoutCallback
:
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));