Captulo 08: Layouts customizados

Instrutor

Programador desde 2000

Aluno de doutorado

Mestre em informtica pelo

ICOMP/UFAM
Especialista em aplicaes
WEB FUCAPI
marcio.palheta@gmail.com
sites.google.com/site/marcio
palheta
M.Sc. Mrcio Palheta

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

Injeo de dependncias em Android

M.Sc. Mrcio Palheta

3/35

Na estrada, at aqui.

A nossa lista de alunos apresenta

o nome dos alunos
Essa lista baseada em um
layout do prprio 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. Mrcio Palheta

4/35

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 comear por esses dois XMLs

M.Sc. Mrcio Palheta

5/35

Exerccio 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. Mrcio Palheta

6/35

Exerccio 02: res/layout/item.xml

M.Sc. Mrcio Palheta

7/35

Exerccio 02: res/layout/item.xml

ImageView para
exibir a Foto

M.Sc. Mrcio Palheta

8/35

Exerccio 02: res/layout/item.xml

ImageView para
exibir a Foto
Efeito de
borda da Imagem

M.Sc. Mrcio Palheta

9/35

Exerccio 02: res/layout/item.xml

ImageView para
exibir a Foto
Efeito de
borda da Imagem

TextView para
exibir o Nome

M.Sc. Mrcio Palheta

10/35

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 prprio

Adapter
No Android, temos a classe abstrata BaseAdapter, que j
traz os mtodos abstratos necessrios exibio da lista
na tela

M.Sc. Mrcio Palheta

11/35

Mtodos 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 coleo de alunos pelo construtor e
usar o mtodo 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. Mrcio Palheta

12/35

Mtodos da classe BaseAdapter

public Object getItem(int posicao)

Retorna um item da lista, de acordo com a posio

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, tambm, a Activity pelo construtor
M.Sc. Mrcio Palheta

13/35

Exerccio 03: ListaAlunoAdapter.java

Cria a classe ListaAlunoAdapter, no pacote adapter

Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf)

M.Sc. Mrcio Palheta

14/35

Exerccio 03: ListaAlunoAdapter.java

Novoapacote
para ListaAlunoAdapter, no pacote adapter
Cria
classe
classes Adapter

Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf)

M.Sc. Mrcio Palheta

15/35

Exerccio 03: ListaAlunoAdapter.java

Novoapacote
para ListaAlunoAdapter, no pacote adapter
Cria
classe
classes Adapter

Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf)

Classe filha de
BaseAdapter

M.Sc. Mrcio Palheta

16/35

Exerccio 03: ListaAlunoAdapter.java

Novoapacote
para ListaAlunoAdapter, no pacote adapter
Cria
classe
classes Adapter

Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf)

Classe filha de
BaseAdapter

Dependncias do
nosso Adapter

M.Sc. Mrcio Palheta

17/35

Exerccio 03: ListaAlunoAdapter.java

Novoapacote
para ListaAlunoAdapter, no pacote adapter
Cria
classe
classes Adapter

Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf)

Classe filha de
BaseAdapter

Dependncias do
nosso Adapter

Mtodo construtor para

Injeo de Dependncias

M.Sc. Mrcio Palheta

18/35

Exerccio 04: Atualizao do Adapter

Na classe ListaAlunoAdapter, implemente os mtodos

herdados da classe abstrata BaseAdapter

M.Sc. Mrcio Palheta

19/35

Exerccio 04: Atualizao do Adapter

o total
NaRetorna
classe
ListaAlunoAdapter, implemente os mtodos
de itens da lista
herdados da classe abstrata BaseAdapter

M.Sc. Mrcio Palheta

20/35

Exerccio 04: Atualizao do Adapter

o total
NaRetorna
classe
ListaAlunoAdapter, implemente os mtodos
de itens da lista
herdados da classe abstrata BaseAdapter
Mtodo que
retorna o ID de
um item

M.Sc. Mrcio Palheta

21/35

Exerccio 04: Atualizao do Adapter

o total
NaRetorna
classe
ListaAlunoAdapter, implemente os mtodos
de itens da lista
herdados da classe abstrata BaseAdapter
Mtodo que
retorna o ID de
um item

Retorna o
Aluno que
representa
um item da
ListView

M.Sc. Mrcio Palheta

22/35

Exerccio 05: Gerar a linha da ListView

Implemente o mtodo ListaAlunoAdapter.getView(...):

M.Sc. Mrcio Palheta

23/35

Exerccio 05: Gerar a linha da ListView

Mtodo que retorna o item

que ser
exibido na ListaAlunoAdapter.getView(...):
ListView
Implemente
o mtodo

M.Sc. Mrcio Palheta

24/35

Exerccio 05: Gerar a linha da ListView

Mtodo que retorna o item

O item da ListView
que ser
exibido na ListaAlunoAdapter.getView(...):
ListView
carregado com o
Implemente
o mtodo
novo layout

M.Sc. Mrcio Palheta

25/35

Exerccio 05: Gerar a linha da ListView

Mtodo que retorna o item

O item da ListView
que ser
exibido na ListaAlunoAdapter.getView(...):
ListView
carregado com o
Implemente
o mtodo
novo layout
Pega uma
referncia para Aluno

M.Sc. Mrcio Palheta

26/35

Exerccio 05: Gerar a linha da ListView

Mtodo que retorna o item

O item da ListView
que ser
exibido na ListaAlunoAdapter.getView(...):
ListView
carregado com o
Implemente
o mtodo
novo layout
Pega uma
referncia para Aluno

Configurao de
Cor de fundo das
linhas da ListView

M.Sc. Mrcio Palheta

27/35

Exerccio 05: final do mtodo getView()

M.Sc. Mrcio Palheta

28/35

Exerccio
05: final do mtodo getView()
Configurao
do nome

M.Sc. Mrcio Palheta

29/35

Exerccio
05: final do mtodo getView()
Configurao
do nome
Configurao
da foto

M.Sc. Mrcio Palheta

30/35

Exerccio
05: final do mtodo getView()
Configurao
do nome
Configurao
da foto

Retorna a linha
da ListView

M.Sc. Mrcio Palheta

31/35

Execute a App e veja o novo Layout

M.Sc. Mrcio Palheta

32/35

O que vem a seguir?

Servios de background: Receber SMS e Tocar MP3

Integrao via JSON

Tarefas assncronas e Barra de progresso

Fragments

Google Maps e GPS

M.Sc. Mrcio Palheta

33/35

Referncias

www.caelum.com.br

d.android.com

LECHETA, Ricardo. Google Android, 3a edio,

Novatec, So Paulo, 2013
Cdigo fonte completo:
https://github.com/marciopalheta/cursosandroid

M.Sc. Mrcio Palheta

34/35

Captulo 08: Layouts customizados