Criando ListViews personalizadas em Android

Android SDK

Criando ListViews personalizadas em Android

Luiz Duarte
Escrito por Luiz Duarte em 22/12/2014
Junte-se a mais de 34 mil devs

Entre para minha lista e receba conteúdos exclusivos e com prioridade

O Google não recomenda mais o uso de ListViews personalizados para novos apps, no lugar desse componente, estão recomendando o uso de RecyclerView, tal qual eu mostro nessa série de dois posts. Continue com esse tutorial apenas se realmente precisar usar ListView (projetos antigos, por exemplo).

O widget (ou container) ListView é muito popular em apps Android como sendo a forma padrão de listagem de resultados nesta plataforma. Entretanto, 10 entre 10 desenvolvedores Android detesta a aparência padrão deste componente que de forma puramente textual tenta oferecer ao usuário uma boa experiência. Ok, para listar configurações do smartphone pode até funcionar, mas e quando queremos combinar diversas informações em cada item? Quando queremos colocar imagens? Quando queremos não ter apenas uma String mas um objeto da nossa aplicação em cada item da ListView? Este post trata exatamente sobre isso, como criar ListViews com itens personalizáveis.

A IDE que utilizei para o desenvolvimento foi a Android Studio, que pode ser baixada gratuitamente em http://developer.android.com. Mais informações de setup e como criar seu primeiro projeto, dê uma olhada neste tutorial!

Livro Java para Iniciantes

Começando!

Comece com o layout abaixo, onde temos um campo de busca com botão no topo e uma ListView logo abaixo.

Visualmente este XML se transforma no seguinte layout:

Para definir um layout personalizado para os itens de uma ListView, independente se é uma listview de tela cheia ou compondo uma interface com outros componentes, você precisará criar um novo layout XML apenas para um item de modelo. O processo é simples: clique direito do mouse sobre a pasta de layouts e mande criar um novo layout XML file com o nome de item_modelo e com o gerenciador RelativeLayout. Nosso layout exibirá o nome da cidade, a sigla do estado, uma descrição da cidade e uma imagem pequena (thumb), como na imagem abaixo.

Para chegar no layout acima, precisaremos adicionar em nosso item_modelo.xml dois componentes TextView (large), um TextView (medium) e um ImageView, definindo as propriedades de orientação para que eles fiquem dispostos da maneira acima. Note que as imagens e informações que serão utilizadas foram pegos da Internet e podem ser substituídas pelo que você quiser (as imagens vão na psta drawable). O seu XML deve se parecer com o abaixo:

Agora que temos o layout personalizado que será utilizado para renderizar os itens da nossa ListView, é hora de criarmos a classe cujos objetos irão guardar as informações a serem exibidas. Nossa classe Cidade deverá se parecer com a abaixo:

Note o uso de um inteiro para armazenar a informação da imagem, o que nos facilitará o trabalho mais para frente.
Muitas vezes não podemos ou não queremos criar uma nova classe para exibir itens personalizados na lista. Nestas ocasiões você pode substituir a criação de uma classe pelo uso de uma coleção Map, contendo chaves e valores.
Considerando o carregamento dos widgets em variáveis locais usando findViewById e a coleção de cidades abaixo, que deve ser criada no topo da sua Activity (e que poderia ser substituída por um SELECT no banco de dados ou um GET em uma API remota, teremos todas nossas cidades carregadas em memória. Note como defini o código da imagem usando a classe R e sua propriedade estática drawable, que lista os ids únicos das imagens. Isso evita ter de conhecer o caminho até o arquivo físico da imagem.

Mas como o Android vai saber qual informação deve ir em cada parte do nosso layout personalizado? Nós temos de dizer isso pra ele! O ArrayAdapter tradicional não consegue dar conta deste recado, por isso devemos criar o nosso Adapter personalizado, que vamos chamar de CidadeAdapter e que será uma subclasse do Adapter original.

Curso React Native

Nesse Adapter personalizado, colocaremos a lógica de como fazer o binding dos campos de cada item da ListView conforme o layout XML que criamos para o mesmo. Segue abaixo um exemplo onde o método getView será disparado uma vez para cada item que adicionarmos na ListView, carregando a cidade em questão e adicionando cada um dos seus atributos ao widget correspondente no layout item_modelo.xml.

Agora devemos alterar o método que é disparado quando o nosso botão de buscar é pressionado (btnBuscar_OnClick), para que carregue um CidadeAdapter em nosso ListView, usando o nosso layout personalizado item_modelo.xml. O código abaixo mostra exatamente isso, já com a lógica de busca refatorada.

Obtemos o seguinte resultado:

No evento de click de um item da lista, na hora que quisermos fazer alguma ação com base no objeto selecionado, teremos de fazer uma conversão um pouco diferente do toString usado geralmente, como segue no código abaixo que deve colocar logo após carregar a variável lstResultados, do tipo ListView, usando o findViewById:

Espero que tenham gostado do tutorial!

Curso Beholder

TAGS:

Olá, tudo bem?

O que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

3 Replies to “Criando ListViews personalizadas em Android”