Motorola Mobility                                              Anna Schaller                                       Peter v...
MOTODEV App Summit 2011                                                        Page 2Fragments (fragmentos)• Permitem que ...
MOTODEV App Summit 2011                                                          Page 3Por que fragmentos?• Do ponto de vi...
MOTODEV App Summit 2011                                                          Page 4Chegando lá• Duas maneiras de se ch...
MOTODEV App Summit 2011                                                      Page 5Planeje seus layouts• Tamanho da tela  ...
MOTODEV App Summit 2011                                 Page 6Dois painéis (paisagem e retrato)                           ...
MOTODEV App Summit 2011                                                        Page 7Fragmentos: dois painéis             ...
MOTODEV App Summit 2011                                                              Page 8Trabalhando com fragmentos no A...
MOTODEV App Summit 2011                                                                      Page 9Anatomia de um projeto:...
MOTODEV App Summit 2011                                                            Page 10Código 3.0:main.java   • A ativi...
MOTODEV App Summit 2011                                 Page 11Código 3.0:Layout principal                           Paisa...
MOTODEV App Summit 2011                                    Page 12Código 3.0:Layout principal                           Re...
MOTODEV App Summit 2011                                   Page 13Código 3.0:Lista de fragmentos                           ...
MOTODEV App Summit 2011                          Page 14Código 3.0:Detalhe do fragmento                           Inflar e...
MOTODEV App Summit 2011                        Page 15Código 3.0:UI de fragmentos                           (fragmento 1) ...
MOTODEV App Summit 2011                                                   Page 16Fragmentos com uma UI• Definindo os recur...
MOTODEV App Summit 2011                                                          Page 17Fragmentos sem uma UI• Como os fra...
MOTODEV App Summit 2011                                                                           Page 18findFragmentByTag...
MOTODEV App Summit 2011                                                           Page 19Android Compatibility Package (Pa...
MOTODEV App Summit 2011                                      Page 20Painel duplo (Android 2.2 em paisagem)                ...
MOTODEV App Summit 2011                                     Page 21Painel único (Android 2.2 em retrato)                  ...
MOTODEV App Summit 2011                                                                Page 22Fragmentos: painel duplo    ...
MOTODEV App Summit 2011                                                               Page 23Fragmentos: painel único     ...
MOTODEV App Summit 2011                                                                     Page 24Modificações para a Com...
MOTODEV App Summit 2011                                                                               Page 25Anatomia de u...
MOTODEV App Summit 2011                                                   Page 26Usando o Android Compatibility Package• C...
MOTODEV App Summit 2011                        Page 27Apresentação do código                          © 2010 Motorola Mobi...
MOTODEV App Summit 2011                                                         Page 28A visão global                     ...
MOTODEV App Summit 2011                                                     Page 29Até agora! • Nós ainda não podemos colo...
MOTODEV App Summit 2011                                                           Page 30Anatomia de um aplicativo (antes ...
MOTODEV App Summit 2011                                                                      Page 31Indo para a próxima te...
MOTODEV App Summit 2011                                                         Page 32A Estratégia Fragment para ShowOneI...
MOTODEV App Summit 2011                                           Page 33Adicionará um Fragment para ShowOneItemActivity  ...
MOTODEV App Summit 2011                                                     Page 34Adicione um Fragment para ShowOneItemAc...
MOTODEV App Summit 2011                                                          Page 35O arquivo XML para um fragmento   ...
MOTODEV App Summit 2011                                               Page 36O código de um fragmento      pub ic cl foo e...
MOTODEV App Summit 2011                                               Page 37A história até agora  • Refatoramos nossa Act...
MOTODEV App Summit 2011                                                                 Page 38 Use o Alternative Resource...
MOTODEV App Summit 2011                                                  Page 39As listas podem ser um grande problema com...
MOTODEV App Summit 2011                                                         Page 40Um último conselho • Os fragmentos ...
MOTODEV App Summit 2011                                                                      Page 41Usando os Fragments: i...
MOTODEV App Summit 2011                                                                    Page 42Usando Fragments: exempl...
MOTODEV App Summit 2011                                                                 Page 43Obtenha mais informações: d...
Upcoming SlideShare
Loading in …5
×

Introdução a fragmentos

1,780 views
1,696 views

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,780
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
136
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Introdução a fragmentos

  1. 1. Motorola Mobility Anna Schaller Peter van der Linden Evangelistas da tecnologia Android Plataformas e serviços para desenvolvedores Brasil - #appsum11brIntrodução a fragmentos
  2. 2. MOTODEV App Summit 2011 Page 2Fragments (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. 3. MOTODEV App Summit 2011 Page 3Por 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. 4. MOTODEV App Summit 2011 Page 4Chegando 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. 5. MOTODEV App Summit 2011 Page 5Planeje 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. 6. MOTODEV App Summit 2011 Page 6Dois painéis (paisagem e retrato) © 2011 Motorola Mobility, Inc.
  7. 7. MOTODEV App Summit 2011 Page 7Fragmentos: 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. 8. MOTODEV App Summit 2011 Page 8Trabalhando com fragmentos no Android 3.01. 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 vida2. 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. 9. MOTODEV App Summit 2011 Page 9Anatomia 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. 10. MOTODEV App Summit 2011 Page 10Có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. 11. MOTODEV App Summit 2011 Page 11Código 3.0:Layout principal Paisagem lado a ladofragment1(lista)fragment2(detalhe) © 2011 Motorola Mobility, Inc.
  12. 12. MOTODEV App Summit 2011 Page 12Có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. 13. MOTODEV App Summit 2011 Page 13Có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. 14. MOTODEV App Summit 2011 Page 14Có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. 15. MOTODEV App Summit 2011 Page 15Código 3.0:UI de fragmentos (fragmento 1) Item de lista (fragmento 2) Framelayout com ImageView © 2011 Motorola Mobility, Inc.
  16. 16. MOTODEV App Summit 2011 Page 16Fragmentos 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. 17. MOTODEV App Summit 2011 Page 17Fragmentos 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. 18. MOTODEV App Summit 2011 Page 18findFragmentByTag() 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. 19. MOTODEV App Summit 2011 Page 19Android Compatibility Package (Pacote decompatibilidade 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. 20. MOTODEV App Summit 2011 Page 20Painel duplo (Android 2.2 em paisagem) © 2011 Motorola Mobility, Inc.
  21. 21. MOTODEV App Summit 2011 Page 21Painel único (Android 2.2 em retrato) © 2011 Motorola Mobility, Inc.
  22. 22. MOTODEV App Summit 2011 Page 22Fragmentos: 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. 23. MOTODEV App Summit 2011 Page 23Fragmentos: 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. 24. MOTODEV App Summit 2011 Page 24Modificaçõ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. 25. MOTODEV App Summit 2011 Page 25Anatomia 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. 26. MOTODEV App Summit 2011 Page 26Usando 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. 27. MOTODEV App Summit 2011 Page 27Apresentação do código © 2010 Motorola Mobility, Inc. © 2011 Motorola Mobility, Inc.
  28. 28. MOTODEV App Summit 2011 Page 28A 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. 29. MOTODEV App Summit 2011 Page 29Até 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. 30. MOTODEV App Summit 2011 Page 30Anatomia 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. 31. MOTODEV App Summit 2011 Page 31Indo 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. 32. MOTODEV App Summit 2011 Page 32A Estratégia Fragment para ShowOneItemActivity• Nós vamos mudar todo o código ShowOneItemActivity para umFragment• Esse Fragment será invocado por ShowOneItemActivity quando estiverem um dispositivo de tela pequena, normal ou grande• ... mas também pode ser incorporado no layout XML de alguma outraActivity, 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. 33. MOTODEV App Summit 2011 Page 33Adicionará 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. 34. MOTODEV App Summit 2011 Page 34Adicione 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. 35. MOTODEV App Summit 2011 Page 35O 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. 36. MOTODEV App Summit 2011 Page 36O 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. 37. MOTODEV App Summit 2011 Page 37A 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. 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 pequenasetContentView(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. 39. MOTODEV App Summit 2011 Page 39As listas podem ser um grande problema comessa 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. 40. MOTODEV App Summit 2011 Page 40Um ú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. 41. MOTODEV App Summit 2011 Page 41Usando 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. 42. MOTODEV App Summit 2011 Page 42Usando 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. 43. MOTODEV App Summit 2011 Page 43Obtenha 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.

×