Capítulo 08 - desenvolvimento de layouts customizados

  • View
    2.330

  • Download
    3

Embed Size (px)

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;

Text of Capítulo 08 - desenvolvimento de layouts customizados

  • 1. Captulo 08: Layouts customizados

2. Instrutor Programador desde 2000Aluno de doutoradoMestre em informtica pelo ICOMP/UFAM Especialista em aplicaes WEB FUCAPI marcio.palheta@gmail.com sites.google.com/site/marcio palheta M.Sc. Mrcio Palheta 3. Agenda Na estrada, at aquiNovo layout para a listagem de alunos, usando: Foto e Nome do AlunoArquivo de cores: res/values/colors.xmlLayout para itens da ListView: res/layout/item.xmlAdapters customizados: ListaAlunoAdapter.javaInjeo de dependncias em Android M.Sc. Mrcio Palheta3/35 4. Na estrada, at aqui. A nossa lista de alunos apresenta o nome dos alunos Essa lista baseada em um layout do prprio Android: android.R.layout.simple_list_item_1Esse layout usado pelo ArrayAdapter par vincular a lista de alunos (List) nossa ListView M.Sc. Mrcio Palheta4/35 5. Hora de melhorar o layout Mas agora, temos a foto do aluno, armazenada no deviceO caminho para a foto est armazenado no SQLiteQueremos 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 comear por esses dois XMLsM.Sc. Mrcio Palheta5/35 6. Exerccio 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. Mrcio Palheta6/35 7. Exerccio 02: res/layout/item.xmlM.Sc. Mrcio Palheta7/35 8. Exerccio 02: res/layout/item.xmlImageView para exibir a FotoM.Sc. Mrcio Palheta8/35 9. Exerccio 02: res/layout/item.xmlImageView para exibir a Foto Efeito de borda da ImagemM.Sc. Mrcio Palheta9/35 10. Exerccio 02: res/layout/item.xmlImageView para exibir a Foto Efeito de borda da ImagemTextView para exibir o NomeM.Sc. Mrcio Palheta10/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 prprio Adapter No Android, temos a classe abstrata BaseAdapter, que j traz os mtodos abstratos necessrios exibio da lista na telaM.Sc. Mrcio Palheta11/35 12. Mtodos 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 coleo de alunos pelo construtor e usar o mtodo 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. Mrcio Palheta12/35 13. Mtodos da classe BaseAdapter public Object getItem(int posicao) Retorna um item da lista, de acordo com a posio 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, tambm, a Activity pelo construtor M.Sc. Mrcio Palheta13/35 14. Exerccio 03: ListaAlunoAdapter.java Cria a classe ListaAlunoAdapter, no pacote adapterGere atributos e um construtor (No eclipse: Ctrl+3 gcuf)M.Sc. Mrcio Palheta14/35 15. Exerccio 03: ListaAlunoAdapter.java Novo pacote para Cria a classe ListaAlunoAdapter, no pacote adapter classes AdapterGere atributos e um construtor (No eclipse: Ctrl+3 gcuf)M.Sc. Mrcio Palheta15/35 16. Exerccio 03: ListaAlunoAdapter.java Novo pacote para Cria a classe ListaAlunoAdapter, no pacote adapter classes AdapterGere atributos e um construtor (No eclipse: Ctrl+3 gcuf) Classe filha de BaseAdapterM.Sc. Mrcio Palheta16/35 17. Exerccio 03: ListaAlunoAdapter.java Novo pacote para Cria a classe ListaAlunoAdapter, no pacote adapter classes AdapterGere atributos e um construtor (No eclipse: Ctrl+3 gcuf) Classe filha de BaseAdapterDependncias do nosso AdapterM.Sc. Mrcio Palheta17/35 18. Exerccio 03: ListaAlunoAdapter.java Novo pacote para Cria a classe ListaAlunoAdapter, no pacote adapter classes AdapterGere atributos e um construtor (No eclipse: Ctrl+3 gcuf) Classe filha de BaseAdapterDependncias do nosso AdapterMtodo construtor para Injeo de DependnciasM.Sc. Mrcio Palheta18/35 19. Exerccio 04: Atualizao do Adapter Na classe ListaAlunoAdapter, implemente os mtodos herdados da classe abstrata BaseAdapterM.Sc. Mrcio Palheta19/35 20. Exerccio 04: Atualizao do Adapter NaRetorna o total classe ListaAlunoAdapter, implemente os mtodos de itens da lista herdados da classe abstrata BaseAdapterM.Sc. Mrcio Palheta20/35 21. Exerccio 04: Atualizao do Adapter NaRetorna o total classe ListaAlunoAdapter, implemente os mtodos de itens da lista herdados da classe abstrata BaseAdapter Mtodo que retorna o ID de um itemM.Sc. Mrcio Palheta21/35 22. Exerccio 04: Atualizao do Adapter NaRetorna o total classe ListaAlunoAdapter, implemente os mtodos de itens da lista herdados da classe abstrata BaseAdapter Mtodo que retorna o ID de um itemRetorna o Aluno que representa um item da ListViewM.Sc. Mrcio Palheta22/35 23. Exerccio 05: Gerar a linha da ListView Implemente o mtodo ListaAlunoAdapter.getView(...):M.Sc. Mrcio Palheta23/35 24. Exerccio 05: Gerar a linha da ListView Mtodo que retorna o item que o mtodo ListView Implementeser exibido na ListaAlunoAdapter.getView(...):M.Sc. Mrcio Palheta24/35 25. Exerccio 05: Gerar a linha da ListView Mtodo que retorna o item O item da ListView que o mtodo ListView carregado com o Implementeser exibido na ListaAlunoAdapter.getView(...): novo layoutM.Sc. Mrcio Palheta25/35 26. Exerccio 05: Gerar a linha da ListView Mtodo que retorna o item O item da ListView que o mtodo ListView carregado com o Implementeser exibido na ListaAlunoAdapter.getView(...): novo layout Pega uma referncia para AlunoM.Sc. Mrcio Palheta26/35 27. Exerccio 05: Gerar a linha da ListView Mtodo que retorna o item O item da ListView que o mtodo ListView carregado com o Implementeser exibido na ListaAlunoAdapter.getView(...): novo layout Pega uma referncia para AlunoConfigurao de Cor de fundo das linhas da ListViewM.Sc. Mrcio Palheta27/35 28. Exerccio 05: final do mtodo getView()M.Sc. Mrcio Palheta28/35 29. Exerccio 05: final do mtodo getView() Configurao do nomeM.Sc. Mrcio Palheta29/35 30. Exerccio 05: final do mtodo getView() Configurao do nome Configurao da fotoM.Sc. Mrcio Palheta30/35 31. Exerccio 05: final do mtodo getView() Configurao do nome Configurao da fotoRetorna a linha da ListViewM.Sc. Mrcio Palheta31/35 32. Execute a App e veja o novo LayoutM.Sc. Mrcio Palheta32/35 33. O que vem a seguir? Servios de background: Receber SMS e Tocar MP3Integrao via JSONTarefas assncronas e Barra de progressoFragmentsGoogle Maps e GPSM.Sc. Mrcio Palheta33/35 34. Referncias www.caelum.com.brd.android.comLECHETA, Ricardo. Google Android, 3a edio, Novatec, So Paulo, 2013 Cdigo fonte completo: https://github.com/marciopalheta/cursosandroidM.Sc. Mrcio Palheta34/35 35. Captulo 08: Layouts customizados