Capítulo 12 - Fragments

6,219 views

Published on

Neste capítulo estudamos o desenvolvimento de telas mais complexas, "quebrando" a tela em pedaços menores.
Discutimos itens como:
1. Pacote de Compatibilidade e Qualifiers;
2. Uso da API de Fragments;
3. Definição de Layouts com FrameLayout
4. Uso do FragmentTransaction
5. TableLayout e TableRow;
6. Telas personalizadas para Tablets em Landscape: xlarge-land
7. Passagem de objetos entre Fragments

Published in: Education
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total views
6,219
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
716
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

Capítulo 12 - Fragments

  1. 1. Capítulo 12: Fragments
  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 ● Mais funcionalidades em telas maiores ● Fragments e seu histórico ● Pacote de compatibilidades ● Fragment de Listagem de Provas ● Controlador de fragmentos: FragmentActivity ● Fragment de Dados da Prova M.Sc. Márcio Palheta 3/98
  4. 4. Mais funcionalidades em telas maiores ● ● ● ● ● Hoje em dia, temos devices com os mais diferentes tipos e tamanhos de telas Quanto maior o device, maior a possibilidade de criação de telas mais ricas, com maior quantidade de recursos Mas o aumento de funcionalidades em uma tela gera um problema: como tornar a tela mais complexa, sem aumentar muito a quantidade de código necessário? Seria uma boa ideia “quebrar” a tela em pedaços menores Neste cenário, a Activity apenas delega as tarefas ao controlador de cada pedaço de tela M.Sc. Márcio Palheta 4/98
  5. 5. Fragments ● A API de Fragments facilita a fragmentação da tela ● Surgiu na versão Honeycomb (Android 3.0 – API Level 11) ● Foram desenvolvidos para rodar em tablets ● ● ● Desde a concepção de uma App, devemos considerar que o usuário pode usar o device na Vertical ou Horizontal Em telas grandes, a mudança de orientação da tela gera grande impacto, podendo ser tratado com a criação de layouts específicos para cada tipo de orientação Mas e os devices com Android com Versão < 3.0 ? M.Sc. Márcio Palheta 5/98
  6. 6. Pacote de compatibilidades ● ● Para resolver o problema do slide anterior, foi criado um pacote de compatibilidade, que está em um .jar do SDK Nesse jar temos a classe FragmentActivity, que fornece a capacidade de usarmos Fragments em versões antigas ● Pacote: android.support.v4.app ● Exemplo: – android.support.v4.app.FragmentActivity – android.support.v4.app.FragmentTransaction M.Sc. Márcio Palheta 6/98
  7. 7. Definições de projeto ● Vamos exibir a lista de provas agendas e seus dados ● A listagem ficará em um Fragment e os dados em outro ● ● ● Nossa App será adaptável, podendo ser executa em smatrphone ou tablet, se adequando às características do device Vamos criar, ainda, uma FragmentActivity, responsável por delegar atividades a cada Fragment criado Vamos iniciar pela listagem de provas M.Sc. Márcio Palheta 7/98
  8. 8. Exercício 01: Listagem de provas ● Crie o arquivo de layout da nossa tela de listagem de provas: /res/layout/listaprovaslayout.xml M.Sc. Márcio Palheta 8/98
  9. 9. Exercício 01: Listagem de provas ● Crie o arquivo de layout da nossa tela de listagem de provas: /res/layout/listaprovaslayout.xml ListView para exibir a listagem de provas M.Sc. Márcio Palheta 9/98
  10. 10. Exercício 02: Crie a classe Prova.java M.Sc. Márcio Palheta 10/98
  11. 11. Exercício 02: Crie a classe Prova.java JavaBean que representa as Provas agendadas M.Sc. Márcio Palheta 11/98
  12. 12. Exercício 02: Crie a classe Prova.java JavaBean que representa as Provas agendadas Lista de atributos M.Sc. Márcio Palheta 12/98
  13. 13. Exercício 02: Crie a classe Prova.java JavaBean que representa as Provas agendadas Lista de atributos Método construtor M.Sc. Márcio Palheta 13/98
  14. 14. Exercício 02: Crie a classe Prova.java JavaBean que representa as Provas agendadas Lista de atributos Método construtor Sobrescrita de método M.Sc. Márcio Palheta 14/98
  15. 15. Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 15/98
  16. 16. Novo pacote Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 16/98
  17. 17. Novo pacote Exercício 03: ListaProvasFragment Classe filha de android.support. v4.app.Fragment M.Sc. Márcio Palheta 17/98
  18. 18. Novo pacote Exercício 03: ListaProvasFragment Classe filha de android.support. v4.app.Fragment Lista de atributos M.Sc. Márcio Palheta 18/98
  19. 19. Novo pacote Exercício 03: ListaProvasFragment Classe filha de android.support. v4.app.Fragment Lista de atributos Método que cria Lista de Provas M.Sc. Márcio Palheta 19/98
  20. 20. Novo pacote Exercício 03: ListaProvasFragment Classe filha de android.support. v4.app.Fragment Lista de atributos Método que cria Lista de Provas Lista povoada M.Sc. Márcio Palheta 20/98
  21. 21. Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 21/98
  22. 22. Método de criação Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 22/98
  23. 23. Método de criação Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 23/98
  24. 24. Método de criação Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 24/98
  25. 25. Método de criação Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 25/98
  26. 26. Método de criação Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 26/98
  27. 27. Método de criação Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 27/98
  28. 28. Método de criação Exercício 03: ListaProvasFragment M.Sc. Márcio Palheta 28/98
  29. 29. Exercício 04: provaslayout.xml ● Crie o layout da Activity que vai controlar os Fragments: – res/layout/provaslayout.xml M.Sc. Márcio Palheta 29/98
  30. 30. Exercício 04: provaslayout.xml ● Crie o layout da Activity que vai controlar os Fragments: – res/layout/provaslayout.xml Componente onde ficará o Fragment M.Sc. Márcio Palheta 30/98
  31. 31. Exercício 05: Novo tipo de Activity M.Sc. Márcio Palheta 31/98
  32. 32. Exercício 05: Novo tipo de Activity Classe filha de FragmentActivity M.Sc. Márcio Palheta 32/98
  33. 33. Exercício 05: Novo tipo de Activity Classe filha de FragmentActivity Composição da Tela M.Sc. Márcio Palheta 33/98
  34. 34. Exercício 06: AndroidManifest.xml ● Declare a FragmentActivity no AndroidManifest: M.Sc. Márcio Palheta 34/98
  35. 35. Exercício 07: Chamar a nova tela ● Atualize o método de click no menu principal da classe ListaAlunosActivity: M.Sc. Márcio Palheta 35/98
  36. 36. Exercício 07: Chamar a nova tela ● Atualize o método de click no menu principal da classe ListaAlunosActivity: Chamada da tela de listagem de provas M.Sc. Márcio Palheta 36/98
  37. 37. Execute a App M.Sc. Márcio Palheta 37/98
  38. 38. Execute a App M.Sc. Márcio Palheta 38/98
  39. 39. Execute a App M.Sc. Márcio Palheta 39/98
  40. 40. Execute a App M.Sc. Márcio Palheta 40/98
  41. 41. Execute a App M.Sc. Márcio Palheta 41/98
  42. 42. Detalhes das provas ● Vamos criar a estrutura para exibir os detalhes da prova ● Para isso, vamos implementar os seguintes componentes: – res/drawable-nodpi/border.xml com definição de estilo de borda que usaremos no background – res/layout/provas_detalhes.xml com definição da tela de detalhes – ...cadastroaluno.fragment.DetalhesProvaFragment para controlar o layout prova_detalhes.xml M.Sc. Márcio Palheta 42/98
  43. 43. Exercício 08: Arquivo de estilo ● Crie o arquivo: res/drawable-nodpi/border.xml M.Sc. Márcio Palheta 43/98
  44. 44. Exercício 08: Arquivo de estilo ● Crie o arquivo: res/drawable-nodpi/border.xml M.Sc. Márcio Palheta 44/98
  45. 45. Exercício 08: Arquivo de estilo ● Crie o arquivo: res/drawable-nodpi/border.xml M.Sc. Márcio Palheta 45/98
  46. 46. Exercício 08: Arquivo de estilo ● Crie o arquivo: res/drawable-nodpi/border.xml M.Sc. Márcio Palheta 46/98
  47. 47. Exercício 09: strings.xml ● Inclua novas Strings no arquivo: res/values/strings.xml M.Sc. Márcio Palheta 47/98
  48. 48. Exercício 10: Layout dos Detalhes ● Crie o arquivo: res/layout/provas_detalhes.xml M.Sc. Márcio Palheta 48/98
  49. 49. Exercício 10: Layout dos Detalhes ● Crie o arquivo: Layout em forma res/layout/provas_detalhes.xml de tabelas M.Sc. Márcio Palheta 49/98
  50. 50. Exercício 10: Layout dos Detalhes ● Crie o arquivo: Layout em forma res/layout/provas_detalhes.xml de tabelas Arquivo com definições de estilo M.Sc. Márcio Palheta 50/98
  51. 51. Exercício 10: Layout dos Detalhes ● Crie o arquivo: Layout em forma res/layout/provas_detalhes.xml de tabelas Arquivo com definições de estilo Componente de texto M.Sc. Márcio Palheta 51/98
  52. 52. Exercício 10: Layout dos Detalhes ● res/layout/provas_detalhes.xml (continuação) M.Sc. Márcio Palheta 52/98
  53. 53. Exercício 10: Layout dos Detalhes ● Definição de res/layout/provas_detalhes.xml (continuação) Linha da Tabela M.Sc. Márcio Palheta 53/98
  54. 54. Exercício 10: Layout dos Detalhes ● Definição de res/layout/provas_detalhes.xml (continuação) Linha da Tabela Primeira Coluna da Linha M.Sc. Márcio Palheta 54/98
  55. 55. Exercício 10: Layout dos Detalhes ● Definição de res/layout/provas_detalhes.xml (continuação) Linha da Tabela Primeira Coluna da Linha Segunda Coluna da Linha M.Sc. Márcio Palheta 55/98
  56. 56. Exercício 10: Layout dos Detalhes ● res/layout/provas_detalhes.xml (final) M.Sc. Márcio Palheta 56/98
  57. 57. Exercício 10: Layout dos Detalhes ● Nova linha da tabela res/layout/provas_detalhes.xml (final) M.Sc. Márcio Palheta 57/98
  58. 58. Exercício 10: Layout dos Detalhes ● Nova linha da tabela res/layout/provas_detalhes.xml (final) Colunas da linha M.Sc. Márcio Palheta 58/98
  59. 59. Exercício 10: Layout dos Detalhes ● Nova linha da tabela res/layout/provas_detalhes.xml (final) Colunas da linha Lista de tópicos da prova M.Sc. Márcio Palheta 59/98
  60. 60. Pensando em controle ● ● ● ● Agora, podemos criar uma classe de controle para inflar o layout de detalhes das provas agendadas No pacote br.com.cursoandroid.cadastroaluno.fragment, crie a classe DetalhesProvaFragment, filha de Fragment No método onCreate(), use o objeto injetado LayoutInflater para inflar o layout recém criado; No fim, devolva a view gerada com o novo layout M.Sc. Márcio Palheta 60/98
  61. 61. Exercício 11: DetalhesProvaFragment ● Classe de controle da tela de Detalhes da Prova M.Sc. Márcio Palheta 61/98
  62. 62. Exercício 11: DetalhesProvaFragment ● Classe de controle da tela de Detalhes da Pacote da Prova classe M.Sc. Márcio Palheta 62/98
  63. 63. Exercício 11: DetalhesProvaFragment ● Classe de controle da tela de Detalhes da Classe filha de Pacote da Prova classe Fragment M.Sc. Márcio Palheta 63/98
  64. 64. Exercício 11: DetalhesProvaFragment ● Classe de controle da tela de Detalhes da Classe filha de Pacote da Prova classe Fragment Inflando o layout de Detalhes da prova M.Sc. Márcio Palheta 64/98
  65. 65. Exercício 11: DetalhesProvaFragment ● Classe de controle da tela de Detalhes da Classe filha de Pacote da Prova classe Fragment Inflando o layout de Detalhes da prova Retorna a tela de detalhes M.Sc. Márcio Palheta 65/98
  66. 66. Pensando em usabilidade ● ● ● O design atual da app está organizado para rodar em smartphones, onde, geralmente, a tela é pequena. No entanto, quando rodamos a App em um Tablet, temos mais espaço para trabalhar, o que nos dá a chance de exibir mais funcionalidades para o usuário. Quando executarmos nossa App em um Tablet que esteja na horizontal (landscape), gostaríamos de exibir: – – a lista de provas, à esquerda; e os detalhes de cada prova selecionada, à direita; M.Sc. Márcio Palheta 66/98
  67. 67. Apresentação da tela em Tablets ● ● Quando estudamos Application Resources, vimos que podemos utilizar qualifiers para carregar recursos em função das características do device; Vamos aproveitar essa feature do Android para desenvolvermos uma tela adequada a um device que seja um Tablet, na orientação Landscape, representado por: – ● ● xlarge-land Contudo, além carregarmos automaticamente o recurso, precisamos saber, em tempo de projeto, se o device é um tablet em landscape. Para isso podemos definir arquivos booleanos, onde true indica tablet-landscape e false o contrário. M.Sc. Márcio Palheta 67/98
  68. 68. Definição de arquivos booleanos ● ● ● Para tablet-landscape - /res/values-xlarge-land/bools.xml: <resources> <bool name="isTablet">true</bool> </resources> Para o contrário - /res/values/bools.xml: <resources> <bool name="isTablet">false</bool> </resources> Agora, podemos criar o layout da tela de provas para rodar em xlarge-land M.Sc. Márcio Palheta 68/98
  69. 69. Exercício 12: Layout para tablet ● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml M.Sc. Márcio Palheta 69/98
  70. 70. Exercício 12: Layout para tablet ● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml Listagem de provas M.Sc. Márcio Palheta 70/98
  71. 71. Exercício 12: Layout para tablet ● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml Listagem de provas Precisa de 1 pedaço do layout M.Sc. Márcio Palheta 71/98
  72. 72. Exercício 12: Layout para tablet ● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml Listagem de provas Precisa de 1 pedaço do layout Detalhes da provas M.Sc. Márcio Palheta 72/98
  73. 73. Exercício 12: Layout para tablet ● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml Listagem de provas Precisa de 1 pedaço do layout Detalhes da provas Precisa de 2 pedaços do layout M.Sc. Márcio Palheta 73/98
  74. 74. Carga personalizada do layout ● Agora que podemos descobrir se a tela é xlarge-land ou não, vamos: – – ● Perguntar do ApplicationResources se a tela é grande Vincular os Fragments ListaProvas e DetalheProvas, de acordo com o tamanho da tela Na classe ProvasActivity, precisamos: – Incluir o método isTablet() – Alterar o método onCreate() M.Sc. Márcio Palheta 74/98
  75. 75. Exercício 13: Alterar ProvasActivity ● No controlador ProvasActivity, inclua o método isTablet() para acessar o valor da propriedade isTablet, do arquivo bool.xml: M.Sc. Márcio Palheta 75/98
  76. 76. Exercício 14: carregar fragmentos ● Altere o método ProvasActivity.onCreate(): M.Sc. Márcio Palheta 76/98
  77. 77. Exercício 14: carregar fragmentos ● Altere o método ProvasActivity.onCreate(): Carrega as telas de Listagem e Detalhes da prova M.Sc. Márcio Palheta 77/98
  78. 78. Exercício 14: carregar fragmentos ● Altere o método ProvasActivity.onCreate(): Carrega as telas de Listagem e Detalhes da prova Carrega apenas a Tela de Listagem M.Sc. Márcio Palheta 78/98
  79. 79. Rode a App e veja o resultado M.Sc. Márcio Palheta 79/98
  80. 80. Trocando dados entre Fragments ● ● ● ● ● Com a listagem das provas pronta, podemos implementar a visualização dos detalhes. Vamos atualizar a tela de Detalhes quando ocorrer um click em um dos itens da Listagem. Vamos tratar o click em itens da lista, para que possamos chamar a tela de detalhes, passando como parâmetro a prova que foi selecionada. Porém, não é papel da ListaProvasFragment chamar a DetalhesProvaFragment. Essa delegação é papel da Activity que controla os fragmentos M.Sc. Márcio Palheta 80/98
  81. 81. Exercício 15: Alterar ProvasActivity ● Crie o método selecionarProva(Prova) em ProvasActivity M.Sc. Márcio Palheta 81/98
  82. 82. Exercício 15: Alterar ProvasActivity ● Definição de parâmetros Crie o método selecionarProva(Prova) em ProvasActivity M.Sc. Márcio Palheta 82/98
  83. 83. Exercício 15: Alterar ProvasActivity ● Definição de parâmetros Crie o método selecionarProva(Prova) em ProvasActivity Criação do Fragment M.Sc. Márcio Palheta 83/98
  84. 84. Exercício 15: Alterar ProvasActivity ● Definição de parâmetros Crie o método selecionarProva(Prova) em ProvasActivity Criação do Fragment Configuração da tela M.Sc. Márcio Palheta 84/98
  85. 85. Exercício 15: Alterar ProvasActivity ● Definição de parâmetros Crie o método selecionarProva(Prova) em ProvasActivity Criação do Fragment Configuração da tela Se não for xlarge-land, Não incrementa a Pilha de execução M.Sc. Márcio Palheta 85/98
  86. 86. Exercício 16: Atualizar o fragment ● Altere o método ListaProvasFragment.onCreate() M.Sc. Márcio Palheta 86/98
  87. 87. Exercício 16: Atualizar o fragment ● Altere o método ListaProvasFragment.onCreate() Delegar atividade para Activity de controle M.Sc. Márcio Palheta 87/98
  88. 88. Atualizações da tela de Detalhes ● ● Precisamos adequar o nosso controlador da tela de detalhes, para receber uma Prova e exibir seus dados Para isso, em DetalhesProvaFragment, vamos: – Criar atributos de Prova, matéria, data e tópicos; – Pegar a prova que foi passada como parâmetro; – Criar o método buscaComponentes(), que liga atributos a componentes de tela; e – O método carregarCamposComDadosDaProva(), que atualiza os componente de tela, com dados da Prova M.Sc. Márcio Palheta 88/98
  89. 89. Exercício 17: Receber dados da prova M.Sc. Márcio Palheta 89/98
  90. 90. Exercício 17: Receber dados da prova Lista de atributos M.Sc. Márcio Palheta 90/98
  91. 91. Exercício 17: Receber dados da prova Lista de atributos Associa campos da Tela a atributos M.Sc. Márcio Palheta 91/98
  92. 92. Exercício 17: Receber dados da prova Lista de atributos Associa campos da Tela a atributos Carrega os dados da Prova na tela M.Sc. Márcio Palheta 92/98
  93. 93. Exercício 17: Receber dados da prova ● Atualize o método DetalhesProvaFragment.onCreate() M.Sc. Márcio Palheta 93/98
  94. 94. Exercício 17: Receber dados da prova ● Atualize o método DetalhesProvaFragment.onCreate() Receber dados da prova M.Sc. Márcio Palheta 94/98
  95. 95. Exercício 17: Receber dados da prova ● Atualize o método DetalhesProvaFragment.onCreate() Receber dados da prova Exibir dados da prova M.Sc. Márcio Palheta 95/98
  96. 96. Rode a App e selecione uma Prova M.Sc. Márcio Palheta 96/98
  97. 97. 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 97/98
  98. 98. Capítulo 12: Fragments

×