Tworzenie list na Wear OS

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

Biblioteka UI urządzeń do noszenia zawiera: WearableRecyclerView, która jest RecyclerView wdrożenia do tworzenia list zoptymalizowanych pod kątem urządzeń do noszenia. Możesz użyć tej w aplikacji do noszenia, tworząc nowy kontener WearableRecyclerView.

Użyj operatora WearableRecyclerView jako długa lista prostych elementów, takich jak program uruchamiający aplikacje czy lista kontaktów. Każdy element może z krótkim ciągiem znaków i powiązaną 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 tylko spojrzeć na produkt, aby zwłaszcza w przypadku urządzeń do noszenia, ograniczony rozmiar ekranu.

Rozszerzając istniejącą klasę RecyclerView, WearableRecyclerView Interfejsy API domyślnie wyświetlają przewijaną w pionie listę elementów w formie prostej. Możesz też użyć interfejsy API WearableRecyclerView, aby wyrazić zgodę na układ zakrzywiony; kołowy gest przewijania w aplikacjach do noszenia.

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

Z tego przewodnika dowiesz się, jak używać zajęć WearableRecyclerView do tworzenia listy w aplikacjach na Wear OS, jak włączyć układ zakrzywiony elementów przewijanych oraz jak dostosować wygląd dzieci podczas przewijania.

Dodaj WearableRecyclerView do aktywności za pomocą pliku XML

Ten układ dodaje element WearableRecyclerView do aktywności:

<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" />

Poniższy przykład pokazuje WearableRecyclerView zastosowane do aktywności:

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

Tworzenie układu krzywego

Aby utworzyć układ zakrzywiony dla elementów przewijanych w aplikacji do noszenia, wykonaj te czynności:

• Użyj formatu WearableRecyclerView jako główny kontener w odpowiednim układzie XML.
• Ustaw parametr setEdgeItemsCenteringEnabled(boolean) do true. Ten wyśrodkowuje pierwszy i ostatni element na liście na ekranie w pionie.
• Użyj metody WearableRecyclerView.setLayoutManager(), aby ustawić układ elementy na ekranie.

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

Jeśli Twoja aplikacja ma określone wymagania dotyczące dostosowywania wyglądu dzieci podczas przewijania, na przykład skalowanie ikon i tekstu, gdy elementy przewijają się od środka – rozszerz WearableLinearLayoutManager.LayoutCallback i zastąp . onLayoutFinished.

Te fragmenty kodu pokazują przykład dostosowywania przewijania elementów do rozmiaru dalej od środka, wydłużając Zajęcia 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));