Tecnologias

Revistas

Cursos LO GIN:

Pocket videos SENHA:

Frum

Servios

Publicar

Compre Crditos C adastre -se

Loja Virtual

A ssine

Bem vindo a DevMedia!

Esque ci m inha se nha

Novidade: DevMedia lana o DevWare - Saiba mais!

cdigo fonte

post favorito

comentrios

Android: Criando um ListView Customizado

Veja neste artigo como criar um ListView customizado no Android, definindo um layout prprio para exibio de dados em lista.

Go s t ei (2)

(0)

18

Curtir

16

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

< ? x m lv e r s i o n = " 1 . 0 "e n c o d i n g = " U T F 8 " ? > < L i n e a r L a y o u t x m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d " a n d r o i d : l a y o u t _ w i d t h = " m a t c h _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " m a t c h _ p a r e n t " a n d r o i d : o r i e n t a t i o n = " v e r t i c a l " a n d r o i d : b a c k g r o u n d = " # F F F F F F F F " > < L i s t V i e w a n d r o i d : i d = " @ + i d / l i s t " a n d r o i d : l a y o u t _ w i d t h = " m a t c h _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " m a t c h _ p a r e n t "

a n d r o i d : d i v i d e r = " # F F E C E C E C " a n d r o i d : d i v i d e r H e i g h t = " 2 s p " / > < / L i n e a r L a y o u t >

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

< ? x m lv e r s i o n = " 1 . 0 "e n c o d i n g = " u t f 8 " ? > < L i n e a r L a y o u t x m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d " a n d r o i d : l a y o u t _ w i d t h = " m a t c h _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " m a t c h _ p a r e n t " a n d r o i d : o r i e n t a t i o n = " h o r i z o n t a l " a n d r o i d : p a d d i n g = " 5 s p " > < I m a g e V i e w a n d r o i d : i d = " @ + i d / i m a g e m v i e w " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " m a t c h _ p a r e n t " / > < T e x t V i e w a n d r o i d : i d = " @ + i d / t e x t " a n d r o i d : l a y o u t _ w i d t h = " m a t c h _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " m a t c h _ p a r e n t " a n d r o i d : l a y o u t _ m a r g i n L e f t = " 5 s p " a n d r o i d : g r a v i t y = " c e n t e r _ v e r t i c a l " a n d r o i d : t e x t C o l o r = " # F F 0 0 0 0 0 0 " / > < / L i n e a r L a y o u t >

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

p u b l i cc l a s sI t e m L i s t V i e w{ p r i v a t eS t r i n gt e x t o ; p r i v a t ei n ti c o n e R i d ; p u b l i cI t e m L i s t V i e w ( ){ t h i s ( " " ,1 ) ; } p u b l i cI t e m L i s t V i e w ( S t r i n gt e x t o ,i n ti c o n e R i d ){ t h i s . t e x t o=t e x t o ; t h i s . i c o n e R i d=i c o n e R i d ; } p u b l i ci n tg e t I c o n e R i d ( ){ r e t u r ni c o n e R i d ; } p u b l i cv o i ds e t I c o n e R i d ( i n ti c o n e R i d ){ t h i s . i c o n e R i d=i c o n e R i d ; } p u b l i cS t r i n gg e t T e x t o ( ){

r e t u r nt e x t o ; } p u b l i cv o i ds e t T e x t o ( S t r i n gt e x t o ){ t h i s . t e x t o=t e x t o ; } }

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

p u b l i cc l a s sA d a p t e r L i s t V i e we x t e n d sB a s e A d a p t e r{ p r i v a t eL a y o u t I n f l a t e rm I n f l a t e r ; p r i v a t eL i s t < I t e m L i s t V i e w >i t e n s ; p u b l i cA d a p t e r L i s t V i e w ( C o n t e x tc o n t e x t ,L i s t < I t e m L i s t V i e w >i t e n s ){ / / I t e n sd ol i s t v i e w t h i s . i t e n s=i t e n s ; / / O b j e t or e s p o n s v e lp o rp e g a roL a y o u td oi t e m . m I n f l a t e r=L a y o u t I n f l a t e r . f r o m ( c o n t e x t ) ; } [ . . . ]

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

[ . . . ] p u b l i ci n tg e t C o u n t ( ){ r e t u r ni t e n s . s i z e ( ) ; } p u b l i cI t e m L i s t V i e wg e t I t e m ( i n tp o s i t i o n ){ r e t u r ni t e n s . g e t ( p o s i t i o n ) ; } p u b l i cl o n gg e t I t e m I d ( i n tp o s i t i o n ){ r e t u r np o s i t i o n ; } [ . . . ]

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

[ . . . ]

p u b l i cV i e wg e t V i e w ( i n tp o s i t i o n ,V i e wv i e w ,V i e w G r o u pp a r e n t ){ I t e m S u p o r t ei t e m H o l d e r ; / / s eav i e we s t i v e rn u l a( n u n c ac r i a d a ) ,i n f l a m o sol a y o u tn e l a . i f( v i e w= =n u l l ){ / / i n f l aol a y o u tp a r ap o d e r m o sp e g a ra sv i e w s v i e w=m I n f l a t e r . i n f l a t e ( R . l a y o u t . i t e m _ l i s t ,n u l l ) ; / / c r i au mi t e md es u p o r t ep a r an op r e c i s a r m o ss e m p r e / / i n f l a ra sm e s m a si n f o r m a c o e s i t e m H o l d e r=n e wI t e m S u p o r t e ( ) ; i t e m H o l d e r . t x t T i t l e=( ( T e x t V i e w )v i e w . f i n d V i e w B y I d ( R . i d . t e x t ) ) ; i t e m H o l d e r . i m g I c o n=( ( I m a g e V i e w )v i e w . f i n d V i e w B y I d ( R . i d . i m a g e m v i e w ) ) ; / / d e f i n eo si t e n sn av i e w ; v i e w . s e t T a g ( i t e m H o l d e r ) ; }e l s e{ / / s eav i e wj e x i s t ep e g ao si t e n s . i t e m H o l d e r=( I t e m S u p o r t e )v i e w . g e t T a g ( ) ; } / / p e g ao sd a d o sd al i s t a / / ed e f i n eo sv a l o r e sn o si t e n s . I t e m L i s t V i e wi t e m=i t e n s . g e t ( p o s i t i o n ) ; i t e m H o l d e r . t x t T i t l e . s e t T e x t ( i t e m . g e t T e x t o ( ) ) ; i t e m H o l d e r . i m g I c o n . s e t I m a g e R e s o u r c e ( i t e m . g e t I c o n e R i d ( ) ) ; / / r e t o r n aav i e wc o ma si n f o r m a e s r e t u r nv i e w ; } / * * *C l a s s ed es u p o r t ep a r ao si t e n sd ol a y o u t . * / p r i v a t ec l a s sI t e m S u p o r t e{ I m a g e V i e wi m g I c o n ; T e x t V i e wt x t T i t l e ; } }

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

Guilherme Biff Zarelli

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

O q ue vo c acho u d es t e p o s t ?

Go s t ei (2)

(0)

2 COMENTRIOS
Fernando C amargo Sei que esse artigo serve para introduzir na criao 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 operao carssima) e usar holders (com setTag e getTag) para evitar buscar as views sempre. [h +1 ms] - Responder

[autor] Guilherme Biff Zarelli Obrigado pelo comentrio Fernando, realmente usar o convertView vai fazer voc ter um ganho de performace maior, no quis abordar isso porque para iniciantes acredito que seria um pouco complicado (j que tive problemas com isso no comeo). Mas boa observao e fica a dica ai pro pessoal da uma pesquisada. valeu [h +1 ms] - Responder

Cursos relacionados
C urso online: Introduo ao desenvolvimento para celulares com J2ME C urso online: Padres de Projeto em Java C urso online - Desenvolvendo uma aplicao completa com Struts 2 Introduo ao Ruby on Rails Administrao do Firebird/InterBase [Ver todos]

+Java
Publicidade

Servios
Inclua um comentrio Adicionar aos Favoritos Marcar como lido/assistido Incluir anotao pessoal Verso para impresso

DevMedia
Curtir 9.813 pessoas curtiram DevMedia.

DevMedia | Anuncie | Fale conosco Hospedagem web por Porta 80 Web Hosting
P lug-in social do F acebook

2013 - Todos os Dire itos R e se rvados a web-03