Capítulo 08 - desenvolvimento de layouts customizados

  • 1,296 views
Uploaded on

Neste capítulo, apresentamos uma estratégia para personalização do layout exibido em uma ListView …

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;

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,296
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
231
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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