Capítulo 12 - Fragments
-
Upload
marcio-palheta -
Category
Education
-
view
3.469 -
download
1
description
Transcript of Capítulo 12 - Fragments
![Page 1: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/1.jpg)
Capítulo 12: Fragments
![Page 2: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/2.jpg)
M.Sc. Márcio Palheta
Instrutor
● Programador desde 2000
● Aluno de doutorado
● Mestre em informática pelo ICOMP/UFAM
● Especialista em aplicações WEB – FUCAPI
● sites.google.com/site/marciopalheta
![Page 3: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/3.jpg)
M.Sc. Márcio Palheta
3/98
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
![Page 4: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/4.jpg)
M.Sc. Márcio Palheta
4/98
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
![Page 5: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/5.jpg)
M.Sc. Márcio Palheta
5/98
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 ?
![Page 6: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/6.jpg)
M.Sc. Márcio Palheta
6/98
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
![Page 7: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/7.jpg)
M.Sc. Márcio Palheta
7/98
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
![Page 8: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/8.jpg)
M.Sc. Márcio Palheta
8/98
Exercício 01: Listagem de provas
● Crie o arquivo de layout da nossa tela de listagem de provas: /res/layout/listaprovaslayout.xml
![Page 9: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/9.jpg)
M.Sc. Márcio Palheta
9/98
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
![Page 10: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/10.jpg)
M.Sc. Márcio Palheta
10/98
Exercício 02: Crie a classe Prova.java
![Page 11: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/11.jpg)
M.Sc. Márcio Palheta
11/98
Exercício 02: Crie a classe Prova.javaJavaBean que representa as
Provas agendadas
![Page 12: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/12.jpg)
M.Sc. Márcio Palheta
12/98
Exercício 02: Crie a classe Prova.javaJavaBean que representa as
Provas agendadas
Lista deatributos
![Page 13: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/13.jpg)
M.Sc. Márcio Palheta
13/98
Exercício 02: Crie a classe Prova.javaJavaBean que representa as
Provas agendadas
Método construtor
Lista deatributos
![Page 14: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/14.jpg)
M.Sc. Márcio Palheta
14/98
Exercício 02: Crie a classe Prova.javaJavaBean que representa as
Provas agendadas
Método construtor
Lista deatributos
Sobrescritade método
![Page 15: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/15.jpg)
M.Sc. Márcio Palheta
15/98
Exercício 03: ListaProvasFragment
![Page 16: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/16.jpg)
M.Sc. Márcio Palheta
16/98
Exercício 03: ListaProvasFragmentNovo pacote
![Page 17: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/17.jpg)
M.Sc. Márcio Palheta
17/98
Exercício 03: ListaProvasFragment
Classe filha de android.support.v4.app.Fragment
Novo pacote
![Page 18: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/18.jpg)
M.Sc. Márcio Palheta
18/98
Exercício 03: ListaProvasFragment
Classe filha de android.support.v4.app.Fragment
Novo pacote
Lista de atributos
![Page 19: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/19.jpg)
M.Sc. Márcio Palheta
19/98
Exercício 03: ListaProvasFragment
Classe filha de android.support.v4.app.Fragment
Novo pacote
Lista de atributos
Método que criaLista de Provas
![Page 20: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/20.jpg)
M.Sc. Márcio Palheta
20/98
Exercício 03: ListaProvasFragment
Classe filha de android.support.v4.app.Fragment
Novo pacote
Lista de atributos
Método que criaLista de Provas
Lista povoada
![Page 21: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/21.jpg)
M.Sc. Márcio Palheta
21/98
Exercício 03: ListaProvasFragment
![Page 22: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/22.jpg)
M.Sc. Márcio Palheta
22/98
Exercício 03: ListaProvasFragmentMétodo de criação
![Page 23: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/23.jpg)
M.Sc. Márcio Palheta
23/98
Exercício 03: ListaProvasFragmentMétodo de criação
![Page 24: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/24.jpg)
M.Sc. Márcio Palheta
24/98
Exercício 03: ListaProvasFragmentMétodo de criação
![Page 25: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/25.jpg)
M.Sc. Márcio Palheta
25/98
Exercício 03: ListaProvasFragmentMétodo de criação
![Page 26: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/26.jpg)
M.Sc. Márcio Palheta
26/98
Exercício 03: ListaProvasFragmentMétodo de criação
![Page 27: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/27.jpg)
M.Sc. Márcio Palheta
27/98
Exercício 03: ListaProvasFragmentMétodo de criação
![Page 28: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/28.jpg)
M.Sc. Márcio Palheta
28/98
Exercício 03: ListaProvasFragmentMétodo de criação
![Page 29: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/29.jpg)
M.Sc. Márcio Palheta
29/98
Exercício 04: provaslayout.xml
● Crie o layout da Activity que vai controlar os Fragments:
– res/layout/provaslayout.xml
![Page 30: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/30.jpg)
M.Sc. Márcio Palheta
30/98
Exercício 04: provaslayout.xml
● Crie o layout da Activity que vai controlar os Fragments:
– res/layout/provaslayout.xml
Componente ondeficará o Fragment
![Page 31: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/31.jpg)
M.Sc. Márcio Palheta
31/98
Exercício 05: Novo tipo de Activity
![Page 32: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/32.jpg)
M.Sc. Márcio Palheta
32/98
Exercício 05: Novo tipo de Activity
Classe filha deFragmentActivity
![Page 33: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/33.jpg)
M.Sc. Márcio Palheta
33/98
Exercício 05: Novo tipo de Activity
Classe filha deFragmentActivity
Composiçãoda Tela
![Page 34: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/34.jpg)
M.Sc. Márcio Palheta
34/98
Exercício 06: AndroidManifest.xml
● Declare a FragmentActivity no AndroidManifest:
![Page 35: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/35.jpg)
M.Sc. Márcio Palheta
35/98
Exercício 07: Chamar a nova tela
● Atualize o método de click no menu principal da classe ListaAlunosActivity:
![Page 36: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/36.jpg)
M.Sc. Márcio Palheta
36/98
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
![Page 37: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/37.jpg)
M.Sc. Márcio Palheta
37/98
Execute a App
![Page 38: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/38.jpg)
M.Sc. Márcio Palheta
38/98
Execute a App
![Page 39: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/39.jpg)
M.Sc. Márcio Palheta
39/98
Execute a App
![Page 40: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/40.jpg)
M.Sc. Márcio Palheta
40/98
Execute a App
![Page 41: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/41.jpg)
M.Sc. Márcio Palheta
41/98
Execute a App
![Page 42: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/42.jpg)
M.Sc. Márcio Palheta
42/98
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
![Page 43: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/43.jpg)
M.Sc. Márcio Palheta
43/98
Exercício 08: Arquivo de estilo
● Crie o arquivo: res/drawable-nodpi/border.xml
![Page 44: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/44.jpg)
M.Sc. Márcio Palheta
44/98
Exercício 08: Arquivo de estilo
● Crie o arquivo: res/drawable-nodpi/border.xml
![Page 45: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/45.jpg)
M.Sc. Márcio Palheta
45/98
Exercício 08: Arquivo de estilo
● Crie o arquivo: res/drawable-nodpi/border.xml
![Page 46: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/46.jpg)
M.Sc. Márcio Palheta
46/98
Exercício 08: Arquivo de estilo
● Crie o arquivo: res/drawable-nodpi/border.xml
![Page 47: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/47.jpg)
M.Sc. Márcio Palheta
47/98
Exercício 09: strings.xml
● Inclua novas Strings no arquivo: res/values/strings.xml
![Page 48: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/48.jpg)
M.Sc. Márcio Palheta
48/98
Exercício 10: Layout dos Detalhes
● Crie o arquivo: res/layout/provas_detalhes.xml
![Page 49: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/49.jpg)
M.Sc. Márcio Palheta
49/98
Exercício 10: Layout dos Detalhes
● Crie o arquivo: res/layout/provas_detalhes.xmlLayout em forma
de tabelas
![Page 50: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/50.jpg)
M.Sc. Márcio Palheta
50/98
Exercício 10: Layout dos Detalhes
● Crie o arquivo: res/layout/provas_detalhes.xmlLayout em forma
de tabelas
Arquivo com definições de
estilo
![Page 51: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/51.jpg)
M.Sc. Márcio Palheta
51/98
Exercício 10: Layout dos Detalhes
● Crie o arquivo: res/layout/provas_detalhes.xmlLayout em forma
de tabelas
Arquivo com definições de
estilo
Componentede texto
![Page 52: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/52.jpg)
M.Sc. Márcio Palheta
52/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (continuação)
![Page 53: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/53.jpg)
M.Sc. Márcio Palheta
53/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (continuação)Definição de Linha da Tabela
![Page 54: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/54.jpg)
M.Sc. Márcio Palheta
54/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (continuação)Definição de Linha da Tabela
PrimeiraColuna da Linha
![Page 55: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/55.jpg)
M.Sc. Márcio Palheta
55/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (continuação)Definição de Linha da Tabela
PrimeiraColuna da Linha
Segunda Coluna da Linha
![Page 56: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/56.jpg)
M.Sc. Márcio Palheta
56/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (final)
![Page 57: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/57.jpg)
M.Sc. Márcio Palheta
57/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (final)Nova linha da tabela
![Page 58: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/58.jpg)
M.Sc. Márcio Palheta
58/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (final)Nova linha da tabela
Colunas da linha
![Page 59: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/59.jpg)
M.Sc. Márcio Palheta
59/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (final)Nova linha da tabela
Colunas da linha
Lista de tópicosda prova
![Page 60: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/60.jpg)
M.Sc. Márcio Palheta
60/98
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
![Page 61: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/61.jpg)
M.Sc. Márcio Palheta
61/98
Exercício 11: DetalhesProvaFragment
● Classe de controle da tela de Detalhes da Prova
![Page 62: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/62.jpg)
M.Sc. Márcio Palheta
62/98
Exercício 11: DetalhesProvaFragment
● Classe de controle da tela de Detalhes da ProvaPacote da
classe
![Page 63: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/63.jpg)
M.Sc. Márcio Palheta
63/98
Exercício 11: DetalhesProvaFragment
● Classe de controle da tela de Detalhes da ProvaPacote da
classeClasse filha de
Fragment
![Page 64: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/64.jpg)
M.Sc. Márcio Palheta
64/98
Exercício 11: DetalhesProvaFragment
● Classe de controle da tela de Detalhes da ProvaPacote da
classeClasse filha de
Fragment
Inflando o layout deDetalhes da prova
![Page 65: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/65.jpg)
M.Sc. Márcio Palheta
65/98
Exercício 11: DetalhesProvaFragment
● Classe de controle da tela de Detalhes da ProvaPacote da
classeClasse filha de
Fragment
Inflando o layout deDetalhes da prova
Retorna a telade detalhes
![Page 66: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/66.jpg)
M.Sc. Márcio Palheta
66/98
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;
![Page 67: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/67.jpg)
M.Sc. Márcio Palheta
67/98
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.
![Page 68: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/68.jpg)
M.Sc. Márcio Palheta
68/98
Definição de arquivos booleanos
● Para tablet-landscape - /res/values-xlarge-land/bools.xml:
● Para o contrário - /res/values/bools.xml:
● Agora, podemos criar o layout da tela de provas para rodar em xlarge-land
<resources> <bool name="isTablet">true</bool></resources>
<resources> <bool name="isTablet">false</bool></resources>
![Page 69: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/69.jpg)
M.Sc. Márcio Palheta
69/98
Exercício 12: Layout para tablet
● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml
![Page 70: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/70.jpg)
M.Sc. Márcio Palheta
70/98
Exercício 12: Layout para tablet
● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml
Listagem de provas
![Page 71: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/71.jpg)
M.Sc. Márcio Palheta
71/98
Exercício 12: Layout para tablet
Listagem de provas
Precisa de 1 pedaço do layout
● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml
![Page 72: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/72.jpg)
M.Sc. Márcio Palheta
72/98
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
![Page 73: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/73.jpg)
M.Sc. Márcio Palheta
73/98
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
![Page 74: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/74.jpg)
M.Sc. Márcio Palheta
74/98
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()
![Page 75: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/75.jpg)
M.Sc. Márcio Palheta
75/98
Exercício 13: Alterar ProvasActivity
● No controlador ProvasActivity, inclua o método isTablet() para acessar o valor da propriedade isTablet, do arquivo bool.xml:
![Page 76: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/76.jpg)
M.Sc. Márcio Palheta
76/98
Exercício 14: carregar fragmentos
● Altere o método ProvasActivity.onCreate():
![Page 77: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/77.jpg)
M.Sc. Márcio Palheta
77/98
Exercício 14: carregar fragmentos
● Altere o método ProvasActivity.onCreate():
Carrega as telas de Listagem e Detalhes da prova
![Page 78: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/78.jpg)
M.Sc. Márcio Palheta
78/98
Exercício 14: carregar fragmentos
● Altere o método ProvasActivity.onCreate():
Carrega as telas de Listagem e Detalhes da prova
Carrega apenas aTela de Listagem
![Page 79: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/79.jpg)
M.Sc. Márcio Palheta
79/98
Rode a App e veja o resultado
![Page 80: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/80.jpg)
M.Sc. Márcio Palheta
80/98
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
![Page 81: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/81.jpg)
M.Sc. Márcio Palheta
81/98
Exercício 15: Alterar ProvasActivity
● Crie o método selecionarProva(Prova) em ProvasActivity
![Page 82: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/82.jpg)
M.Sc. Márcio Palheta
82/98
Exercício 15: Alterar ProvasActivity
● Crie o método selecionarProva(Prova) em ProvasActivityDefinição de parâmetros
![Page 83: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/83.jpg)
M.Sc. Márcio Palheta
83/98
Exercício 15: Alterar ProvasActivity
● Crie o método selecionarProva(Prova) em ProvasActivityDefinição de parâmetros
Criação do Fragment
![Page 84: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/84.jpg)
M.Sc. Márcio Palheta
84/98
Exercício 15: Alterar ProvasActivity
● Crie o método selecionarProva(Prova) em ProvasActivityDefinição de parâmetros
Criação do Fragment
Configuração da tela
![Page 85: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/85.jpg)
M.Sc. Márcio Palheta
85/98
Exercício 15: Alterar ProvasActivity
● Crie o método selecionarProva(Prova) em ProvasActivityDefinição de parâmetros
Criação do Fragment
Configuração da tela
Se não for xlarge-land,Não incrementa aPilha de execução
![Page 86: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/86.jpg)
M.Sc. Márcio Palheta
86/98
Exercício 16: Atualizar o fragment
● Altere o método ListaProvasFragment.onCreate()
![Page 87: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/87.jpg)
M.Sc. Márcio Palheta
87/98
Exercício 16: Atualizar o fragment
● Altere o método ListaProvasFragment.onCreate()
Delegar atividade paraActivity de controle
![Page 88: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/88.jpg)
M.Sc. Márcio Palheta
88/98
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
![Page 89: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/89.jpg)
M.Sc. Márcio Palheta
89/98
Exercício 17: Receber dados da prova
![Page 90: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/90.jpg)
M.Sc. Márcio Palheta
90/98
Exercício 17: Receber dados da prova
Lista deatributos
![Page 91: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/91.jpg)
M.Sc. Márcio Palheta
91/98
Exercício 17: Receber dados da prova
Lista deatributos Associa campos da
Tela a atributos
![Page 92: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/92.jpg)
M.Sc. Márcio Palheta
92/98
Exercício 17: Receber dados da prova
Lista deatributos Associa campos da
Tela a atributos
Carrega os dadosda Prova na tela
![Page 93: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/93.jpg)
M.Sc. Márcio Palheta
93/98
Exercício 17: Receber dados da prova
● Atualize o método DetalhesProvaFragment.onCreate()
![Page 94: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/94.jpg)
M.Sc. Márcio Palheta
94/98
Exercício 17: Receber dados da prova
● Atualize o método DetalhesProvaFragment.onCreate()
Receber dados da prova
![Page 95: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/95.jpg)
M.Sc. Márcio Palheta
95/98
Exercício 17: Receber dados da prova
● Atualize o método DetalhesProvaFragment.onCreate()
Receber dados da prova
Exibir dados da prova
![Page 96: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/96.jpg)
M.Sc. Márcio Palheta
96/98
Rode a App e selecione uma Prova
![Page 97: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/97.jpg)
M.Sc. Márcio Palheta
97/98
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
![Page 98: Capítulo 12 - Fragments](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a1ecd8b42ac1148b4864/html5/thumbnails/98.jpg)
Capítulo 12: Fragments