Criar listas no Wear

Listas permitem que os usuários selecionem facilmente um item de um conjunto de opções em dispositivos Wear OS.

A Biblioteca Wearable UI inclui a classe WearableRecyclerView, que é uma implementação da RecyclerView para criação de listas otimizadas para dispositivos wearable. É possível usar essa interface no seu app para wearable criando um novo contêiner WearableRecyclerView.

Confira os seguintes recursos relacionados:

Decida se você quer usar a WearableRecyclerView com base no tipo de experiência do usuário que quer oferecer. Recomendamos o uso da WearableRecyclerView para uma lista longa de itens simples, como um inicializador de apps ou uma lista de contatos. Cada item pode ter uma string curta e um ícone associado. Como alternativa, cada item pode ter apenas uma string ou um ícone. Não recomendamos o uso de uma WearableRecyclerView para listas muito curtas ou complexas. Nesse caso, use a classe RecyclerView ou ListView da Biblioteca de Suporte do Android.

Ao estender a classe RecyclerView existente, as APIs WearableRecyclerView exibem uma lista de itens rolável na vertical em uma lista direta por padrão. É possível usar as APIs WearableRecyclerView para ativar um layout curvo e um gesto circular de rolagem nos seus apps para wearable.

Figura 1. Visualização em lista padrão no Wear OS.

Esta lição mostra como usar a classe WearableRecyclerView para criar listas em apps do Wear OS. O documento também descreve como ativar um layout curvo para os itens roláveis, ativar o gesto de rolagem circular e personalizar a aparência de apps filhos durante a rolagem.

Adicionar WearableRecyclerView a uma atividade usando XML

O layout a seguir (conforme inserido, por exemplo, res/layout/activity_main.xml) adiciona uma WearableRecyclerView a uma atividade para que a lista seja exibida corretamente em dispositivos redondos e quadrados:

    <android.support.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" />
    

Veja a seguir como a WearableRecyclerView pode ser aplicada a uma atividade:

Kotlin

    import android.os.Bundle
    import android.app.Activity
    import android.support.wear.widget.WearableRecyclerView

    class MainActivity : Activity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
        }

        ...
    }
    

Java

    import android.os.Bundle;
    import android.app.Activity;
    import android.support.wear.widget.WearableRecyclerView;

    public class MainActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }

        ...
    }
    

Observação: a classe WearableRecyclerView substitui uma classe semelhante obsoleta na Biblioteca Wearable Support.

Criar um layout curvo

Para criar um layout curvo para itens roláveis no app para wearable:

  • use aWearableRecyclerView como seu contêiner principal no layout XML relevante;
  • configure o método setEdgeItemsCenteringEnabled(boolean) como true. Isso alinhará o primeiro e o último item da lista, centralizados verticalmente na tela;
  • Use o método WearableRecyclerView.setLayoutManager() para definir o layout dos itens na tela.

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 o app tiver requisitos específicos para personalizar a aparência dos filhos durante a rolagem (por exemplo, redimensionar os ícones e o texto enquanto os itens rolam para longe do centro), estenda a classe WearableLinearLayoutManager.LayoutCallback e substitua o método onLayoutFinished.

O snippet de código a seguir mostra um exemplo de como personalizar a rolagem de itens para se distanciar do centro estendendo a classe WearableLinearLayoutManager.LayoutCallback:

Kotlin

    /** How much should we scale the icon 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 should we scale the icon 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));
    

Adicionar um gesto de rolagem circular

Por padrão, a rolagem circular fica desativada na WearableRecyclerView. Se você quiser ativar um gesto de rolagem circular na sua visualização filha, use o método setCircularScrollingGestureEnabled() da WearableRecyclerView. Também é possível personalizar o gesto de rolagem circular definindo um ou dois dos seguintes itens:

  • Quantos graus o usuário precisa girar para percorrer uma altura de tela. Isso influencia efetivamente a velocidade da rolagem, setScrollDegreesPerScreen, cujo valor padrão é 180 graus.
  • A largura de uma "borda" virtual perto da extremidade da tela em que o gesto será reconhecido, setBezelFraction, cujo valor padrão é 1. Isso é expresso como uma fração do raio da visualização.

O snippet de código a seguir mostra como configurar esses métodos:

Kotlin

    wearableRecyclerView.apply {
        isCircularScrollingGestureEnabled = true
        bezelFraction = 0.5f
        scrollDegreesPerScreen = 90f
    }
    

Java

    wearableRecyclerView.setCircularScrollingGestureEnabled(true);
    wearableRecyclerView.setBezelFraction(0.5f);
    wearableRecyclerView.setScrollDegreesPerScreen(90);