Download - Layout Customizados Android
Capítulo 08: Layouts customizados
M.Sc. Márcio Palheta
Instrutor
● Programador desde 2000
● Aluno de doutorado
● Mestre em informática pelo ICOMP/UFAM
● Especialista em aplicações WEB – FUCAPI
● sites.google.com/site/marciopalheta
M.Sc. Márcio Palheta
3/35
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
4/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
M.Sc. Márcio Palheta
5/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
M.Sc. Márcio Palheta
6/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:
M.Sc. Márcio Palheta
7/35
Exercício 02: res/layout/item.xml
M.Sc. Márcio Palheta
8/35
Exercício 02: res/layout/item.xml
ImageView paraexibir a Foto
M.Sc. Márcio Palheta
9/35
Exercício 02: res/layout/item.xml
ImageView paraexibir a Foto
Efeito deborda da Imagem
M.Sc. Márcio Palheta
10/35
Exercício 02: res/layout/item.xml
ImageView paraexibir a Foto
TextView paraexibir o Nome
Efeito deborda da Imagem
M.Sc. Márcio Palheta
11/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
M.Sc. Márcio Palheta
12/35
Métodos da classe BaseAdapter
● 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()
● Retorna um identificador único para o item da lista.
● Vamos retorna o id do aluno:
– listaAlunos.get(posicao).getId()
public int getCount()
public long getItemId(int posicao)
M.Sc. Márcio Palheta
13/35
Métodos da classe BaseAdapter
● Retorna um item da lista, de acordo com a posição
– listaAlunos.get(posicao)
● 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
public Object getItem(int posicao)
public View getView(int posicao, View convertView, ViewGroup parent)
M.Sc. Márcio Palheta
14/35
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
15/35
Exercício 03: ListaAlunoAdapter.java
● Cria a classe ListaAlunoAdapter, no pacote adapter
● Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
Novo pacote para classes Adapter
M.Sc. Márcio Palheta
16/35
Exercício 03: ListaAlunoAdapter.java
● Cria a classe ListaAlunoAdapter, no pacote adapter
● Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
Novo pacote para classes Adapter
Classe filha de BaseAdapter
M.Sc. Márcio Palheta
17/35
Exercício 03: ListaAlunoAdapter.java
● Cria a classe ListaAlunoAdapter, no pacote adapter
● Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
Novo pacote para classes Adapter
Classe filha de BaseAdapterDependências do
nosso Adapter
M.Sc. Márcio Palheta
18/35
Exercício 03: ListaAlunoAdapter.java
● Cria a classe ListaAlunoAdapter, no pacote adapter
● Gere atributos e um construtor (No eclipse: Ctrl+3 → gcuf)
Novo pacote para classes Adapter
Classe filha de BaseAdapterDependências do
nosso Adapter
Método construtor paraInjeção de Dependências
M.Sc. Márcio Palheta
19/35
Exercício 04: Atualização do Adapter
● Na classe ListaAlunoAdapter, implemente os métodos herdados da classe abstrata BaseAdapter
M.Sc. Márcio Palheta
20/35
Exercício 04: Atualização do Adapter
● Na classe ListaAlunoAdapter, implemente os métodos herdados da classe abstrata BaseAdapter
Retorna o totalde itens da lista
M.Sc. Márcio Palheta
21/35
Exercício 04: Atualização do Adapter
● Na classe ListaAlunoAdapter, implemente os métodos herdados da classe abstrata BaseAdapter
Retorna o totalde itens da lista
Método que retorna o ID de
um item
M.Sc. Márcio Palheta
22/35
Exercício 04: Atualização do Adapter
● Na classe ListaAlunoAdapter, implemente os métodos herdados da classe abstrata BaseAdapter
Retorna o totalde itens da lista
Método que retorna o ID de
um item
Retorna o Aluno que
representa um item da
ListView
M.Sc. Márcio Palheta
23/35
Exercício 05: Gerar a linha da ListView
● Implemente o método ListaAlunoAdapter.getView(...):
M.Sc. Márcio Palheta
24/35
Exercício 05: Gerar a linha da ListView
● Implemente o método ListaAlunoAdapter.getView(...):Método que retorna o item
que será exibido na ListView
M.Sc. Márcio Palheta
25/35
Exercício 05: Gerar a linha da ListView
● Implemente o método ListaAlunoAdapter.getView(...):Método que retorna o item
que será exibido na ListViewO item da ListView é
carregado com onovo layout
M.Sc. Márcio Palheta
26/35
Exercício 05: Gerar a linha da ListView
● Implemente o método ListaAlunoAdapter.getView(...):Método que retorna o item
que será exibido na ListViewO item da ListView é
carregado com onovo layout
Pega uma referência para Aluno
M.Sc. Márcio Palheta
27/35
Exercício 05: Gerar a linha da ListView
● Implemente o método ListaAlunoAdapter.getView(...):Método que retorna o item
que será exibido na ListViewO item da ListView é
carregado com onovo layout
Pega uma referência para Aluno Configuração de
Cor de fundo daslinhas da ListView
M.Sc. Márcio Palheta
28/35
Exercício 05: final do método getView()
M.Sc. Márcio Palheta
29/35
Exercício 05: final do método getView()Configuração do nome
M.Sc. Márcio Palheta
30/35
Exercício 05: final do método getView()Configuração do nome
Configuração da foto
M.Sc. Márcio Palheta
31/35
Exercício 05: final do método getView()Configuração do nome
Configuração da foto
Retorna a linhada ListView
M.Sc. Márcio Palheta
32/35
Execute a App e veja o novo Layout
M.Sc. Márcio Palheta
33/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
M.Sc. Márcio Palheta
34/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
Capítulo 08: Layouts customizados