Capítulo 08 - desenvolvimento de layouts customizados

Capítulo 08: Layouts customizados

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

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

3/35

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

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 começar por esses dois XMLs


5/35

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:


6/35

Exercício 02: res/layout/item.xml


7/35


ImageView para
exibir a Foto


8/35


ImageView para
exibir a Foto
Efeito de
borda da Imagem


9/35


ImageView para
exibir a Foto
Efeito de
borda da Imagem

TextView para
exibir o Nome


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 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


11/35

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()

12/35

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

13/35

Exercício 03: ListaAlunoAdapter.java
●

Cria a classe ListaAlunoAdapter, no pacote adapter

●

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


14/35

●

Novo pacote para
classes Adapter

●



15/35

●

Novo pacote para
classes Adapter

●

Classe filha de
BaseAdapter


16/35

●

Novo pacote para
classes Adapter

●

Classe filha de
BaseAdapter

Dependências do
nosso Adapter


17/35

●

Novo pacote para
classes Adapter

●

Classe filha de
BaseAdapter

Dependências do
nosso Adapter

Método construtor para
Injeção de Dependências


18/35

Exercício 04: Atualização do Adapter
●

Na classe ListaAlunoAdapter, implemente os métodos
herdados da classe abstrata BaseAdapter


19/35

●

NaRetorna o total
classe ListaAlunoAdapter, implemente os métodos
de itens da lista


20/35

●

NaRetorna o total
de itens da lista
Método que
retorna o ID de
um item


21/35

●

NaRetorna o total
de itens da lista
Método que
retorna o ID de
um item

Retorna o
Aluno que
representa
um item da
ListView


22/35

Exercício 05: Gerar a linha da ListView
●

Implemente o método ListaAlunoAdapter.getView(...):


23/35

●

Método que retorna o item
que o método ListView
Implementeserá exibido na ListaAlunoAdapter.getView(...):


24/35

●

O item da ListView é
carregado com o
novo layout


25/35

●

carregado com o
novo layout
Pega uma
referência para Aluno


26/35

●

carregado com o
novo layout
Pega uma
referência para Aluno

Configuração de
Cor de fundo das
linhas da ListView


27/35

Exercício 05: final do método getView()


28/35

Configuração
do nome


29/35

Configuração
do nome
Configuração
da foto


30/35

Configuração
do nome
Configuração
da foto

Retorna a linha
da ListView


31/35

Execute a App e veja o novo Layout


32/35

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


33/35

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


34/35

Capítulo 08 - desenvolvimento de layouts customizados

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Capítulo 08 - desenvolvimento de layouts customizados

Semelhante a Capítulo 08 - desenvolvimento de layouts customizados (9)

Mais de Marcio Palheta

Mais de Marcio Palheta (7)

Último

Último (20)

Capítulo 08 - desenvolvimento de layouts customizados