Creare elenchi su Wear OS

Gli elenchi consentono agli utenti di selezionare facilmente un articolo da una serie di opzioni sui dispositivi Wear OS.

La libreria Wearable UI include WearableRecyclerView, una classe RecyclerView implementazione per creare elenchi ottimizzati per i dispositivi indossabili. Puoi utilizzare questo nella tua app indossabile creando un nuovo contenitore WearableRecyclerView.

Usa WearableRecyclerView per lungo elenco di elementi semplici, come Avvio applicazioni o un elenco di contatti. Ogni elemento può hanno una stringa breve e un'icona associata. In alternativa, ogni elemento potrebbe avere solo una stringa o un'icona.

Nota: evita layout complessi. Gli utenti devono solo dare un'occhiata a un articolo a capire di cosa si tratta, soprattutto per quanto riguarda gli indossabili, dimensioni dello schermo limitate.

Estendendo il corso RecyclerView esistente, WearableRecyclerView Per impostazione predefinita, le API visualizzano un elenco di elementi scorrevole verticalmente in un elenco lineare. Puoi anche utilizzare le API di WearableRecyclerView per attivare il layout curvo e un gesto di scorrimento circolare nelle tue app indossabili.

Figura 1. Visualizzazione elenco predefinita su Wear OS.

Questa guida mostra come utilizzare il corso WearableRecyclerView per creare nelle tue app per Wear OS, come attivare il layout curvo per gli elementi scorrevoli e come personalizzare l'aspetto i bambini mentre scorrono i contenuti.

Aggiungi WearableRecyclerView a un'attività utilizzando XML

Il seguente layout aggiunge un WearableRecyclerView a un'attività: 

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

L'esempio seguente mostra l'elemento WearableRecyclerView applicata a un'attività:

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

Creare un layout curvo

Per creare un layout curvo per gli elementi scorrevoli nell'app indossabile, procedi nel seguente modo:

  • Utilizza WearableRecyclerView come contenitore principale nel layout XML pertinente.
  • Imposta il parametro setEdgeItemsCenteringEnabled(boolean) a true. Questo centra verticalmente il primo e l'ultimo elemento dell'elenco sullo schermo.
  • Utilizza il metodo WearableRecyclerView.setLayoutManager() per impostare il layout del gli elementi sullo schermo.

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

Se la tua app ha requisiti specifici per personalizzare l'aspetto dei bambini durante lo scorrimento, ad esempio: scalare le icone e il testo mentre gli elementi scorrono verso l'esterno dal centro, estendere WearableLinearLayoutManager.LayoutCallback ed eseguire l'override onLayoutFinished.

I seguenti snippet di codice mostrano un esempio di personalizzazione dello scorrimento degli elementi per scalare dal centro, estendendo WearableLinearLayoutManager.LayoutCallback corso:

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