Criando uma lista customizada

Você viu no tutorial anterior como criar uma lista simples. Muitas vezes uma lista simples não atende nossa necessidade, pois queremos mostrar mais dados para um usuário do que simplesmente um texto em uma linha. Muitas listas contemplam mais informações por linha (ou célula) como mostra a imagem abaixo:

Lista Customizada
Lista Customizada

Nesta lista consta um ícone que representa a condição do tempo, tem-se também o nome da cidade, um texto com a condição do tempo descrita e a temperatura atual. Para lidar com este tipo de situação, onde queremos mostrar mais informações em uma lista, usamos as listas customizadas.

A ideia principal de uma lista customizada é que se tenha o layout que represente uma célula (ou linha), e este mesmo se aplicará a todas as outras. Observe a imagem abaixo, a célula destacada em vermelho, representa como faríamos um layout da célula.

Representação de uma célula customizada
Representação de uma célula customizada

 

Primeiro passo: Construção da custom view (célula customizada)

A primeira coisa a fazer é construir um layout que represente cada linha de nossa lista. No exemplo criado para este tutorial, pensei num app que mostrasse uma lista dos produtos que você possui na geladeira, pra que quando você vá ao supermercado saiba o que está faltando.

Começamos então construindo o layout de nossa custom view. Para facilitar o entendimento foi criado este mock-up que representa como ficará nossa custom view.

Mock-up da lista customizada
Mock-up da lista customizada

Este mock-up serve meramente para termos uma base, ele não precisa neste momento estar perfeito, até porque a ideia aqui é o aprendizado. Colocando este mock-up num layout xml:

Segundo passo: Construção da lista que receberá cada linha

Este layout representa cada célula ou linha de nossa lista, agora precisa-se de um layout que receberá a lista. Quando se utiliza uma lista customizada se faz necessário este tipo de prática: dois layouts.

 

Terceiro passo: Construção do Adapter

Como foi visto no post anterior, o Adapter é como uma ponte entre a AdapterView (ListView, GridView) e o dado que estará naquela View, como mostra a figura abaixo:

Definição de Adapter
Definição de Adapter

Existem alguns tipos de adapter, para demonstrar esta utilização de lista customizada será utilizado o BaseAdapter, que é uma implementação de Adapter. O BaseAdapter exige a sobreescrita de 4 métodos:

getCount() – Indica quantos itens ou linhas (rows) que serão apresentados na AdapterView

getItem(int position) – Retorna o dado referente aquele item (linha) da AdapterView, o qual é passado como parâmetro no construtor da classe.

getItemId(int position) – Retorna o id referente ao dado, referente ao item (linha) da AdapterView

getView(int position, View convertView, ViewGroup parent) – Este método cria a view, baseado no dado fornecido e na posição.

Vamos agora ver a implementação de cada método, para que fique mais claro estes conceitos. Crie então uma classe que extenda de BaseAdapter.

No construtor foi passado todos itens que trabalharemos em nossa custom view. Perceba que a imagem é uma lista do tipo Integer, isto porque as imagens são inteiros, e os textos são uma lista de Strings.

ViewHolder

Ao criar uma lista, cada linha (row) é criada no momento em que é mostrada ao usuário. Para evitar problemas com processamento do aparelho, já que cada linha é instanciada dinamicamente, utiliza-se o que chamamos de ViewHolder. O ViewHolder só instancia novos dados, se os mesmos já não estiverem instanciados. Deixando o scroll da lista mais suave, não gerado impacto ao usuário na hora de visualizar a lista.

Agora vamos sobreescrever os métodos que citei acima, que na verdade, são obrigatórios serem implementados.

O último método, getView() deixei por último para que falássemos um pouco mais sobre ele.

A primeira coisa a fazer é utilizar o LayoutInflater para obter o inflater.

Depois disso será criada a nossa View customizada, onde realmente o layout é inflado com o layout que criamos para cada linha. Em outras palavras, quando inflamos estamos na verdade transformando um layout xml em uma View.

Ao mesmo tempo também criamos uma instância da nossa classe ViewHolder,  a qual terá os elementos da View customizada.

Agora você precisa dizer ao Viewholder quais elementos correspondem a cada item que serão instanciados. Usamos o método findViewById(). Veja abaixo:

Nesta caso estamos dizendo que, cada elemento do Viewholder possui um correspondente no xml que criamos. Após isto, utiliza-se um método chamado setTag , que recebe um objeto, para armazenar o Viewholder. Quando utiliza-se este método, é como se estivéssemos atribuindo o objeto a uma tag ou uma chave.

Caso a View não esteja nula, ou seja, já tenha sido criada anteriormente, simplesmente chamamos a tag, através do método getTag()

Após feito isto, agora pode-se setar imagens e textos nas Views do Viewholder.

E este método exige que retornemos uma View, que após termos encontrado as views e setados os seus valores, podemos retorná-la.

Agora voltando à activity, precisamos dos itens que farão parte da lista. Somente para efeitos de demonstração, criei as listas na própria activity para facilitar o entendimento.

Primeira coisa a fazer é criar um objeto do tipo ListView e encontrar o id que corresponde a lista, este lista está dentro do layout activity_main.xml, citado anteriormente neste post.

Cria-se então o adapter, que recebe 4 parâmetros: o contexto, lista dos icones, lista da descrição e lista dos itens restantes. Veja:

E agora setamos o adapter, ou seja, dizemos que esta lista receberá em cada uma de suas linhas o adapter criado.

Veja como ficou a MainActivity completa:

E aí está, uma lista customizada. Um dos itens mais utilizados hoje em Android, apresentação dos dados em forma de lista.

Captura de tela: Lista customizada
Captura de tela: Lista customizada

Bom, agora fica mais fácil fazer uma lista conforme a necessidade dos clientes. Veja, a princípio pode parecer mais complicado, mas em termos de manutenção de código, e até mesmo de mudanças repentinas no projeto, este tipo de implementação se torna muito útil. Assim, caso o cliente mudasse ou adicionasse itens afetaria somente o layout row.xml e o adapter. Além de tudo fica um código limpo e fácil de ser entendido.

O link deste projeto encontra-se no meu github: https://github.com/paulacr/ListaCustomizada

Até o próximo.

Anúncios

Criando uma lista simples

Link do projeto no GitHub: https://github.com/paulacr/ListaSimplesExemplo

Olá pessoas, continuando na linha de layouts, vamos ver hoje como criar uma lista simples. As listas são ViewGroups, ou seja, views que armazenam outras views. A Listview serve para exibir outros itens em forma de lista que podem possuir rolagem (scroll).

Os itens são automaticamente inseridos na lista através do uso de um Adapter, componente que obtém conteúdo de uma Array ou consulta de um banco de dados, e converte cada item em uma view, que passa a ser um item da lista.

Neste tutorial irei mostrar como utilizar um default adapter, que é um pouco mais simples, e não oferece muita customização. Depois de aprendido o conceito, farei outro tutorial utilizando um adapter customizado.

Vamos começar então criando um layout, que permitirá colocarmos a nossa lista e os itens dela dispostos em uma tela.

Vamos agora analisar o layout. Um Textview para termos como título da nossa lista, até aí tudo certo. Depois uma ListView com um id, para podermos localizar na nossa classe java e poder manipulá-la.

Agora precisamos manipular esta lista, para ter os valores desejados. Crie uma classe java, se ela já não estiver lá, que esteja chamando o layout que criamos.

A primeira coisa a fazer é encontrar a lista que criamos no layout através do atributo id.

Feito isso agora podemos criar uma lista de valores que serão os itens de nossa lista. Neste caso estes valores estão criados dentro de uma Array de Strings, somente para efeitos de demonstração, porém poderiam ser valores de input inseridos pelo usuário, dados vindos de um servidor, entre outros. Veja abaixo:

A seguir precisa-se colocar este itens em formato de lista. Para isto utiliza-se uma classe denominada ArrayAdapter, que é uma classe do Android capaz de organizar itens em formato de lista simples. Veja como utilizá-la:

O primeiro parâmetro nos informa o contexto, neste caso passamos a própria Activity em que estamos. O segundo parâmetro diz respeito ao formato de lista, neste caso utilizou-se esta lista padrão do Android. O terceiro parâmetro diz respeito ao itens que irão compor a lista, no caso a Array de Strings que fizemos anteriormente.

Se você tentar rodar o projeto neste momento verificará que somente irá aparecer nosso texto de título, e mais nada. Isso ocorre porque ao criar um adapter você incluiu os itens e os dispôs em lista, porém ainda não os colocou dentro da lista que criou no layout. Por isso que em alguns passos anteriores precisamos encontrar o id da lista. Para isto, é chamado o método setAdapter passando o adapter criado anteriormente como parâmetro.

O resultado deste tutorial foi uma lista simples, como mostra a figura abaixo.

Lista simples utilizando ListView
Lista simples utilizando ListView

Para verificar se a lista está funcionando pode-se implementar o evento de click em cada item da lista. Para fazer isto é preciso implementar a interface que possibilitará interceptar o evento de click. Veja o código abaixo, que mostra como implementar o evento de click dos itens da lista.

Um exemplo sempre usado para demonstrar qual item foi clicado é o Toast. Ele é uma mensagem de duração curta ou longa, que irá aparecer no device assim que o evento for interceptado. O Toast tem a ideia de torrada numa torradeira, sobe por alguns instantes, e depois, neste caso, desaparece. Veja abaixo como implementar o Toast.

Observe como é o Toast na imagem abaixo:

Toast
Toast

 

Bom pessoas é isso, espero que tenham gostado, no próximo post faremos uma lista com as células customizadas, será bem interessante. Até a próxima.