capítulo 08 - desenvolvimento de layouts customizados
DESCRIPTION
Neste capítulo, apresentamos uma estratégia para personalização do layout exibido em uma ListView Itens discutidos: 1. Definição de um arquivo de cores; 2. Definição de um novo layout.xml; 3. Adapters customizados e a classe abstrata BaseAdapter; 4. Injeção de Dependências em Android;TRANSCRIPT
![Page 1: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/1.jpg)
Capítulo 08: Layouts customizados
![Page 2: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/2.jpg)
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
![Page 3: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/3.jpg)
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
![Page 4: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/4.jpg)
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
![Page 5: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/5.jpg)
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
![Page 6: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/6.jpg)
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:
![Page 7: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/7.jpg)
M.Sc. Márcio Palheta
7/35
Exercício 02: res/layout/item.xml
![Page 8: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/8.jpg)
M.Sc. Márcio Palheta
8/35
Exercício 02: res/layout/item.xml
ImageView paraexibir a Foto
![Page 9: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/9.jpg)
M.Sc. Márcio Palheta
9/35
Exercício 02: res/layout/item.xml
ImageView paraexibir a Foto
Efeito deborda da Imagem
![Page 10: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/10.jpg)
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
![Page 11: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/11.jpg)
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
![Page 12: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/12.jpg)
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)
![Page 13: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/13.jpg)
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)
![Page 14: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/14.jpg)
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)
![Page 15: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/15.jpg)
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
![Page 16: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/16.jpg)
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
![Page 17: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/17.jpg)
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
![Page 18: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/18.jpg)
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
![Page 19: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/19.jpg)
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
![Page 20: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/20.jpg)
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
![Page 21: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/21.jpg)
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
![Page 22: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/22.jpg)
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
![Page 23: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/23.jpg)
M.Sc. Márcio Palheta
23/35
Exercício 05: Gerar a linha da ListView
● Implemente o método ListaAlunoAdapter.getView(...):
![Page 24: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/24.jpg)
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
![Page 25: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/25.jpg)
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
![Page 26: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/26.jpg)
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
![Page 27: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/27.jpg)
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
![Page 28: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/28.jpg)
M.Sc. Márcio Palheta
28/35
Exercício 05: final do método getView()
![Page 29: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/29.jpg)
M.Sc. Márcio Palheta
29/35
Exercício 05: final do método getView()Configuração do nome
![Page 30: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/30.jpg)
M.Sc. Márcio Palheta
30/35
Exercício 05: final do método getView()Configuração do nome
Configuração da foto
![Page 31: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/31.jpg)
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
![Page 32: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/32.jpg)
M.Sc. Márcio Palheta
32/35
Execute a App e veja o novo Layout
![Page 33: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/33.jpg)
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
![Page 34: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/34.jpg)
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
![Page 35: Capítulo 08 - desenvolvimento de layouts customizados](https://reader033.vdocuments.site/reader033/viewer/2022060115/5579a10cd8b42ac1148b47d6/html5/thumbnails/35.jpg)
Capítulo 08: Layouts customizados