capítulo 12 - fragments
DESCRIPTION
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 FragmentsTRANSCRIPT
Capítulo 12: Fragments
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
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
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
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 ?
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
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
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
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
M.Sc. Márcio Palheta
10/98
Exercício 02: Crie a classe Prova.java
M.Sc. Márcio Palheta
11/98
Exercício 02: Crie a classe Prova.javaJavaBean que representa as
Provas agendadas
M.Sc. Márcio Palheta
12/98
Exercício 02: Crie a classe Prova.javaJavaBean que representa as
Provas agendadas
Lista deatributos
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
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
M.Sc. Márcio Palheta
15/98
Exercício 03: ListaProvasFragment
M.Sc. Márcio Palheta
16/98
Exercício 03: ListaProvasFragmentNovo pacote
M.Sc. Márcio Palheta
17/98
Exercício 03: ListaProvasFragment
Classe filha de android.support.v4.app.Fragment
Novo pacote
M.Sc. Márcio Palheta
18/98
Exercício 03: ListaProvasFragment
Classe filha de android.support.v4.app.Fragment
Novo pacote
Lista de atributos
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
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
M.Sc. Márcio Palheta
21/98
Exercício 03: ListaProvasFragment
M.Sc. Márcio Palheta
22/98
Exercício 03: ListaProvasFragmentMétodo de criação
M.Sc. Márcio Palheta
23/98
Exercício 03: ListaProvasFragmentMétodo de criação
M.Sc. Márcio Palheta
24/98
Exercício 03: ListaProvasFragmentMétodo de criação
M.Sc. Márcio Palheta
25/98
Exercício 03: ListaProvasFragmentMétodo de criação
M.Sc. Márcio Palheta
26/98
Exercício 03: ListaProvasFragmentMétodo de criação
M.Sc. Márcio Palheta
27/98
Exercício 03: ListaProvasFragmentMétodo de criação
M.Sc. Márcio Palheta
28/98
Exercício 03: ListaProvasFragmentMétodo de criação
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
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
M.Sc. Márcio Palheta
31/98
Exercício 05: Novo tipo de Activity
M.Sc. Márcio Palheta
32/98
Exercício 05: Novo tipo de Activity
Classe filha deFragmentActivity
M.Sc. Márcio Palheta
33/98
Exercício 05: Novo tipo de Activity
Classe filha deFragmentActivity
Composiçãoda Tela
M.Sc. Márcio Palheta
34/98
Exercício 06: AndroidManifest.xml
● Declare a FragmentActivity no AndroidManifest:
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:
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
M.Sc. Márcio Palheta
37/98
Execute a App
M.Sc. Márcio Palheta
38/98
Execute a App
M.Sc. Márcio Palheta
39/98
Execute a App
M.Sc. Márcio Palheta
40/98
Execute a App
M.Sc. Márcio Palheta
41/98
Execute a App
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
M.Sc. Márcio Palheta
43/98
Exercício 08: Arquivo de estilo
● Crie o arquivo: res/drawable-nodpi/border.xml
M.Sc. Márcio Palheta
44/98
Exercício 08: Arquivo de estilo
● Crie o arquivo: res/drawable-nodpi/border.xml
M.Sc. Márcio Palheta
45/98
Exercício 08: Arquivo de estilo
● Crie o arquivo: res/drawable-nodpi/border.xml
M.Sc. Márcio Palheta
46/98
Exercício 08: Arquivo de estilo
● Crie o arquivo: res/drawable-nodpi/border.xml
M.Sc. Márcio Palheta
47/98
Exercício 09: strings.xml
● Inclua novas Strings no arquivo: res/values/strings.xml
M.Sc. Márcio Palheta
48/98
Exercício 10: Layout dos Detalhes
● Crie o arquivo: res/layout/provas_detalhes.xml
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
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
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
M.Sc. Márcio Palheta
52/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (continuação)
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
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
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
M.Sc. Márcio Palheta
56/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (final)
M.Sc. Márcio Palheta
57/98
Exercício 10: Layout dos Detalhes
● res/layout/provas_detalhes.xml (final)Nova linha da tabela
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
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
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
M.Sc. Márcio Palheta
61/98
Exercício 11: DetalhesProvaFragment
● Classe de controle da tela de Detalhes da Prova
M.Sc. Márcio Palheta
62/98
Exercício 11: DetalhesProvaFragment
● Classe de controle da tela de Detalhes da ProvaPacote da
classe
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
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
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
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;
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.
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>
M.Sc. Márcio Palheta
69/98
Exercício 12: Layout para tablet
● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml
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
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
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
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
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()
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:
M.Sc. Márcio Palheta
76/98
Exercício 14: carregar fragmentos
● Altere o método ProvasActivity.onCreate():
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
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
M.Sc. Márcio Palheta
79/98
Rode a App e veja o resultado
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
M.Sc. Márcio Palheta
81/98
Exercício 15: Alterar ProvasActivity
● Crie o método selecionarProva(Prova) em ProvasActivity
M.Sc. Márcio Palheta
82/98
Exercício 15: Alterar ProvasActivity
● Crie o método selecionarProva(Prova) em ProvasActivityDefinição de parâmetros
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
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
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
M.Sc. Márcio Palheta
86/98
Exercício 16: Atualizar o fragment
● Altere o método ListaProvasFragment.onCreate()
M.Sc. Márcio Palheta
87/98
Exercício 16: Atualizar o fragment
● Altere o método ListaProvasFragment.onCreate()
Delegar atividade paraActivity de controle
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
M.Sc. Márcio Palheta
89/98
Exercício 17: Receber dados da prova
M.Sc. Márcio Palheta
90/98
Exercício 17: Receber dados da prova
Lista deatributos
M.Sc. Márcio Palheta
91/98
Exercício 17: Receber dados da prova
Lista deatributos Associa campos da
Tela a atributos
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
M.Sc. Márcio Palheta
93/98
Exercício 17: Receber dados da prova
● Atualize o método DetalhesProvaFragment.onCreate()
M.Sc. Márcio Palheta
94/98
Exercício 17: Receber dados da prova
● Atualize o método DetalhesProvaFragment.onCreate()
Receber dados da prova
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
M.Sc. Márcio Palheta
96/98
Rode a App e selecione uma Prova
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
Capítulo 12: Fragments