Gostei (2) (0)

código fonte post favorito comentários

Android: Criando um ListView Customizado

Veja neste artigo como criar um ListView customizado no Android, definindo um layout próprio

para exibição de dados em lista.

Introdução

Uma ListView, como o próprio nome já diz, é uma lista rolada de views. Todo componente da interface gráfica do Android é considerado uma View

pois a estende.

O conceito de uma lista customizada é: preencher um array de objetos referente ao seu item, criar um adaptador que vai ficar responsável por

atualizar os dados na tela e definir o adaptador no seu ListView. Bem simples.

Novidade: DevMedia lança o DevWare - Saiba mais!

4 Curtir 1618

Bem vindo a DevMedia!LOGIN: SENHA:

Esqueci minha senha Cadastre-se

Tecnologias Revistas Cursos Pocket videos Fórum Serviços Publicar Compre Créditos Loja Virtual Assine

Figura 1: Exemplo de uma lista personalizada

Codificando

Começamos a codificar pela parte mais básica, o XML do ListView, o “main.xml”. Vamos definir nele somente um ListView e configurar algumas

coisas, por exemplo: uma cor de fundo para nosso LinearLayout (android:background) a cor do divisor de itens do ListView (android:divider) sua

espessura (android:dividerHeight) e um id (android:id).

Listagem 1: Código do main.xml

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="#FFFFFFFF"

>

<ListView

android:id="@+id/list"

android:layout_width="match_parent"

android:layout_height="match_parent"

Agora que temos nossa lista, precisamos dos itens, para isso vamos criar o XML responsável por eles, o “item_list.xml”. Em nosso item vamos

inserir uma imagem e um texto em uma linha horizontal.

Foi inserido um LinearLayout horizontal (android:orientation) para nossa linha e dentro dela um ImageView responsável pela imagem e um

TextView que terá seu texto centralizado verticalmente (android:gravity) com uma margem a esquerda para que não fique junto a imagem

(android:layout_marginLeft).

Listagem 2: Código do item_list.xml

Toda a parte do layout já foi definida com esses dois arquivos, agora o próximo passo é criar nossa classe que vai popular os itens e o adaptador

deixando por último a que vai controlar tudo isso.

Na classe do item da lista, vamos definir somente dois atributos: o texto e o id da imagem. Definimos o ID porque sabemos que para todas as

imagens inseridas na pasta /res/drawable é gerado um id assim como os ids definidos pelo layout XML, porém esses ids ficam em “R.drawable.”,

permitindo que o sistema fique mais leve já que não vamos trabalhar com a imagem inteira carregada na memória.

Listagem 3: Código da classe ItemListView referente ao nosso item

android:divider="#FFECECEC"

android:dividerHeight="2sp"

/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

android:padding="5sp">

<ImageView

android:id="@+id/imagemview"

android:layout_width="wrap_content"

android:layout_height="match_parent"

/>

<TextView

android:id="@+id/text"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginLeft="5sp"

android:gravity="center_vertical"

android:textColor="#FF000000"

/>

</LinearLayout>

public class ItemListView {

private String texto;

private int iconeRid;

public ItemListView() {

this("", -1);

}

public ItemListView(String texto, int iconeRid) {

this.texto = texto;

this.iconeRid = iconeRid;

}

public int getIconeRid() {

return iconeRid;

}

public void setIconeRid(int iconeRid) {

this.iconeRid = iconeRid;

}

public String getTexto() {

Agora vamos criar a classe mais “complicada” deste artigo: o adaptador. Como dito anteriormente, ele se encarregará de todo controle de

atualização dos itens na lista.

A nossa classe AdapterListView deve estender BaseAdapter para que nossa lista aceite-a como um adaptador. Vamos ter somente dois atributos,

o LayoutInflater que será construído no construtor da classe para inflar o layout XML como uma view, com isso vamos ter acesso a todos seus

atributos, e nossa lista de itens ItemListView que preencherá a lista. Em seu construtor vamos passar um context que fica responsável pela

construção do LayoutInflater e a lista que vai ser atribuído ao atributo da classe.

Listagem 4: Início da classe AdapterListView e seu construtor

Como o BaseAdapter vem de uma interface chamada Adapter, ele precisa implementar os métodos getCount(), getItem(), getItemId() e getView().

O getCont() retorna a quantidade de itens da lista, o getItem() irá retornar o item da lista de acordo com sua posição e o getItemId irá retornar o

id do item de acordo com sua posição, mas não vamos implementar esse método pois não estamos trabalhando com ids independentes.

Listagem 5: Métodos necessários para implementação do BaseAdapter

O getView() é nosso método principal, ele é o atualizador da lista, que é frequentemente atualizada e a cada vez, esse método é executado de

acordo com a quantidade de itens do getCont(). Ele recebe 3 parametros: a posição, a view da atualização anterior que é nosso layout já

carregado (desatualizado) e o ViewGroup que é (se houver) o “pai” da view.

Vamos criar uma classe interna chamada ItemSuporte que vai ter as views de nosso layout. Essa classe é criada para nos proporcionar uma rápida

atualização para não que não seja preciso carregar todos os dados novamente. Se nossa view não existir, vamos inflá-la (carregar) através do

atributo LayoutInflater que foi criado no construtor da classe. Após o layout ser carregado e atribuído à view, vamos criar o ItemSuporte inserindo

as views do item_list em seu interior. Depois de inserido, definimo-lo como uma tag da view pelo método setTag(), pois se a view já existisse nós

apenas carregaríamos o ItemSuporte pelo getTag().

Após carregar ou criar a view, adicionamos o ItemListView respectivo à posição da lista e atualizamos os dados da nossa view pelos dados do

nosso item e no final do método retornamos a view com os dados atualizados.

Listagem 6: Método getView(), o atualizador da lista

return texto;

}

public void setTexto(String texto) {

this.texto = texto;

}

}

public class AdapterListView extends BaseAdapter {

private LayoutInflater mInflater;

private List<ItemListView> itens;

public AdapterListView(Context context, List<ItemListView> itens) {

//Itens do listview

this.itens = itens;

//Objeto responsável por pegar o Layout do item.

mInflater = LayoutInflater.from(context);

}

[...]

[...]

public int getCount() {

return itens.size();

}

public ItemListView getItem(int position) {

return itens.get(position);

}

public long getItemId(int position) {

return position;

}

[...]

[...]

Conclusão

Utilizando um ListView customizado você tem um controle bem maior da sua interface. Apesar do controle de informação ser bem maior, seu uso

porém pode ser dificultoso, no entanto veja se realmente tem a necessidade para poupar seu tempo.

Com isso finalizo esse artigo. Em anexo segue o projeto que foi utilizado como exemplo. Até o próximo, um grande abraço e obrigado.

Referências

Developer Android, ListView, acessado em 12-11-2012

Developer Android, BaseAdapter, acessado em 12-11-2012

Guilherme Biff Zarelli

Programador Java/Android https://zarelli.w ordpress.com/zarelli/

O que você achou deste post?

public View getView(int position, View view, ViewGroup parent) {

ItemSuporte itemHolder;

//se a view estiver nula (nunca criada), inflamos o layout nela.

if (view == null) {

//infla o layout para podermos pegar as views

view = mInflater.inflate(R.layout.item_list, null);

//cria um item de suporte para não precisarmos sempre

//inflar as mesmas informacoes

itemHolder = new ItemSuporte();

itemHolder.txtTitle = ((TextView) view.findViewById(R.id.text));

itemHolder.imgIcon = ((ImageView) view.findViewById(R.id.imagemview));

//define os itens na view;

view.setTag(itemHolder);

} else {

//se a view já existe pega os itens.

itemHolder = (ItemSuporte) view.getTag();

}

//pega os dados da lista

//e define os valores nos itens.

ItemListView item = itens.get(position);

itemHolder.txtTitle.setText(item.getTexto());

itemHolder.imgIcon.setImageResource(item.getIconeRid());

//retorna a view com as informações

return view;

}

/**

* Classe de suporte para os itens do layout.

*/

private class ItemSuporte {

ImageView imgIcon;

TextView txtTitle;

}

}

Gostei (2) (0)

2 COMENTÁRIOS

Fernando Camargo

Sei que esse artigo serve para introduzir na criação de itens customizados para uma ListView... mas a performance vai ficar bizarra do jeito que foi

feito. Você está inflando o layout e buscando as views todas as vezes que o getView é chamado, enquanto deveria usar o convertView para evitar inflar

(pois é uma operação caríssima) e usar holders (com setTag e getTag) para evitar buscar as views sempre.

[há +1 mês] - Responder

[autor] Guilherme Biff Zarelli

Obrigado pelo comentário Fernando, realmente usar o convertView vai fazer você ter um ganho de performace maior, não quis abordar isso

porque para iniciantes acredito que seria um pouco complicado (já que tive problemas com isso no começo). Mas boa observação e fica a dica

ai pro pessoal da uma pesquisada. valeu

[há +1 mês] - Responder

Cursos relacionados

Curso online: Introdução ao desenvolvimento para celulares com J2ME

Curso online: Padrões de Projeto em Java

Curso online - Desenvolvendo uma aplicação completa com Struts 2

Introdução ao Ruby on Rails

Administração do Firebird/InterBase

[Ver todos]

+Java

Publicidade

Serviços

Inclua um comentário

Adicionar aos Favoritos

Marcar como lido/assistido

Incluir anotação pessoal

Versão para impressão

DevMedia | Anuncie | Fale conosco

Hospedagem web por Porta 80 Web Hosting

2013 - Todos os Direitos Reservados a web-03

DevMedia

Curtir

9.813 pessoas curtiram DevMedia.

Plug-in social do Facebook