Criando layouts em Grid no Android

19 June 2015

Criando Grid Layouts no Android com RecyclerView

Diversos aplicativos utilizam a interface de grid. E normalmente esse grid recebe uma lista grande conteúdo. O processo mais utilizado por baixo dos panos é o de consumir um serviço, normalmente uma API separada, e atualizar a tela conforme o usuário chega ao fim do grid. Dessa maneira a lista vai incrementando os elementos que recebe. Nesse post vou mstrar como utilizar um GridLayout para chegar num resultado como esse.



Sobre RecyclerViews

RecyclerView é o novo tipo de ViewGroup preparado pra renderizar qualquer tipo de adapter. É possívelmente o sucessor do ListView e do GridView.

Os elementos principais são o RecyclerView.Adapter, LayoutManager e o itens de Animation/Decoration. Uma das vantagens de utilizar a RecyclerView é sua capacidade de reaproveitar slots do grid conforme o usuário faz o scroll. Elementos que ficaram para cima da tela são reaproveitados para mostrar novos elementos, o que ajuda muito no consumo de memória.

A palestra Droidcon Montreal - Dave Smith - Mastering Recycler View mostra bem esse cenário logo no começo.

RecyclerView e GridLayoutManager

Descendo um pouco no código necessário para chegar na implementação do grid da figura acima, vamos começar com uma Activity comum, a MainActivity. Nela criamos buscamos a referência a recyclerview que temos no xml da view. Logo após, setamos como gerenciador de layout o GridLayoutManager. Quando a RecyclerView foi anunciada ainda não existia esse LayoutManager, mas com o tempo diversos outros além do GridLayoutManager foram disponibilizados. Repare que passaremos como parametro o número de colunas do grid.

Views

As views serão bem simples, no caso dois arquivos. O primeiro, activity_main.xml é referenciado na Activity. O segundo, item.xml, será utilizado para montar cada elemento do Grid.

Adapter

Nesse momento temos uma Activy linkada com uma view, além de referênciar o recyclerview a uma GridLayoutManager. A parte importante agora é criar o adapter, responsável por gerenciar cada elemento que aparecerá no Grid.

O adapter terá uma lista de letras do alfabeto e cada letra será mostrada no grid. para isso, o adapter irá fazer o extends da classe RecyclerView.Adapter E então teremos o override de 3 métodos para definir o comportamento da lista. os métodos são onCreateViewHolder, onBindViewHolder e getItemCount.

Ao rodar o projeto teremos quase tudo pronto. Os elementos serão mostrado em um grid. \o/
Decoration

Pra acertar as questões finais do layout utilizaremos um componente do RecyclerView chamado RecyclerView.ItemDecoration. Nele podemos, por exemplo, setar as margins entre elementos do Grid.

Mais sobre Recycler View

Para saber mais sobre o assunto, recomendo fortemente a palestra Droidcon Montreal - Dave Smith - Mastering Recycler View.
comments powered by Disqus