Introdução a fragmentos

Motorola Mobility

Anna Schaller
Peter van der Linden
Evangelistas da tecnologia Android
Plataformas e serviços para desenvolvedores

Brasil - #appsum11br

Introdução a fragmentos

MOTODEV App Summit 2011 Page 2

Fragments (fragmentos)

• Permitem que um aplicativo seja dividido em subcomponentes que
podem ser gerenciados individualmente e combinados de diferentes
maneiras, como criando uma UI com vários painéis.

© 2011 Motorola Mobility, Inc.


Por que fragmentos?

• Do ponto de vista do desenvolvedor, a maior transição entre os
smartphones e os tablets é o tamanho da tela.
• Os fragmentos criam uma ponte para os aplicativos que precisam ser
otimizadas para smartphones e tablets



Chegando lá
• Duas maneiras de se chegar lá
– Android 3.0 SDK
– Pacote Android Compatibility
• Número de layouts
– Suporte para dois ou mais painéis em todos os lugares
– Suporte para painel único em todos os lugares
• Ainda precisa de algum tipo de Activity(s)
• Criar um par de fragmentos
• Para cada fragmento visível adicionar uma UI
• Adicionar os fragmentos a uma Activity



Planeje seus layouts
• Tamanho da tela
– pequeno, normal, grande, extra grande

• Para cada tamanho de tela há duas orientações
– Paisagem
– Retrato

• Plano para diferentes configurações
– /res/layout-small-land e /res/layout-small-port
– /res/layout-normal-land e /res/layout-normal-port
– /res/layout-large-land e /res/layout-large-port
– /res/layout-xlarge-land e /res/layout-xlarge-land


Dois painéis (paisagem e retrato)



Fragmentos: dois painéis Atividade

setConten iew(R.
tV layout i
.ma n)

f
indFragmentById(R.i .Deta lF
d i ragment)

Fragmento
de Lista Fragmento



Trabalhando com fragmentos no Android 3.0
1. Crie uma nova classe para cada um de seus fragmentos
• importe andro d.app.Fragment;
i
– estenda Fragment ou ListFragment (em vez de Activity)
– adicione chamadas de ciclo de vida
2. Crie um novo arquivo resource.xml para cada fragmento
<ViewGroup> <UI elements> < ViewGroup>
/
3. Atualize main.xml com uma nova tag de fragmento para cada
fragmento
<fragment class="my.new. r
f agment. lass"
c
andro id=" @ +id f
id: / ragmentIdX">
4. Em MainApp.java (estende Activity)
• importe andro d.app.Fragment
i ;
• carregue o layout do aplicativo com setContentV ew(R.
i layout in)
.ma
• os itens da lista fragment1 se unem ao fragment2 com
f
indFragmentById(R.i .ragment
df IdX).


Anatomia de um projeto: somente dois painéis
(Android 3.0)

myFragmentProject
|-- AndroidManifest.xml
|-- /src
|------- /main.java // estender Activity
|------- /fragment1.java // estender Fragment, ListFragment, DialogFragment, etc
|--- /res
|------- /layout-land // layout paisagem
|----------- /main.xml // tags do w/fragment do arquivo de recursos do
aplicativo em orientação paisagem
|----------- /fragment1.xml // layout da UI do fragmento 1
|----------- /fragment2.xml // layout paisagem da UI do fragmento 2
|------- /layout-port // layout retrato
|----------- /main.xml // tags do w/fragment do arquivo de recursos do
aplicativo em orientação retrato
|----------- /fragment2.xml // layout retrato da UI do fragment 2
|------- /values-xlarge © 2011 Motorola Mobility, Inc.
|...


Código 3.0:
main.java

• A atividade principal aplica um layout da forma habitual durante
onCreate( )
• setConten ew (R.
tVi layout.main) carrega o arquivo de recurso que
contém o layout com as tags <fragment>. Os fragmentos são
instanciados assim que a atividade carrega o layout.


Código 3.0:
Layout principal

Paisagem
lado a lado

fragment1
(lista)

fragment2
(detalhe)



Código 3.0:
Layout principal

Retrato
parte superior até
a parte inferior

largura e altura da lista
precisam ser invertidos
quando muda a
orientação



Código 3.0:
Lista de fragmentos

nova chamada
de ciclo de vida
para a Activity criada

Configuração
do adaptador
de lista

criar retorno
de chamada
do item de lista
encontrar
fragmento
de detalhe e
atualizar imagem


Código 3.0:
Detalhe do fragmento

Inflar exibição
de detalhe e
carregar a primeira
imagem

substituir
imagem
com base na
posição da lista



Código 3.0:
UI de fragmentos

(fragmento 1)
Item de lista

(fragmento 2)
Framelayout
com
ImageView



Fragmentos com uma UI
• Definindo os recursos da UI
– Use as mesmas views e viewgroups como uma
Activity

listfragment.xml fragment.xml
<TextV iew> <FrameLayout>
<ImageView>
<LinearLayout>
<GridView>
[ ..
. ]
dialogfragment



Fragmentos sem uma UI

• Como os fragmentos podem ser compartilhados entre as Atividades, é
possível executar uma thread em um fragmento “worker” (sem UI) e
compartilhá-la entre as Activities
• Ainda assim é preciso definir o fragmento em uma classe separada
(subclasse Fragment)
– /src/WorkerFragment.java
• Não precisa de arquivo de recurso, já que não há UI
– res/layout/WorkerFragment.xml
• A tag <fragment> não é necessária no arquivo de layout da atividade,
porém não há mais um ID para localização do fragmento
• Sem um @+id, é preciso interagir com o fragmento por meio de uma
“tag”



findFragmentByTag()
l tatc lass W orkerFrag ment extends Fragment {
pub ic s i c
[ .. / fazer a
. ] / lgo em uma l
inha de plano de fundo
}

pub ic s i c
l tatc lass my OtherFragment ex tends Fragment {
@ Overide
r
pub i vo onActvt
l c id i i yCreated(Bund e savedIns
l tanceState) {
super.onActi i yCreat
vt ed(savedInstanceSta )
te ;

FragmentManager fm = getFrag mentManager( ;
)

/ Verf
/ iique se o workerf ragmentfo mant .
i ido
m W orkFragment = (WorkerFrag ment fm. indFrag mentByTag("work" ;
) f )

/ Se não fo (ou é o pr i o tempo em execução) temos que c i lo
/ i ime r , rá- .
i
f(m WorkFragment == nu l {
l)
m WorkFragment = new WorkerFrag ment( ;
)

/ In r com quem e es raba hando.
/ fo me le tát l
m WorkFragment. tTargetF
se ragmentth , 0 ;
( is )
fm.beginTransaction( .add(m W orkFrag ment "work") m mit )
) , .co (;
}
}
}


Android Compatibility Package (Pacote de
compatibilidade do Android)

• também conhecido como “Fragmentos para Todos”
• Honeycomb versus Pacote Android Compatibility
• Qual é a diferença?
• A Compatibility Library funciona com API de nível 4 ou superior
• Nova biblioteca que deve ser adicionada ao seu projeto
• Novo tipo de Activity
• Novas APIs



Painel duplo (Android 2.2 em paisagem)



Painel único (Android 2.2 em retrato)



Fragmentos: painel duplo FragmentActivity1

setConten iew(R.
tV layout i
.ma n)

f
indFragmentById(R.i .Deta lF
d i ragment)

Fragmento
de Lista Fragmento



Fragmentos: painel único
Fragmento Fragmento
Activity1 Activity2

setConten iew(R.
tV layout i
.ma n)
f
indViewById(R. .DetalF
id i ragment i NULL
)s

i ten .setC
n t lass(ge tv ty ) agment2.c
tAc i i ( ,Fr lass);
s tAc i i y in ent ;
tar t vt ( t )
Fragmento
de Lista Fragmento



Modificações para a Compatibility Library

• Atualizar recursos
– O layout retrato tem apenas a tag fragment1 (sem a tag fragment2)
• Atualizar código
• importe andro d.v4
i .suppor .
t*
– Defina a função booleana com base na orientação
– Se orientation == landscape o painel é duplo
• Exiba o fragment1 e fragment2
– Se orientation == portrait o painel é único
• Abra fragment2 em uma nova FragmentActivity por meio de um intent
– Chame getSupportFragmentManager() em vez de getFragmentManager()



Anatomia de um projeto: painel duplo + painel único
(pacote Android Compatibility)
myFragmentProject
|-- AndroidManifest.xml
|-- /src
|------- /main.java // estender FragmentActivity
|------- /fragment2Main.java // estender FragmentActivity
|--- /res
|------- /layout-land // layout paisagem (orientação natural do tablet)
|----------- /main.xml // arquivo de recurso do tablet ou do aplicativo em
orientação paisagem (duplo)
|----------- /fragment1.xml // layout da UI do fragmento 1
|----------- /fragment2.xml // layout da UI do fragment 2
|------- /layout-port // layout retrato (orientação natural do smartphone)
|----------- /main.xml/ // arquivo de recurso do phone ou do aplicativo em
orientação retrato (único)
|----------- /fragment1.xml
|------- /values-xlarge
|... © 2011 Motorola Mobility, Inc.


Usando o Android Compatibility Package

• Configurando o ambiente
– Baixe o "Android Compatibility Package"
utilizando o Android SDK & AVD Manager.
No diretório de instalação do SDK, você
encontrará
extras/android/compatibility/v4/android-
support-v4.jar.
– Crie um novo projeto Android no nível de API
selecionado (4 a 10).
– Adicione o android-support-v4.jar ao diretório
/libs do seu projeto.
– Se você é um usuário do Studio ou Eclipse,
o adicione também ao seu build path para o
projeto (Project (Projeto)->Properties
(Propriedades)->Java Build Path (Caminho
de Construção Java)->Libraries (Bibliotecas)-
>Add JAR (Incluir JAR).


Apresentação do código



A visão global

O celular precisa de duas telas
PRESSIONE

À esquerda está uma lista,
À direita estão os detalhes do ListItem
selecionado
O tablet tem espaço para duas telas

Mas não temos uma maneira
de colocar duas Activities em uma tela...



Até agora!
• Nós ainda não podemos colocar duas Activities na tela

• Mas podemos fazer algo quase tão bom quanto

• Nós podemos colocar a maior parte de nossa Activity em
um Fragment

• Fragments podem estar em um layout sozinhos, com Views
ou outros Fragments. O Framework já nos oferece recursos
de layout alternativos para telas de diferentes tamanhos.
Assim, basta criar um novo layout para dispositivos extra
grandes.

• Voilà: tornar apps convenientes para o tablet é somente
"refatoração" © 2011 Motorola Mobility, Inc.


Anatomia de um aplicativo (antes dos fragmentos)

PRESSIONE

MainActivity.java ShowOneItemActivity.java
setContentView(
r.layout.showoneitem);

main.xml res/layout/showoneitem.xml
<LinearLayout …

<ScrollView …



Indo para a próxima tela

PRESSIONE

MainActivity.java ShowOneItemActivity.java
i = new Intent( Ctxt, onCreate(…) {
ShowOneItemActivity.class);
startActivity( i );
}

AndroidManifest.xml
<activity android:name=".MainActivity"/>
<activity android:name=”.ShowOneItemActivity"/>
</application>



A Estratégia Fragment para ShowOneItemActivity

• Nós vamos mudar todo o código ShowOneItemActivity para um
Fragment

• Esse Fragment será invocado por ShowOneItemActivity quando estiver
em um dispositivo de tela pequena, normal ou grande

• ... mas também pode ser incorporado no layout XML de alguma outra
Activity, quando estiver em uma tela extra grande

• Portanto, há duas maneiras de entrar no ShowOneItemFragment
A partir da Activity que doou todo o seu código para o Fragment
A partir de um layout XML , que pertence a alguma outra Activity



Adicionará um Fragment para ShowOneItemActivity

Qual é a sua aparência ShowOneItemActivity.java
agora

Encaixe um Fragment
aqui

res/layout/showoneitem.xml
<LinearLayout …

<ScrollView …



Adicione um Fragment para ShowOneItemActivity
setContentView(
ShowOneItemActivity.java r.layout.showoneitem_actfrag);

res/layout/showoneitem_actfrag.xml
<fragment
class=”ShowOneItemFragment”
android:layout_width=…

… extends Fragment {
ShowOneItemFragment.java public View onCreateView(
LayoutInflater i,
ViewGroup c, Bundle b) {
return i.inflate(
R.layout.showoneitem, c);

<LinearLayout …
showoneitem.xml
<ScrollView … © 2011 Motorola Mobility, Inc.


O arquivo XML para um fragmento
<?xml vers ion="1 encod ng="u f "?>
.0" i t -8
<fragment
xmlns :androi d=
"h t /
t p: /schemas.andro .
id com/apk res
/ /android"
andro :name="com.example
id .Show OneItemFragment"
andro :
id layout_width="match_parent "
andro :
id layout_he ght="wrap_conten "
i t
andro :
id id="@ +id/showone temf agment">
i r
</ ragment>
f

• Dimensionamento comum de layout para informar a
altura e largura

• Pontos de XML para o classfile do Fragment

• Deve fornecer a ele um id ou tag © 2011 Motorola Mobility, Inc.


O código de um fragmento
pub ic cl foo ex
l ass tends Fragment {
pub i vo onCreate(
l c id )
pub i V
l c iew onCreateView( .)
..
pub i vo onPause(
l c id )
..
.
}

• Quando você muda o código da Activity, ele mapeia
próximo aos mesmos eventos LifeCycle
• Esses três métodos podem ser o suficiente. Salve o
estado em OnPause
• onCreateView() infla o XML, retorna a View raiz do
Fragment



A história até agora
• Refatoramos nossa Activity em uma Activity e um
fragment

• Todo o código de Activity mudou para o Fragment. A
Activity agora é apenas uma cobertura fina para o
Fragment

• Podemos entrar no código como uma Activity ou um
Fragment

• Como escolher adequadamente?



Use o Alternative Resource (Recurso alternativo)
para obter o layout correto!

res/layout/main.xml

XML para layout da tela
PRESSIONE
vermelha pequena

setContentView(R.layout.main)

res/layout-xlarge/main.xml
<fragment class= “a.b.c.d”

<fragment class=“w.x.y.z”

Deixe que o “frame work”! © 2011 Motorola Mobility, Inc.


As listas podem ser um grande problema com
essa abordagem
• Você não tem um arquivo XML para a lista como um
todo

• Você só tem um arquivo XML para uma entrada na lista

• O setListAdapter faz a mágica de distribuir a ListView
na ListActivity

• Mas você precisa de arquivos XML para chegar aos
fragments a partir de Activities

• Solução? ListFragment! Similar ao ListActivity


Um último conselho
• Os fragmentos são legais e você vai querer usá-los para que seus
apps se adequem ao tablet

• Tenha muito cuidado com classes consistentes e nomes de arquivo
XML!

• Alguns métodos de substituição exigem uma chamada para a
superclasse, por exemplo, onCreate() ao usar uma FragmentActivity

• Dentro de um Fragment, getActivity() é muito útil

• Em uma Activity, estender FragmentActivity para obter operações
de Fragment, como getSupportFragmentManager();



Usando os Fragments: informações
• Informações de instruções no 3.0 Developer Guide (Guia do
desenvolvedor do 3.0) em Fragments
• Consulte a 3.0 Reference para APIs
– android.app.Fragment
– android.app i tFragment
.L s
• Exibe uma lista semelhante à ListActivity
– android.app i logFragment
.D a
• Exibe um diálogo flutuante
– android.app.FragmentManager
• Interface para interagir com o fragment (findFragmentById)
– android.app.FragmentTransac ion
t
• APIs para operações de fragment (ad ionar remover substtu r ocu ta ,most )
ic , , i i, l r rar



Usando Fragments: exemplos
• Aplicativo Honeycomb Gallery para fragments do Android 3.0
• Na pasta de extras do Android Compatibility Package
– /android-sdk/extras/android/compatibility/v4/samples/ApiDemos/src
/com/example/android/apis/app/
– Procure o Fragment<>.java para versão HC
– Fragment<>Support*.java para código do pacote Android Compatibility
• Publicações do blog de Reto Meier
– http://blog.radioactiveyak.com/2011/02/android-app-surgery-earthquake-
redux.html
– http://blog.radioactiveyak.com/2011/02/strategies-for-honeycomb-and-
backwards.html
• Publicações do blog de Dianne Hackborn
– http://android-developers.blogspot.com/2011/02/android-30-fragments-
api.html (The Android 3.0 Fragments API) © 2011 Motorola Mobility, Inc.


Obtenha mais informações: developer.motorola.com

• Ferramentas
– MOTODEV Studio: IDE baseada no Eclipse com recursos adicionais
(localização de String, gerente de banco de dados)
– App Validator: ferramenta on-line para pré-testes de aplicativos Android
para compatibilidade entre dispositivos
• Artigos técnicos
– Dicas de programação para o Motorola XOOM
– Entendendo a compactação de textura
• Especificações do produto
– http://developer.motorola.com/products/xoom/
• Fóruns de discussão


Introdução a fragmentos

Mais conteúdo relacionado

Semelhante a Introdução a fragmentos (20)

Mais de Motorola Mobility - MOTODEV (20)

Último (8)

Introdução a fragmentos