Conceitos básicos do Kotlin para Android 07.3: GridLayout com o RecyclerView

Este codelab faz parte do curso Conceitos básicos do Kotlin para Android. Você aproveitará mais o curso se fizer os codelabs em sequência. Todos os codelabs do curso estão listados na página de destino dos codelabs do curso Conceitos básicos do Kotlin para Android.

Este codelab faz parte de uma série que orienta você na criação de um app de monitoramento de sono que exibe dados de sono em uma RecyclerView. Recomendamos que você faça todos os codelabs em ordem, porque eles avançam por tarefas.

Os codelabs nesta série são:

• 7.1 Conceitos básicos do RecyclerView
• 7.2 DiffUtil e vinculação de dados com o RecyclerView
• 7.3 GridLayout com o RecyclerView
• 7.4 Como interagir com itens do RecyclerView
• 7.5 Cabeçalhos no RecyclerView

Introdução

Um dos principais pontos fortes de RecyclerView é que ele permite que você use gerenciadores de layout para controlar e modificar a estratégia de layout. Um LayoutManager gerencia como os itens no RecyclerView são organizados.

O RecyclerView vem com gerenciadores de layout prontos para casos de uso comuns. Por exemplo, é possível usar LinearLayout para listas horizontais e verticais, ou GridLayout para grades. Para casos de uso mais complicados, é necessário implementar uma LayoutManager personalizada.

Neste codelab, você aprenderá a exibir dados usando um layout de grade em vez de uma lista, com base no app monitor de sono do codelab anterior. Se você não tiver o app do codelab anterior, faça o download do código inicial para este codelab.

O que você já precisa saber

Você precisa:

• Como criar uma interface de usuário básica usando Activity, Fragments e Views
• Como navegar entre fragmentos e usar safeArgs para transmitir dados entre eles.
• Visualizar modelos, visualizar fábricas de modelos e transformações
• LiveData e os observadores
• Como criar um banco de dados Room, um DAO e definir entidades
• Como usar corrotinas para tarefas de banco de dados e outras tarefas de longa duração
• Como implementar um RecyclerView básico com um Adapter, ViewHolder e o layout do item.
• Como implementar a vinculação de dados para o RecyclerView.
• Como criar e usar adaptadores de vinculação para transformar dados.

O que você vai aprender

• Como usar um LayoutManager diferente para mudar a forma como os dados são exibidos no RecyclerView.
• Como criar um layout de grade para os dados de sono

Atividades do laboratório

• Use o app monitor de sono do codelab anterior desta série.
• Substitua a lista de dados de sono exibida pelo RecyclerView no app por uma grade de dados de sono.

O app monitor de sono tem duas telas, representadas por fragmentos, como mostrado na figura abaixo.

A primeira tela, mostrada à esquerda, tem botões para iniciar e interromper o rastreamento. A tela mostra alguns dados de sono do usuário. O botão Limpar exclui permanentemente todos os dados que o app coletou para o usuário. A segunda tela, mostrada à direita, serve para selecionar uma classificação de qualidade do sono.

Esse app usa uma arquitetura simplificada com um controlador de IU, modelo de visualização e LiveData, além de um banco de dados Room para manter os dados de sono.

Os dados de sono são exibidos em um RecyclerView. Neste codelab, você mudará o app para usar uma GridLayout. A tela final será parecida com a captura de tela abaixo.

Em um codelab anterior, quando você adicionou a RecyclerView à fragment_sleep_tracker.xml, adicionou uma LinearLayoutManager sem personalizações. Esse código exibe os dados como uma lista vertical.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

O LinearLayoutManager é o gerenciador de layout mais comum e direto para RecyclerView e é compatível com o posicionamento horizontal e vertical de visualizações filhas. Por exemplo, você pode usar LinearLayoutManager para criar um carrossel de imagens que o usuário rola horizontalmente.

GridLayout

Outro caso de uso comum é a necessidade de mostrar muitos dados ao usuário, o que pode ser feito usando GridLayout. O GridLayoutManager de RecyclerView dispõe os dados como uma grade rolável, conforme mostrado abaixo.

Da perspectiva do design, o GridLayout é melhor para listas que podem ser representadas como ícones ou imagens, como listas em um app de navegação fotográfica. No app monitor de sono, você pode exibir cada noite de sono como uma grade de ícones grandes. Com isso, o usuário teria uma visão geral da qualidade do sono.

Como o GridLayout dispõe os itens

GridLayout organiza itens em uma grade de linhas e colunas. Presumindo a rolagem vertical, por padrão, cada item em uma linha ocupa um "período". Nesse caso, um período é equivalente à largura de uma coluna.

Nos dois primeiros exemplos mostrados abaixo, cada linha é composta por três períodos. Por padrão, o GridLayoutManager dispõe cada item em um período até atingir a contagem do período que você especificar. Quando a contagem de períodos for atingida, os itens serão dispostos na próxima linha.

Por padrão, cada item ocupa um período, mas você pode aumentar a quantidade ao especificar quantos períodos ele deve ocupar. Por exemplo, o item superior na tela mais à direita (mostrado abaixo) ocupa três períodos.

Dica: período pode significar "coluna" ou "coluna". Com o GridLayoutManager, você usa spanCount para indicar quantas colunas ou linhas uma grade tem e também quanto espaço de grade um item ocupa na horizontal ou vertical.

Ao criar um GridLayoutManager, você especifica a orientação separadamente do número de períodos, sendo que "span" é "direto independente." Em uma configuração vertical padrão, "quot;span" e "column"quot; são equivalentes.

Nesta tarefa, você usa a RecyclerView que terminou no último exercício e a atualiza para exibir dados usando um GridLayoutManager. Você pode continuar usando o app monitor de sono do codelab anterior ou pode fazer o download do app RecyclerViewGridLayout-Starter no GitHub.

Etapa 1: mudar o LayoutManager

1. Se necessário, faça o download do app RecyclerViewGridLayout-Starter para este codelab do GitHub e abra o projeto no Android Studio.
2. Abra o arquivo de layout fragment_sleep_tracker.xml.
3. Remova o gerenciador de layout da definição sleep_list RecyclerView.

Código a ser excluído:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager

4. Abra o SleepTrackerFragment.kt
5. Em OnCreateView(), logo antes da instrução return, crie um novo GridLayoutManager vertical, de cima para baixo, com três períodos.
   
   O construtor GridLayoutManager usa até quatro argumentos: um contexto, que é o activity, o número de períodos (colunas, no layout vertical padrão), uma orientação (o padrão é vertical) e se é um layout reverso (o padrão é false).

val manager = GridLayoutManager(activity, 3)

6. Abaixo dessa linha, instrua o RecyclerView a usar esse GridLayoutManager. O RecyclerView está no objeto de vinculação e é chamado de sleepList. Consulte fragment_sleep_tracker.xml.

binding.sleepList.layoutManager = manager

Etapa 2: alterar o layout

O layout atual em list_item_sleep_night.xml exibe os dados usando uma linha inteira por noite. Nesta etapa, você definirá um layout de item quadrado mais compacto para a grade.

Dica: se você não quiser perder seu layout atual, faça uma cópia do arquivo primeiro e nomeie-a como list_item_sleep_night_linear.xml ou comente no código em vez de removê-lo.

1. Abra o list_item_sleep_night.xml
2. Exclua o sleep_length TextView porque o novo design não precisa dele.
3. Mova a quality_string TextView para que ela seja exibida abaixo do ImageView. Para fazer isso, é necessário atualizar várias coisas. Este é o layout final do TextView da quality_string:

<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />

4. Verifique na visualização Design se o quality_string TextView está posicionado abaixo do ImageView.

Como você usou a vinculação de dados, não é necessário alterar nada no Adapter. O código funcionará normalmente e sua lista será exibida como uma grade.

5. Execute o app e observe como os dados de sono são exibidos em uma grade.
   
   Observe que a ConstraintLayout ainda ocupa toda a largura. O GridLayoutManager oferece uma largura fixa à visualização, com base no período dela. GridLayoutManager faz o possível para atender a todas as restrições ao dispor a grade, adicionando espaços em branco ou recortando itens.

6. No SleepTrackerFragment, no código que cria o GridLayoutManager, mude o número de períodos de GridLayoutManger para 1. Execute o app e você receberá uma lista.
   

val manager = GridLayoutManager(activity, 1)

7. Mude o número de períodos de GridLayoutManager para 10 e execute o app. Observe que o GridLayoutManager caberá em 10 itens seguidos, mas os itens serão cortados.
8. Mude a contagem de períodos para 5 e a direção para GridLayoutManager.VERTICAL. Execute o app e veja como você pode rolar na horizontal. Você precisa de um layout diferente para criar uma boa aparência.

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)

9. Não se esqueça de definir a contagem de períodos novamente como 3 e a orientação como vertical.

Projeto do Android Studio: RecyclerViewGridLayout

• Os gerenciadores de layout gerenciam a organização dos itens na RecyclerView.
• O RecyclerView vem com gerenciadores de layout prontos para casos de uso comuns, como LinearLayout para listas horizontais e verticais e GridLayout para grades.
• Para casos de uso mais complicados, implemente um LayoutManager personalizado.
• Da perspectiva do design, o GridLayout é mais indicado para listas de itens que podem ser representados como ícones ou imagens.
• GridLayout organiza itens em uma grade de linhas e colunas. Considerando a rolagem vertical, cada item em uma linha ocupa o que é chamado de "span."
• Você pode personalizar quantos períodos um item ocupa, criando grades mais interessantes sem a necessidade de um gerenciador de layout personalizado.
• Crie um layout para um item na grade, e o gerenciador de layout cuida da organização dos itens.
• Você pode definir a LayoutManager para RecyclerView no arquivo de layout XML que contém o elemento <RecyclerView> ou de forma programática.

Cursos da Udacity:

• Como desenvolver apps Android com Kotlin (link em inglês)
• Bootcamp de Kotlin para programadores

Documentação do desenvolvedor Android:

• Criar uma lista com o RecyclerView
• RecyclerView
• LayoutManager
• GridLayoutManager

Esta seção lista as possíveis atividades para os alunos que estão trabalhando neste codelab como parte de um curso ministrado por um instrutor. Cabe ao instrutor fazer o seguinte:

• Se necessário, atribua o dever de casa.
• Informe aos alunos como enviar o dever de casa.
• Atribua nota aos trabalhos de casa.

Os professores podem usar essas sugestões o quanto quiserem, e eles devem se sentir à vontade para passar o dever de casa como achar adequado.

Se você estiver fazendo este codelab por conta própria, use essas atividades para testar seu conhecimento.

Responda a estas perguntas

Pergunta 1

Quais das opções a seguir são gerenciadores de layout fornecidos pelo Android? Selecione todas as opções aplicáveis.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Pergunta 2

O que é um "span"?

▢ O tamanho da grade criada pelo GridLayoutManager.

▢ A largura de uma coluna na grade.

▢ As dimensões de um item em uma grade.

▢ O número de colunas em uma grade com orientação vertical.

Inicie a próxima lição: 7.4: Como interagir com itens do RecyclerView

Este codelab faz parte de uma série que orienta você na criação de um app de monitoramento de sono que exibe dados de sono em uma RecyclerView. Recomendamos que você faça todos os codelabs em ordem, porque eles avançam por tarefas.

Os codelabs nesta série são:

• 7.1 Conceitos básicos do RecyclerView
• 7.2 DiffUtil e vinculação de dados com o RecyclerView
• 7.3 GridLayout com o RecyclerView
• 7.4 Como interagir com itens do RecyclerView
• 7.5 Cabeçalhos no RecyclerView