O documento discute como utilizar Fragments no Android para criar layouts que se adaptam a diferentes telas. Fragments permitem dividir a interface em partes reutilizáveis e modulares, melhorando a experiência para tablets. Apresenta exemplos de como substituir Activities por Fragments para exibir conteúdo de forma otimizada em diferentes dispositivos.

1. Esquartejando sua Activity
com Fragments
@SuelenGC
www.suelengc.com.br

2. Quem sou eu...
Arquiteta de Software
@SuelenGC
www.suelengc.com.br
suelengcarvalho@gmail.com
2

3. 3

4. Smartphone
Seleciona um item
do menu e inicia a
Activity B
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Activity A contendo o menu Activity B contendo o conteúdo 4

5. O mesmo código executando em um Tablet...
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Activity A contendo o menu 5

6. Após seleciona um item inicia a Activity B
Activity B contendo o conteúdo 6

7. Tablets are not just big phones
7

8. O que esperamos é um layout pensado para Tablets
Seleciona um item
e atualiza Fragment B
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Activity A contendo Fragment A e Fragment B 8

9. Quanto maior o espaço,
+ coisas vão colocar!
9

10. Putz, mas eu
não manjo de
fragments :-(
10

11. O Fragment é muito mais do que apenas um
pedaço de tela.
Deve ser pensado como um COMPONENTE da
Activity MODULAR e REUTILIZÁVEL.
11

12. App da BMF Bovespa para Smartphone
12

13. App da BMF Bovespa para Tablet
13

14. App da BMF Bovespa para Tablet
Gráfico do Código e pontos dos índices e
índice escolhido Código e valor das ações
Código e
Descrição
dos índices Detalhes
do índice
escolhido
Exibição do vídeo
Notícias Lista de vídeos
escolhido
14

15. Algumas características técnicas...
SDK versão 3.0+ (Honeycomb)
Uma classe que herda de android.app.Fragment
Deve sempre estar contido em uma Activity
Possui seu próprio lifecycle e este é diretamente afetado pelo
lifecycle da Activity Host
15

16. Activity Lifecycle vs. Fragment Lifecycle
16

17. Vamos pensar em uma tela mais simples...
DevFest - Fragments
Texto 2
Texto 1
Texto 3
17

18. Código da Activity sem fragments
MainActivity.java
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
}
//Um monte de código que controla o comportamento da tela aqui
}
main_layout.xml
<LinearLayout ... >
<!-- Bloco 1 -->
<LinearLayout ... >
<TextView...
android:text="Texto 1" />
</LinearLayout>
<LinearLayout... >
<!-- Bloco 2 -->
<LinearLayout ... >
<TextView...
android:text="Texto 2" />
</LinearLayout>
<!-- Bloco 2 -->
<LinearLayout ... >
<TextView...
android:text="Texto 3" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
18

19. Você acha isso
bonito????
19

20. Código da Activity com fragments MainFragments.java
public class MainFragments extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_fragments);
}
}
main_fragments.xml
<LinearLayout ... >
<!-- Bloco 1 -->
<LinearLayout ... >
<fragment...
class="br.com.seu_pacote.Fragment1"
android:id=“@+id/frag1" />
</LinearLayout>
<LinearLayout... >
<!-- Bloco 2 -->
<LinearLayout ... >
<fragment...
class="br.com.seu_pacote.Fragment2"
android:id=“@+id/frag2" />
</LinearLayout>
<!-- Bloco 2 -->
<LinearLayout ... >
<fragment...
class="br.com.seu_pacote.Fragment3"
android:id=“@+id/frag3" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
20

21. Código do Fragment 1 Fragment1.java
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment1, null);
TextView text = (TextView) view.findViewById(R.id.text1);
text.setText("Fragment 1");
return view;
}
}
fragment1.xml
<LinearLayout ... >
<TextView...
android:id=“@+id/text1"
android:text="Fragment 1" />
</LinearLayout>
21

22. Código do Fragment 2 Fragment2.java
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment2, null);
TextView text = (TextView) view.findViewById(R.id.text2);
text.setText("Fragment 2");
return view;
}
}
fragment2.xml
<LinearLayout ... >
<TextView...
android:id="@+id/text2"
android:text="Fragment 2" />
</LinearLayout>
22

23. Código do Fragment 3 Fragment3.java
public class Fragment3 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment3, null);
TextView text = (TextView) view.findViewById(R.id.text3);
text.setText("Fragment 3");
return view;
}
}
fragment3.xml
<LinearLayout ... >
<TextView...
android:id=“@+id/text3"
android:text="Fragment 3" />
</LinearLayout>
23

24. Agora sim :)
24

25. Ao executar novamente nosso código
DevFest - Fragments
Fragment 2
Fragment 1
Fragment 3
25

26. Ok, mas como fazer essas
partes interagirem entre si?
26

27. Acessando um Fragment
Da mesma forma que podemos encontrar uma
view com o método findViewById(), podemos
buscar um fragment utilizando os métodos
findFragmentById() ou findFragmentByTag()
através do método getFragmentManager()
Activity
getFragmentManager().findFragmentById(“fragId”); Fragment
Fragment
27

28. Acessando um Fragment
MainFragments.java
public class MainFragments extends Activity {
...
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuItem m1 = menu.add(0, 0, 0, "Alterar texto do Fragment 2");
m1.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onMenuItemSelected(int featureId, MenuItem item) {
FragmentManager fm = getFragmentManager();
switch (item.getItemId()) {
case 0:
Fragment2 frag2 = (Fragment2) fm.findFragmentById(R.id.frag2);
frag2.setTexto("Texto atualizado, graças a um click");
}
return true;
}
}
Fragment2.java
public class Fragment2 extends Fragment {
...
public void setTexto(String mensagem) {
TextView text = (TextView) getView().findViewById(R.id.text2);
text.setText(mensagem);
}
}
28

29. Ao executar novamente nosso código
DevFest - Fragments Alterar texto do fragment 2
Texto atualizado, graças a um click
Fragment 2
Fragment 1
Fragment 3
29

30. Acessando a Activity Host
O método getActivity() retorna a Activity Host
corrente do Fragment.
getActivity().setTitle(“Novo título para a Activity”);
Fragment Activity
30

31. Acessando a Activity Host
Fragment2.java
public class Fragment2 extends Fragment {
...
public void setTexto(String mensagem) {
TextView text = (TextView) getView().findViewById(R.id.text2);
text.setText(mensagem);
//Alterando o texto da Activity Host
getActivity().setTitle("Mudando o texto a partir do Fragment");
}
}
31

32. Ao executar novamente nosso código
Mudando o texto a partir do Fragment Alterar texto do fragment 2
Texto atualizado, graças a um click
Fragment 2
Fragment 1
Fragment 3
32

33. Transações com Fragments
O método beginTransaction() possibilita
adicionar, remover ou substituir um
Fragment em runtime
33

34. Substituindo um Fragment MainFragments.java
public class MainFragments extends Activity {
...
@Override
public boolean onCreateOptionsMenu(Menu menu) {
...
MenuItem m2 = menu.add(0, 0, 0, "Substitui frag 1 p/ frag 3");
m2.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onMenuItemSelected(int featureId, MenuItem item) {
FragmentManager fm = getFragmentManager();
switch (item.getItemId()) {
...
case 1:
FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.replace(R.id.frame1, new Fragment3());
transaction.commit();
}
return true;
}
}
34

35. Substituindo um Fragment
main_fragments.xml
<LinearLayout ... >
<!-- Bloco 1 -->
<FrameLayout ...
android:id=“@+id/frame1" />
<LinearLayout... >
<!-- Bloco 2 -->
<LinearLayout ... >
<fragment...
class="br.com.seu_pacote.Fragment2"
android:id=“@+id/frag2" />
</LinearLayout>
<!-- Bloco 2 -->
<LinearLayout ... >
<fragment...
class="br.com.seu_pacote.Fragment3"
android:id=“@+id/frag3" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Trocar a tag fragment pela
tag FrameLayout
35

36. Ao executar novamente nosso código
DevFest - Fragments Alterar texto do fragment 2 Substitui frag 1 p/ frag 3
Fragment 2
3
Fragment 1
Fragment 3
36

37. 37

38. Sim :). Existe o Android Compatibility Package,
um jar que pode ser baixado pelo SDK Manager.38

39. Obrigada :)! Perguntas?
@SuelenGC
www.suelengc.com.br
39
https://github.com/SuelenGC

40. Referências
Livro Google Android para Tablets por Ricardo R. Lecheta
Novatec Editora. ISBN 9788575222928. 2012
Site oficial Developer Android – Fragments por Google
http://developer.android.com/guide/components/fragments.html
Site oficial Developer Android - Suportting Multiple Screens por Google
http://developer.android.com/guide/practices/screens_support.html
Site oficial Developer Android - Supporting Tablets and Handsets por Google
http://developer.android.com/guide/practices/tablets-and-handsets.html
Site oficial Developer Android - Activity`s Reference Library por Google
http://developer.android.com/reference/android/app/Activity.html
Blog Caelum – Layouts Mais Flexíveis com Android Fragments por Erich Egert
http://blog.caelum.com.br/layouts-mais-simples-com-android-fragments
C|Net - Nvidia CEO: Android tablets could outsell iPad in 3 years por Lance Whitney
http://reviews.cnet.com/8301-19736_7-20063893-251.html
Blog Toastdroid - Trabalhando com Fragments
http://toastdroid.wordpress.com/2012/08/03/trabalhando-com-fragments
(Na inclusão desta referência foi constatado que o blog foi deletado) 40