Capítulo 08: Layouts customizados

Transcrição

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 sites.google.com/site/marcio 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 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 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 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: 6/35

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

8 Exercício 02: res/layout/item.xml ImageView para exibir a Foto 8/35

9 Exercício 02: res/layout/item.xml ImageView para exibir a Foto Efeito de borda da Imagem 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 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 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() 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 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) 14/35

15 Exercício 03: ListaAlunoAdapter.java Cria Novo a pacote classe para ListaAlunoAdapter, no pacote adapter classes Adapter Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf) 15/35

16 Exercício 03: ListaAlunoAdapter.java Cria Novo a pacote classe para ListaAlunoAdapter, no pacote adapter classes Adapter Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf) Classe filha de BaseAdapter 16/35

17 Exercício 03: ListaAlunoAdapter.java Cria Novo a pacote classe para ListaAlunoAdapter, no pacote adapter classes Adapter Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf) Dependências do nosso Adapter Classe filha de BaseAdapter 17/35

18 Exercício 03: ListaAlunoAdapter.java Cria Novo a pacote classe para ListaAlunoAdapter, no pacote adapter classes Adapter Gere atributos e um construtor (No eclipse: Ctrl+3 gcuf) Dependências do nosso Adapter Classe filha de BaseAdapter Método construtor para Injeção de Dependências 18/35

19 Exercício 04: Atualização do Adapter Na classe ListaAlunoAdapter, implemente os métodos herdados da classe abstrata BaseAdapter 19/35

20 Exercício 04: Atualização do Adapter Na Retorna classe o total ListaAlunoAdapter, implemente os métodos de itens da lista herdados da classe abstrata BaseAdapter 20/35

21 Exercício 04: Atualização do Adapter Na Retorna classe o total ListaAlunoAdapter, implemente os métodos de itens da lista herdados da classe abstrata BaseAdapter Método que retorna o ID de um item 21/35

22 Exercício 04: Atualização do Adapter Na Retorna classe o total 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 22/35

23 Exercício 05: Gerar a linha da ListView Implemente o método ListaAlunoAdapter.getView(...): 23/35

24 Exercício 05: Gerar a linha da ListView Método que retorna o item Implemente que será o método exibido na ListaAlunoAdapter.getView(...): ListView 24/35

25 Exercício 05: Gerar a linha da ListView Método que retorna o item O item da ListView é carregado com o novo layout Implemente que será o método exibido na ListaAlunoAdapter.getView(...): ListView 25/35

26 Exercício 05: Gerar a linha da ListView Método que retorna o item O item da ListView é carregado com o novo layout Implemente que será o método exibido na ListaAlunoAdapter.getView(...): ListView Pega uma referência para Aluno 26/35

27 Exercício 05: Gerar a linha da ListView Método que retorna o item O item da ListView é carregado com o novo layout Implemente que será o método exibido na ListaAlunoAdapter.getView(...): ListView Pega uma referência para Aluno Configuração de Cor de fundo das linhas da ListView 27/35

28 Exercício 05: final do método getview() 28/35

29 Exercício 05: final do método getview() Configuração do nome 29/35

30 Exercício 05: final do método getview() Configuração do nome Configuração da foto 30/35

31 Exercício 05: final do método getview() Configuração do nome Configuração da foto Retorna a linha da ListView 31/35

32 Execute a App e veja o novo Layout 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 33/35

34 Referências d.android.com LECHETA, Ricardo. Google Android, 3a edição, Novatec, São Paulo, 2013 Código fonte completo: 34/35

35 Capítulo 08: Layouts customizados