O documento discute como criar layouts customizados para listas no Android. Primeiro, ele cobre a criação de arquivos XML para definir cores e o layout para cada item da lista. Em seguida, ele aborda como criar um adapter personalizado que herda de BaseAdapter para carregar dados e vinculá-los ao layout personalizado. Finalmente, ele implementa o método getView() no adapter para inflar cada linha da lista com o layout e dados corretos.

1. Capítulo 08: Layouts customizados

2. Instrutor
●
Programador desde 2000
●
Aluno de doutorado
●
●
●
●
Mestre em informática pelo
ICOMP/UFAM
Especialista em aplicações
WEB – FUCAPI
marcio.palheta@gmail.com
sites.google.com/site/marcio
palheta
M.Sc. Márcio Palheta

3. Agenda
●
Na estrada, até aqui
●
Novo layout para a listagem de alunos, usando:
–
Foto e Nome do Aluno
●
Arquivo de cores: res/values/colors.xml
●
Layout para itens da ListView: res/layout/item.xml
●
Adapters customizados: ListaAlunoAdapter.java
●
Injeção de dependências em Android
M.Sc. Márcio Palheta
3/35

4. Na estrada, até aqui.
●
●
A nossa lista de alunos apresenta
o nome dos alunos
Essa lista é baseada em um
layout do próprio Android:
–
●
android.R.layout.simple_list_item_1
Esse layout é usado pelo
ArrayAdapter par vincular a lista
de alunos (List<Aluno>) à nossa
ListView
M.Sc. Márcio Palheta
4/35

5. Hora de melhorar o layout
●
Mas agora, temos a foto do aluno, armazenada no device
●
O caminho para a foto está armazenado no SQLite
●
Queremos uma listagem onde:
–
–
●
●
Sejam exibidos foto e nome do aluno; e
Cada linha da tabela seja de uma cor (zebrada)
Para isso, precisamos definir um arquivo de Cores e outro
para o Novo Layout
Vamos começar por esses dois XMLs
M.Sc. Márcio Palheta
5/35

6. Exercício 01: Arquivo de cores
●
Crie o arquivo /res/values/colors.xml, onde vamos definir
cores para a borda da imagem, para linhas pares e para
linhas ímpares:
M.Sc. Márcio Palheta
6/35

7. Exercício 02: res/layout/item.xml
M.Sc. Márcio Palheta
7/35

8. Exercício 02: res/layout/item.xml
ImageView para
exibir a Foto
M.Sc. Márcio Palheta
8/35

9. Exercício 02: res/layout/item.xml
ImageView para
exibir a Foto
Efeito de
borda da Imagem
M.Sc. Márcio Palheta
9/35

10. Exercício 02: res/layout/item.xml
ImageView para
exibir a Foto
Efeito de
borda da Imagem
TextView para
exibir o Nome
M.Sc. Márcio Palheta
10/35

11. Adapter customizado - BaseAdapter
●
Agora que temos nosso layout pronto para ser inflado,
precisamos ensinar ao Android:
–
–
●
●
Como carregar a foto na ImageView; e
Como colocar o nome do aluno no TextView;
Para resolver o problema, vamos criar o nosso próprio
Adapter
No Android, temos a classe abstrata BaseAdapter, que já
traz os métodos abstratos necessários à exibição da lista
na tela
M.Sc. Márcio Palheta
11/35

12. Métodos da classe BaseAdapter
●
●
●
●
public int getCount()
Indica quantos itens temos para exibir na listagem. Com
isso, o Android calcula o tamanho inicial da ListView.
Podemos receber a coleção de alunos pelo construtor e
usar o método size()
public long getItemId(int posicao)
Retorna um identificador único para o item da lista.
Vamos retorna o id do aluno:
–
listaAlunos.get(posicao).getId()
M.Sc. Márcio Palheta
12/35

13. Métodos da classe BaseAdapter
●
public Object getItem(int posicao)
Retorna um item da lista, de acordo com a posição
–
listaAlunos.get(posicao)
public View getView(int posicao, View
convertView, ViewGroup parent)
●
●
●
Retorna um objeto View, representando a linha da
ListView que será exibida na tela do device
Para usar o layout gerado, vamos precisar de uma
Activity, onde teremos acesso ao seu getLayoutInflater()
Vamos receber, também, a Activity pelo construtor
M.Sc. Márcio Palheta
13/35

14. Exercício 03: ListaAlunoAdapter.java
●
Cria a classe ListaAlunoAdapter, no pacote adapter
●
Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
M.Sc. Márcio Palheta
14/35

15. Exercício 03: ListaAlunoAdapter.java
●
Novo pacote para
Cria a classe ListaAlunoAdapter, no pacote adapter
classes Adapter
●
Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
M.Sc. Márcio Palheta
15/35

16. Exercício 03: ListaAlunoAdapter.java
●
Novo pacote para
Cria a classe ListaAlunoAdapter, no pacote adapter
classes Adapter
●
Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
Classe filha de
BaseAdapter
M.Sc. Márcio Palheta
16/35

17. Exercício 03: ListaAlunoAdapter.java
●
Novo pacote para
Cria a classe ListaAlunoAdapter, no pacote adapter
classes Adapter
●
Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
Classe filha de
BaseAdapter
Dependências do
nosso Adapter
M.Sc. Márcio Palheta
17/35

18. Exercício 03: ListaAlunoAdapter.java
●
Novo pacote para
Cria a classe ListaAlunoAdapter, no pacote adapter
classes Adapter
●
Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
Classe filha de
BaseAdapter
Dependências do
nosso Adapter
Método construtor para
Injeção de Dependências
M.Sc. Márcio Palheta
18/35

19. Exercício 04: Atualização do Adapter
●
Na classe ListaAlunoAdapter, implemente os métodos
herdados da classe abstrata BaseAdapter
M.Sc. Márcio Palheta
19/35

20. Exercício 04: Atualização do Adapter
●
NaRetorna o total
classe ListaAlunoAdapter, implemente os métodos
de itens da lista
herdados da classe abstrata BaseAdapter
M.Sc. Márcio Palheta
20/35

21. Exercício 04: Atualização do Adapter
●
NaRetorna o total
classe ListaAlunoAdapter, implemente os métodos
de itens da lista
herdados da classe abstrata BaseAdapter
Método que
retorna o ID de
um item
M.Sc. Márcio Palheta
21/35

22. Exercício 04: Atualização do Adapter
●
NaRetorna o total
classe ListaAlunoAdapter, implemente os métodos
de itens da lista
herdados da classe abstrata BaseAdapter
Método que
retorna o ID de
um item
Retorna o
Aluno que
representa
um item da
ListView
M.Sc. Márcio Palheta
22/35

23. Exercício 05: Gerar a linha da ListView
●
Implemente o método ListaAlunoAdapter.getView(...):
M.Sc. Márcio Palheta
23/35

24. Exercício 05: Gerar a linha da ListView
●
Método que retorna o item
que o método ListView
Implementeserá exibido na ListaAlunoAdapter.getView(...):
M.Sc. Márcio Palheta
24/35

25. Exercício 05: Gerar a linha da ListView
●
Método que retorna o item
O item da ListView é
que o método ListView
carregado com o
Implementeserá exibido na ListaAlunoAdapter.getView(...):
novo layout
M.Sc. Márcio Palheta
25/35

26. Exercício 05: Gerar a linha da ListView
●
Método que retorna o item
O item da ListView é
que o método ListView
carregado com o
Implementeserá exibido na ListaAlunoAdapter.getView(...):
novo layout
Pega uma
referência para Aluno
M.Sc. Márcio Palheta
26/35

27. Exercício 05: Gerar a linha da ListView
●
Método que retorna o item
O item da ListView é
que o método ListView
carregado com o
Implementeserá exibido na ListaAlunoAdapter.getView(...):
novo layout
Pega uma
referência para Aluno
Configuração de
Cor de fundo das
linhas da ListView
M.Sc. Márcio Palheta
27/35

28. Exercício 05: final do método getView()
M.Sc. Márcio Palheta
28/35

29. Exercício 05: final do método getView()
Configuração
do nome
M.Sc. Márcio Palheta
29/35

30. Exercício 05: final do método getView()
Configuração
do nome
Configuração
da foto
M.Sc. Márcio Palheta
30/35

31. Exercício 05: final do método getView()
Configuração
do nome
Configuração
da foto
Retorna a linha
da ListView
M.Sc. Márcio Palheta
31/35

32. Execute a App e veja o novo Layout
M.Sc. Márcio Palheta
32/35

33. O que vem a seguir?
●
Serviços de background: Receber SMS e Tocar MP3
●
Integração via JSON
●
Tarefas assíncronas e Barra de progresso
●
Fragments
●
Google Maps e GPS
M.Sc. Márcio Palheta
33/35

34. Referências
●
www.caelum.com.br
●
d.android.com
●
●
LECHETA, Ricardo. Google Android, 3a edição,
Novatec, São Paulo, 2013
Código fonte completo:
https://github.com/marciopalheta/cursosandroid
M.Sc. Márcio Palheta
34/35

35. Capítulo 08: Layouts customizados