Contenu connexe Similaire à Introdução a fragmentos (20) Plus de Motorola Mobility - MOTODEV (20) Introdução a fragmentos1. Motorola Mobility
Anna Schaller
Peter van der Linden
Evangelistas da tecnologia Android
Plataformas e serviços para desenvolvedores
Brasil - #appsum11br
Introdução a fragmentos
2. 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.
3. MOTODEV App Summit 2011 Page 3
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
© 2011 Motorola Mobility, Inc.
4. MOTODEV App Summit 2011 Page 4
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
© 2011 Motorola Mobility, Inc.
5. MOTODEV App Summit 2011 Page 5
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
© 2011 Motorola Mobility, Inc.
6. MOTODEV App Summit 2011 Page 6
Dois painéis (paisagem e retrato)
© 2011 Motorola Mobility, Inc.
7. MOTODEV App Summit 2011 Page 7
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
© 2011 Motorola Mobility, Inc.
8. MOTODEV App Summit 2011 Page 8
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
© 2011 Motorola Mobility, Inc.
f
indFragmentById(R.i .ragment
df IdX).
9. MOTODEV App Summit 2011 Page 9
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
|------- /fragment2.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.
|...
10. MOTODEV App Summit 2011 Page 10
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.
© 2011 Motorola Mobility, Inc.
11. MOTODEV App Summit 2011 Page 11
Código 3.0:
Layout principal
Paisagem
lado a lado
fragment1
(lista)
fragment2
(detalhe)
© 2011 Motorola Mobility, Inc.
12. MOTODEV App Summit 2011 Page 12
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
© 2011 Motorola Mobility, Inc.
13. MOTODEV App Summit 2011 Page 13
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
© 2011 Motorola Mobility, Inc.
14. MOTODEV App Summit 2011 Page 14
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
© 2011 Motorola Mobility, Inc.
15. MOTODEV App Summit 2011 Page 15
Código 3.0:
UI de fragmentos
(fragmento 1)
Item de lista
(fragmento 2)
Framelayout
com
ImageView
© 2011 Motorola Mobility, Inc.
16. MOTODEV App Summit 2011 Page 16
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
© 2011 Motorola Mobility, Inc.
17. MOTODEV App Summit 2011 Page 17
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”
© 2011 Motorola Mobility, Inc.
18. MOTODEV App Summit 2011 Page 18
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 (;
}
}
© 2011 Motorola Mobility, Inc.
}
19. MOTODEV App Summit 2011 Page 19
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
© 2011 Motorola Mobility, Inc.
20. MOTODEV App Summit 2011 Page 20
Painel duplo (Android 2.2 em paisagem)
© 2011 Motorola Mobility, Inc.
21. MOTODEV App Summit 2011 Page 21
Painel único (Android 2.2 em retrato)
© 2011 Motorola Mobility, Inc.
22. MOTODEV App Summit 2011 Page 22
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
© 2011 Motorola Mobility, Inc.
23. MOTODEV App Summit 2011 Page 23
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
© 2011 Motorola Mobility, Inc.
24. MOTODEV App Summit 2011 Page 24
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()
© 2011 Motorola Mobility, Inc.
25. MOTODEV App Summit 2011 Page 25
Anatomia de um projeto: painel duplo + painel único
(pacote Android Compatibility)
myFragmentProject
|-- AndroidManifest.xml
|-- /src
|------- /main.java // estender FragmentActivity
|------- /fragment1.java // estender Fragment, ListFragment, DialogFragment, etc
|------- /fragment2.java // estender Fragment, ListFragment, DialogFragment, etc
|------- /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.
26. MOTODEV App Summit 2011 Page 26
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).
© 2011 Motorola Mobility, Inc.
27. MOTODEV App Summit 2011 Page 27
Apresentação do código
© 2010 Motorola Mobility, Inc.
© 2011 Motorola Mobility, Inc.
28. MOTODEV App Summit 2011 Page 28
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...
© 2011 Motorola Mobility, Inc.
29. MOTODEV App Summit 2011 Page 29
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.
30. MOTODEV App Summit 2011 Page 30
Anatomia de um aplicativo (antes dos fragmentos)
PRESSIONE
MainActivity.java ShowOneItemActivity.java
setContentView(
r.layout.showoneitem);
main.xml res/layout/showoneitem.xml
<LinearLayout …
<ScrollView …
© 2011 Motorola Mobility, Inc.
31. MOTODEV App Summit 2011 Page 31
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>
© 2011 Motorola Mobility, Inc.
32. MOTODEV App Summit 2011 Page 32
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
© 2011 Motorola Mobility, Inc.
33. MOTODEV App Summit 2011 Page 33
Adicionará um Fragment para ShowOneItemActivity
Qual é a sua aparência ShowOneItemActivity.java
agora
Encaixe um Fragment
aqui
res/layout/showoneitem.xml
<LinearLayout …
<ScrollView …
© 2011 Motorola Mobility, Inc.
34. MOTODEV App Summit 2011 Page 34
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.
35. MOTODEV App Summit 2011 Page 35
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.
36. MOTODEV App Summit 2011 Page 36
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
© 2011 Motorola Mobility, Inc.
37. MOTODEV App Summit 2011 Page 37
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?
© 2011 Motorola Mobility, Inc.
38. MOTODEV App Summit 2011 Page 38
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.
39. MOTODEV App Summit 2011 Page 39
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
© 2011 Motorola Mobility, Inc.
40. MOTODEV App Summit 2011 Page 40
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();
© 2011 Motorola Mobility, Inc.
41. MOTODEV App Summit 2011 Page 41
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
© 2011 Motorola Mobility, Inc.
42. MOTODEV App Summit 2011 Page 42
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.
43. MOTODEV App Summit 2011 Page 43
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
© 2011 Motorola Mobility, Inc.