android_ criando um listview customizado
TRANSCRIPT
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