Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Capítulo 08 - desenvolvimento de layouts customizados

4,694 views

Published on

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;

Published in: Education

Capítulo 08 - desenvolvimento de layouts customizados

  1. 1. Capítulo 08: Layouts customizados
  2. 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. 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. 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. 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. 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. 7. Exercício 02: res/layout/item.xml M.Sc. Márcio Palheta 7/35
  8. 8. Exercício 02: res/layout/item.xml ImageView para exibir a Foto M.Sc. Márcio Palheta 8/35
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. Exercício 05: Gerar a linha da ListView ● Implemente o método ListaAlunoAdapter.getView(...): M.Sc. Márcio Palheta 23/35
  24. 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. 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. 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. 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. 28. Exercício 05: final do método getView() M.Sc. Márcio Palheta 28/35
  29. 29. Exercício 05: final do método getView() Configuração do nome M.Sc. Márcio Palheta 29/35
  30. 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. 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. 32. Execute a App e veja o novo Layout M.Sc. Márcio Palheta 32/35
  33. 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. 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. 35. Capítulo 08: Layouts customizados

×