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 wearables criando um novo contêiner WearableRecyclerView.

Você precisa decidir se quer usar um WearableRecyclerView com base no tipo de experiência do usuário que pretende oferecer. Recomendamos o uso da WearableRecyclerView para uma lista longa de itens simples, como um inicializador do aplicativo 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 de rolagem circular nos seus apps para wearables.

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

Esta lição mostra como usar a classe WearableRecyclerView para criar listas nos seus 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, em res/layout/activity_main.xml) adiciona uma WearableRecyclerView a uma atividade para que a lista seja exibida corretamente em dispositivos redondos e quadrados:

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

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

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

        ...
    }
    

    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 obsoleta semelhante na Biblioteca de Suporte de Wearables.

Criar um layout curvo

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

• use a WearableRecyclerView como seu contêiner principal no layout XML relevante;
• defina 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.

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

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:

    /** 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
            }
        }
    }
    

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

    wearableRecyclerView.layoutManager =
            WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())
    

    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 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:

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

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