devfest 2012 - esquartejando sua activity com fragments

Esquartejando sua Activity com Fragments

@SuelenGC www.suelengc.com.br

2

Quem sou eu...

Arquiteta de Software

@SuelenGC www.suelengc.com.br [email protected]

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Smartphone

Activity A contendo o menu Activity B contendo o conteúdo

Seleciona um item do menu e inicia a Activity B

4

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

Activity B contendo o conteúdo 6

Após seleciona um item inicia a Activity B

Tablets are not just big phones

7

O que esperamos é um layout pensado para Tablets

Activity A contendo Fragment A e Fragment B

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Seleciona um item e atualiza Fragment B

8

9

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

10

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

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.

12

App da BMF Bovespa para Smartphone

13

App da BMF Bovespa para Tablet

14

App da BMF Bovespa para Tablet

Código e pontos dos índices e Código e valor das ações

Notícias Lista de vídeos

Código e Descrição dos índices Detalhes

do índice escolhido

Gráfico do índice escolhido

Exibição do vídeo escolhido

15

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

Algumas características técnicas...

16

Activity Lifecycle vs. Fragment Lifecycle

17

Texto 1

Texto 2

Texto 3

Vamos pensar em uma tela mais simples...

DevFest - Fragments

18

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

}

<LinearLayout ... >  <LinearLayout ... >

<TextView... android:text="Texto 1" />

</LinearLayout> <LinearLayout... >

 <LinearLayout ... >


</LinearLayout>  <LinearLayout ... >


</LinearLayout> </LinearLayout>

</LinearLayout>

main_layout.xml

MainActivity.java

Código da Activity sem fragments

19

Você acha isso bonito????

<LinearLayout ... >  <LinearLayout ... >

<fragment... class="br.com.seu_pacote.Fragment1" android:id=“@+id/frag1" />

</LinearLayout> <LinearLayout... >

 <LinearLayout ... >





</LinearLayout>

20

Código da Activity com fragments public class MainFragments extends Activity {

@Override public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); setContentView(R.layout.main_fragments);

} }

MainFragments.java

main_fragments.xml

21

Código do Fragment 1 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.java

<LinearLayout ... > <TextView...

android:id=“@+id/text1" android:text="Fragment 1" />

</LinearLayout>

fragment1.xml

22




} }

Fragment2.java


android:id="@+id/text2" android:text="Fragment 2" />

</LinearLayout>

fragment2.xml

23




} }

Fragment3.java


android:id=“@+id/text3" android:text="Fragment 3" />

</LinearLayout>

fragment3.xml

24

Agora sim :)

25

Ao executar novamente nosso código

Fragment 1

Fragment 2

Fragment 3

DevFest - Fragments

26

Ok, mas como fazer essas partes interagirem entre si?

27

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

Acessando um Fragment

Activity

Fragment getFragmentManager().findFragmentById(“fragId”);

Fragment

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;

} }

public class Fragment2 extends Fragment { ... public void setTexto(String mensagem) {

TextView text = (TextView) getView().findViewById(R.id.text2); text.setText(mensagem);

} }

Fragment2.java

29

Fragment 1

Fragment 2

Fragment 3


DevFest - Fragments Alterar texto do fragment 2

Texto atualizado, graças a um click

30

O método getActivity() retorna a Activity Host corrente do Fragment.

Acessando a Activity Host

Activity getActivity().setTitle(“Novo título para a Activity”);

Fragment

31

Acessando a Activity Host

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");

} }

Fragment2.java

32

Fragment 1

Fragment 2

Fragment 3


Mudando o texto a partir do Fragment Alterar texto do fragment 2

Texto atualizado, graças a um click

33

O método beginTransaction() possibilita adicionar, remover ou substituir um Fragment em runtime

Transações com Fragments

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;

} }

35

<LinearLayout ... >  <FrameLayout ...

android:id=“@+id/frame1" />

<LinearLayout... >  <LinearLayout ... >





</LinearLayout>

main_fragments.xml

Substituindo um Fragment

Trocar a tag fragment pela tag FrameLayout

36

Fragment 1

Fragment 2

Fragment 3


DevFest - Fragments Alterar texto do fragment 2

Fragment 3

Substitui frag 1 p/ frag 3

38

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

39

Obrigada :)! Perguntas?

@SuelenGC www.suelengc.com.br 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)

devfest 2012 - esquartejando sua activity com fragments

Technology