Tworzenie list na Wear OS

Wypróbuj metodę Compose
Jetpack Compose na Wear OS to zalecany zestaw narzędzi do tworzenia interfejsu Wear OS.
Tworzenie list za pomocą Compose na Wear OS →

Listy umożliwiają użytkownikom łatwe wybieranie elementów z zestawu opcji na urządzeniach z Wear OS.

Biblioteka interfejsu Wearable zawiera klasę WearableRecyclerView, która jest implementacją RecyclerView do tworzenia list zoptymalizowanych pod kątem urządzeń do noszenia. Możesz użyć tego interfejsu w aplikacji na urządzenie do noszenia, tworząc nowy kontener WearableRecyclerView.

Użyj WearableRecyclerView w przypadku długiej listy prostych elementów, takich jak program uruchamiający aplikacje lub lista kontaktów. Każdy element może zawierać krótki ciąg znaków i powiązaną ikonę. Każdy element może też zawierać tylko ciąg znaków lub ikonę.

Uwaga: unikaj złożonych układów. Użytkownicy powinni móc zrozumieć, czym jest dany element, bez konieczności długiego wpatrywania się w niego, zwłaszcza w przypadku urządzeń do noszenia, które mają ograniczony rozmiar ekranu.

Rozszerzając istniejącą klasę RecyclerView, interfejsy API WearableRecyclerView domyślnie wyświetlają listę elementów z możliwością przewijania w pionie. Możesz też użyć interfejsów WearableRecyclerView API, aby włączyć zakrzywiony układ i okrągły gest przewijania w aplikacjach na urządzenia do noszenia.

Rysunek 1. Domyślny widok listy na Wear OS.

Z tego przewodnika dowiesz się, jak używać klasy WearableRecyclerView do tworzenia list w aplikacjach na Wear OS, jak włączyć zakrzywiony układ elementów przewijanych i jak dostosowywać wygląd elementów podrzędnych podczas przewijania.

Dodawanie elementu WearableRecyclerView do aktywności za pomocą kodu XML

Ten układ dodaje do aktywności ikonę 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" />

W przykładzie poniżej pokazujemy, jak WearableRecyclerView jest stosowany do aktywności:

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 zakrzywionego układu

Aby utworzyć zakrzywiony układ elementów przewijanych w aplikacji na urządzenia do noszenia:

  • Użyj elementu WearableRecyclerView jako kontenera głównego w odpowiednim układzie XML.
  • Ustaw metodę setEdgeItemsCenteringEnabled(boolean) na true. To polecenie wyśrodkowuje pionowo pierwszy i ostatni element listy na ekranie.
  • Użyj metody WearableRecyclerView.setLayoutManager(), aby ustawić układ elementów na ekranie.

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 specjalne wymagania dotyczące dostosowywania wyglądu dzieci podczas przewijania, np. skalowania ikon i tekstu, gdy elementy oddalają się od środka, rozszerz klasę WearableLinearLayoutManager.LayoutCallback i zastąp metodę onLayoutFinished.

Poniższe fragmenty kodu pokazują przykład dostosowywania przewijania elementów w celu skalowania ich w większej odległości 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));