Android: Criando um ListView Customizado

http://www.devmedia.com.br/android-criando-um-listview-customizado/26260

Veja neste artigo como criar um ListView customizado no Android, definindo um

layout prprio para exibio de dados em lista.
Introduo
Uma ListView, como o prprio nome j diz, uma lista rolada de views. Todo componente da interface
grfica 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 responsvel por atualizar os dados na tela e definir o adaptador no seu ListView.
Bem simples.

Figura 1: Exemplo de uma lista personalizada

Codificando
Comeamos a codificar pela parte mais bsica, 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: Cdigo 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"
android:divider="#FFECECEC"
android:dividerHeight="2sp"
/>
</LinearLayout>

Agora que temos nossa lista, precisamos dos itens, para isso vamos criar o XML responsvel 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
responsvel pela imagem e um TextView que ter seu texto centralizado verticalmente (android:gravity) com
uma margem a esquerda para que no fique junto a imagem (android:layout_marginLeft).
Listagem 2: Cdigo do item_list.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="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>

Toda a parte do layout j foi definida com esses dois arquivos, agora o prximo 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, porm esses ids ficam em R.drawable., permitindo que o sistema fique
mais leve j que no vamos trabalhar com a imagem inteira carregada na memria.
Listagem 3: Cdigo da classe ItemListView referente ao nosso item
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() {
return texto;
}
public void setTexto(String texto) {
this.texto = texto;
}
}

Agora vamos criar a classe mais complicada deste artigo: o adaptador. Como dito anteriormente, ele se
encarregar de todo controle de atualizao 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 construdo 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 responsvel
pela construo do LayoutInflater e a lista que vai ser atribudo ao atributo da classe.
Listagem 4: Incio da classe AdapterListView e seu construtor
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 responsvel por pegar o Layout do item.
mInflater = LayoutInflater.from(context);
}
[...]

Como o BaseAdapter vem de uma interface chamada Adapter, ele precisa implementar os mtodos
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 posio e o getItemId ir retornar o id do item de
acordo com sua posio, mas no vamos implementar esse mtodo pois no estamos trabalhando com ids
independentes.
Listagem 5: Mtodos necessrios para implementao do BaseAdapter
[...]
public int getCount() {
return itens.size();
}
public ItemListView getItem(int position) {
return itens.get(position);
}
public long getItemId(int position) {
return position;
}
[...]

O getView() nosso mtodo principal, ele o atualizador da lista, que frequentemente atualizada e a cada
vez, esse mtodo executado de acordo com a quantidade de itens do getCont(). Ele recebe 3 parametros: a
posio, a view da atualizao 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 rpida atualizao para no que no seja preciso carregar todos os dados
novamente. Se nossa view no existir, vamos infl-la (carregar) atravs do atributo LayoutInflater que foi
criado no construtor da classe. Aps o layout ser carregado e atribudo 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
mtodo setTag(), pois se a view j existisse ns apenas carregaramos o ItemSuporte pelo getTag().
Aps carregar ou criar a view, adicionamos o ItemListView respectivo posio da lista e atualizamos os
dados da nossa view pelos dados do nosso item e no final do mtodo retornamos a view com os dados
atualizados.
Listagem 6: Mtodo getView(), o atualizador da lista
[...]
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 no 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 informaes
return view;
}
/**
* Classe de suporte para os itens do layout.
*/
private class ItemSuporte {

}
}

ImageView imgIcon;
TextView txtTitle;

Concluso
Utilizando um ListView customizado voc tem um controle bem maior da sua interface. Apesar do controle
de informao ser bem maior, seu uso porm 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 prximo, um
grande abrao e obrigado.
Referncias
Developer Android, ListView, acessado em 12-11-2012
Developer Android, BaseAdapter, acessado em 12-11-2012