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
.
Confira os seguintes recursos relacionados:
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:
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 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)
comotrue
. 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 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);