Capítulo 12 - Fragments

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

● [email protected]

● sites.google.com/site/marciopalheta

mailto:[email protected]


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


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


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 ?


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


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


8/98

Exercício 01: Listagem de provas

● Crie o arquivo de layout da nossa tela de listagem de provas: /res/layout/listaprovaslayout.xml


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


10/98

Exercício 02: Crie a classe Prova.java


11/98

Exercício 02: Crie a classe Prova.javaJavaBean que representa as

Provas agendadas


12/98


Provas agendadas

Lista deatributos


13/98


Provas agendadas

Método construtor

Lista deatributos


14/98


Provas agendadas

Método construtor

Lista deatributos

Sobrescritade método


15/98

Exercício 03: ListaProvasFragment


16/98

Exercício 03: ListaProvasFragmentNovo pacote


17/98


Classe filha de android.support.v4.app.Fragment

Novo pacote


18/98



Novo pacote

Lista de atributos


19/98



Novo pacote

Lista de atributos

Método que criaLista de Provas


20/98



Novo pacote

Lista de atributos

Método que criaLista de Provas

Lista povoada


21/98



22/98

Exercício 03: ListaProvasFragmentMétodo de criação


23/98



24/98



25/98



26/98



27/98



28/98



29/98

Exercício 04: provaslayout.xml

● Crie o layout da Activity que vai controlar os Fragments:

– res/layout/provaslayout.xml


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


31/98

Exercício 05: Novo tipo de Activity


32/98


Classe filha deFragmentActivity


33/98


Classe filha deFragmentActivity

Composiçãoda Tela


34/98

Exercício 06: AndroidManifest.xml

● Declare a FragmentActivity no AndroidManifest:


35/98

Exercício 07: Chamar a nova tela

● Atualize o método de click no menu principal da classe ListaAlunosActivity:


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


37/98

Execute a App


38/98

Execute a App


39/98

Execute a App


40/98

Execute a App


41/98

Execute a App


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


43/98

Exercício 08: Arquivo de estilo

● Crie o arquivo: res/drawable-nodpi/border.xml


44/98




45/98




46/98




47/98

Exercício 09: strings.xml

● Inclua novas Strings no arquivo: res/values/strings.xml


48/98

Exercício 10: Layout dos Detalhes

● Crie o arquivo: res/layout/provas_detalhes.xml


49/98


● Crie o arquivo: res/layout/provas_detalhes.xmlLayout em forma

de tabelas


50/98



de tabelas

Arquivo com definições de

estilo


51/98



de tabelas

Arquivo com definições de

estilo

Componentede texto


52/98


● res/layout/provas_detalhes.xml (continuação)


53/98


● res/layout/provas_detalhes.xml (continuação)Definição de Linha da Tabela


54/98



PrimeiraColuna da Linha


55/98



PrimeiraColuna da Linha

Segunda Coluna da Linha


56/98


● res/layout/provas_detalhes.xml (final)


57/98


● res/layout/provas_detalhes.xml (final)Nova linha da tabela


58/98



Colunas da linha


59/98



Colunas da linha

Lista de tópicosda prova


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


61/98

Exercício 11: DetalhesProvaFragment

● Classe de controle da tela de Detalhes da Prova


62/98


● Classe de controle da tela de Detalhes da ProvaPacote da

classe


63/98



classeClasse filha de

Fragment


64/98




Fragment

Inflando o layout deDetalhes da prova


65/98




Fragment

Inflando o layout deDetalhes da prova

Retorna a telade detalhes


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;


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.


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>


69/98

Exercício 12: Layout para tablet

● Crie o arquivo: res/layout-xlarge-land/provaslayout.xml


70/98



Listagem de provas


71/98


Listagem de provas

Precisa de 1 pedaço do layout



72/98



Listagem de provas


Detalhes da provas


73/98



Listagem de provas


Detalhes da provas

Precisa de 2 pedaços do layout


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()


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:


76/98

Exercício 14: carregar fragmentos

● Altere o método ProvasActivity.onCreate():


77/98



Carrega as telas de Listagem e Detalhes da prova


78/98



Carrega as telas de Listagem e Detalhes da prova

Carrega apenas aTela de Listagem


79/98

Rode a App e veja o resultado


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


81/98


● Crie o método selecionarProva(Prova) em ProvasActivity


82/98


● Crie o método selecionarProva(Prova) em ProvasActivityDefinição de parâmetros


83/98



Criação do Fragment


84/98




Configuração da tela


85/98




Configuração da tela

Se não for xlarge-land,Não incrementa aPilha de execução


86/98

Exercício 16: Atualizar o fragment

● Altere o método ListaProvasFragment.onCreate()


87/98

Exercício 16: Atualizar o fragment

● Altere o método ListaProvasFragment.onCreate()

Delegar atividade paraActivity de controle


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


89/98

Exercício 17: Receber dados da prova


90/98


Lista deatributos


91/98


Lista deatributos Associa campos da

Tela a atributos


92/98


Lista deatributos Associa campos da

Tela a atributos

Carrega os dadosda Prova na tela


93/98


● Atualize o método DetalhesProvaFragment.onCreate()


94/98



Receber dados da prova


95/98



Receber dados da prova

Exibir dados da prova


96/98

Rode a App e selecione uma Prova


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

http://www.caelum.com.br/

https://github.com/marciopalheta/cursosandroid

Capítulo 12: Fragments

Education

Capítulo 12 - Fragments