Lista de provas com fragments

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

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

3/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

4/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 ?

5/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


6/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


7/98

Exercício 01: Listagem de provas
●

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


8/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


9/98

Exercício 02: Crie a classe Prova.java


10/98

JavaBean que
representa as
Provas agendadas


11/98

JavaBean que
representa as
Provas agendadas

Lista de
atributos


12/98

JavaBean que
representa as
Provas agendadas

Lista de
atributos
Método construtor


13/98

JavaBean que
representa as
Provas agendadas

Lista de
atributos
Método construtor

Sobrescrita
de método

14/98

Exercício 03: ListaProvasFragment


15/98

Novo pacote


16/98

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


17/98

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

Lista de atributos


18/98

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

Lista de atributos

Método que cria
Lista de Provas


19/98

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

Lista de atributos

Método que cria
Lista de Provas

Lista povoada


20/98



21/98

Método de criação



22/98




23/98




24/98




25/98




26/98




27/98




28/98

Exercício 04: provaslayout.xml
●

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

res/layout/provaslayout.xml


29/98

Exercício 04: provaslayout.xml
●

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

res/layout/provaslayout.xml
Componente onde
ficará o Fragment


30/98

Exercício 05: Novo tipo de Activity


31/98

Classe filha de
FragmentActivity


32/98

Classe filha de
FragmentActivity

Composição
da Tela


33/98

Exercício 06: AndroidManifest.xml
●

Declare a FragmentActivity no AndroidManifest:


34/98

Exercício 07: Chamar a nova tela
●

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


35/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


36/98

Execute a App


37/98

Execute a App


38/98

Execute a App


39/98

Execute a App


40/98

Execute a App


41/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


42/98

Exercício 08: Arquivo de estilo
●

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


43/98

●



44/98

●



45/98

●



46/98

Exercício 09: strings.xml
●

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


47/98

Exercício 10: Layout dos Detalhes
●

Crie o arquivo: res/layout/provas_detalhes.xml


48/98

●

Crie o arquivo:

Layout em forma
res/layout/provas_detalhes.xml
de tabelas


49/98

●

Crie o arquivo:

Layout em forma
de tabelas
Arquivo com
definições de
estilo


50/98

●

Crie o arquivo:

Layout em forma
de tabelas
Arquivo com
definições de
estilo

Componente
de texto


51/98

●

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


52/98

●

Definição de
Linha da Tabela


53/98

●

Definição de
Linha da Tabela

Primeira
Coluna da Linha


54/98

●

Definição de
Linha da Tabela

Primeira
Coluna da Linha
Segunda
Coluna da Linha


55/98

●

res/layout/provas_detalhes.xml (final)


56/98

●

Nova linha
da tabela

(final)


57/98

●

Nova linha
da tabela

(final)
Colunas da linha


58/98

●

Nova linha
da tabela

(final)
Colunas da linha

Lista de tópicos
da prova


59/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


60/98

Exercício 11: DetalhesProvaFragment
●

Classe de controle da tela de Detalhes da Prova


61/98

●

Classe de controle da tela de Detalhes da

Pacote da
Prova classe


62/98

●

Classe filha de

Pacote da
Prova classe

Fragment


63/98

●

Classe filha de

Pacote da
Prova classe

Fragment

Inflando o layout de
Detalhes da prova


64/98

●

Classe filha de

Pacote da
Prova classe

Fragment

Inflando o layout de
Detalhes da prova

Retorna a tela
de detalhes

65/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;


66/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.

67/98

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


68/98

Exercício 12: Layout para tablet
●

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


69/98

●


Listagem de provas


70/98

●


Listagem de provas
Precisa de 1
pedaço do layout


71/98

●


Listagem de provas
Precisa de 1
pedaço do layout
Detalhes da provas


72/98

●


Listagem de provas
Precisa de 1
pedaço do layout
Detalhes da provas
Precisa de 2
pedaços do layout


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


74/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:


75/98

Exercício 14: carregar fragmentos
●

Altere o método ProvasActivity.onCreate():


76/98

●


Carrega as telas de Listagem
e Detalhes da prova


77/98

●


Carrega as telas de Listagem
e Detalhes da prova

Carrega apenas a
Tela de Listagem


78/98

Rode a App e veja o resultado


79/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

80/98

●

Crie o método selecionarProva(Prova) em ProvasActivity


81/98

●

Definição de parâmetros



82/98

●



Criação do Fragment


83/98

●




Configuração da tela


84/98

●




Configuração da tela
Se não for xlarge-land,
Não incrementa a
Pilha de execução


85/98

Exercício 16: Atualizar o fragment
●

Altere o método ListaProvasFragment.onCreate()


86/98

Exercício 16: Atualizar o fragment
●

Altere o método ListaProvasFragment.onCreate()

Delegar atividade para
Activity de controle


87/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

88/98

Exercício 17: Receber dados da prova


89/98

Lista de
atributos


90/98

Lista de
atributos

Associa campos da
Tela a atributos


91/98

Lista de
atributos

Associa campos da
Tela a atributos

Carrega os dados
da Prova na tela


92/98

●

Atualize o método DetalhesProvaFragment.onCreate()


93/98

●


Receber dados da prova


94/98

●


Receber dados da prova

Exibir dados da prova


95/98

Rode a App e selecione uma Prova


96/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


97/98

Lista de provas com fragments

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (6)

Semelhante a Lista de provas com fragments

Semelhante a Lista de provas com fragments (20)

Último

Último (20)

Lista de provas com fragments