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 12 - Fragments

6,358 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

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

×