Programação para a Plataforma Android Aula 16. Fragmentos

Transcrição

1 Programação para a Plataforma Android Aula 16 Fragmentos O que são fragmentos Como combinar múl?plas visões em uma única tela? Como lidar com telas de tamanhos variados? Como modificar a visão de uma a?vidade durante a sua execução? Como criar caixas de diálogo itera?vas? Criando uma aplicação para ler livros.

2 Múl?plas a?vidades na tela Até aqui, sempre trabalhamos com uma a?vidade por tela. De fato, tecnicamente não é possível combinar múl?plas a?vidades em uma mesma tela. Por outro lado, isso seria bastante desejável. Por que seria interessante combinarmos duas atividades em uma mesma tela?

3 Um Exemplo Você poderia descrever cada uma dessas visões em XML?

4 Visões e Reuso Em princípio, podemos construir visões como esta à direita em XML. Porém, se cada uma das visões que a compõem fossem a?vidades separadas, teríamos muito mais reúso. Porquê?

5 Fragmentos A fim de separar a?vidades e visões, Android 3.0 (API 11) trouxe o conceito de Fragmentos. Fragmentos são quase a?vidades. Fragmentos possuem três vantagens: Aumentam o reúso de a?vidades. Permitem a construção de telas com múl?plas visões. Permitem a modificação da visão de uma a?vidade em tempo de execução. Lembrem-se dessas vantagens, pois vamos discutílas depois.

6 Telas de Vários Tamanhos Fragmentos podem ser programados para adaptar se à vários?pos de telas.

7 Telas de Vários Tamanhos Desde Android 3.0, temos também infraestrutura para criar vários?pos de layouts.

8 Caixa de Diálogo Intera?va Caixa de Diálogo: Crie uma caixa de diálogo com dois botões: cancel e ok. Escolhendo cancel, uma alerta com esse nome deve aparecer na atividade principal. Escolhendo ok, uma alerta com essa palavra deve ser exibida pela atividade principal. Como fragmentos são declarados. Como fragmentos são criados. Como fragmentos trocam informações com a?vidades.

9 Por onde começamos? Visão geral da aplicação

10 Mas antes de começarmos Fragmentos existem somente a par?r de Android 3.0 (API 11). E mesmo assim, são pacotes na?vos somente a par?r de 4.1 (API 16). Entre as APIs 11 e 15, fragmentos são uma biblioteca de suporte. Que pode ser baixada e instalada com o SDK.

11 Layout da A?vidade Principal Como é o layout da atividade principal?

12 Layout da A?vidade Principal Por agora, isso já devia ser coisa muito simples ac?vity_main.xml <?xml version="1.0" encoding="u8 8"?> <LinearLayout xmlns:android= "h>p://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orienta?on="verecal" > <Bulon android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> E como seria a implementação da atividade?

13 Layout da A?vidade Principal Aula16Ac?vity.xml public class Aula16Ac?vity extends FragmentAc?vity implements OnClickListener { Por agora, isso já devia ser coisa muito public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Bulon bulonpostdialog = (Bulon) findviewbyid(r.id.bulon_post_dialog); bulonpostdialog.setonclicklistener(this); Existe qualquer diferença para uma atividade normal? public void onclick(view v) { } Precisamos agora criar o fragmento, e bolar um jeito dele conversar com a a?vidade.

14 Criando um Fragmento Aula16Ac?vity.xml public void onclick(view v) { Confirma(onDialogFragment confirma?ondialog = Confirma?onDialogFragment.newInstance(R.string.dialog_format_?tle); confirma?ondialog.setconfirma(ondialogfragmentlistener(this); confirma?ondialog.show(getsupportfragmentmanager(), null); Temos de implementar essa classe. E dar um jeito da a?vidade e do fragmento conversarem Mas, que jeito mais esquisito de criar um objeto. Por que não usar um construtor padrão?

15 Confirma?onDialogFragment.java Builders public class Confirma?onDialogFragment extends DialogFragment {... public sta(c Confirma(onDialogFragment newinstance(int (tle) { Confirma(onDialogFragment frag = new Confirma(onDialogFragment(); Bundle args = new Bundle(); args.putint("(tle", (tle); frag.setarguments(args); return frag;... }

16 Parla! Precisamos de dar um jeito do fragmento e da a?vidade conversarem. Podemos fazer isso via o padrão observer, um velho conhecido nosso. Quando vimos o padrão observer antes?

17 Ainda os observadores public class Aula16Ac?vity extends FragmentAc?vity implements Aula16Ac?vity.java OnClickListener, Confirma(onDialogFragmentListener { public void onposi(veclick() { Toast.makeText(this, android.r.string.ok, Toast.LENGTH_LONG).show(); public void onnega(veclick() { Toast.makeText(this, android.r.string.cancel, Toast.LENGTH_LONG).show(); public void onclick(view v) { Confirma?onDialogFragment confirma?ondialog = Confirma?onDialogFragment public class Confirma?onDialogFragment extends DialogFragment {.newinstance(r.string.dialog_format_?tle); private Confirma(onDialogFragmentListener listener; confirma?ondialog.setconfirma(ondialogfragmentlistener(this); confirma?ondialog.show(getsupportfragmentmanager(), null); } public interface Confirma(onDialogFragmentListener { public void onposi(veclick(); public void onnega(veclick(); Confirma?onDialogFragment.java public void setconfirma(ondialogfragmentlistener( Confirma?onDialogFragmentListener listener) { this.listener = listener; }

18 O Observado public class Aula16Ac?vity extends FragmentAc?vity implements OnClickListener, Confirma?onDialogFragmentListener { public void onposi?veclick() { Toast.makeText(this, android.r.string.ok, Toast.LENGTH_LONG).show(); public void onnega?veclick() { Toast.makeText(this, android.r.string.cancel, Toast.LENGTH_LONG).show(); public void onclick(view v) { Confirma?onDialogFragment confirma?ondialog = Confirma?onDialogFragment public class Confirma?onDialogFragment extends DialogFragment {.newinstance(r.string.dialog_format_?tle); private Confirma(onDialogFragmentListener listener; confirma?ondialog.setconfirma?ondialogfragmentlistener(this); confirma?ondialog.show(getsupportfragmentmanager(), null); } public interface Confirma(onDialogFragmentListener { public void onposi(veclick(); public void onnega(veclick(); public void setconfirma(ondialogfragmentlistener( Confirma?onDialogFragmentListener listener) { this.listener = listener; }

19 O Observador public class Aula16Ac?vity extends FragmentAc?vity implements OnClickListener, Confirma(onDialogFragmentListener { public void onposi(veclick() { Toast.makeText(this, android.r.string.ok, Toast.LENGTH_LONG).show(); public void onnega(veclick() { Toast.makeText(this, android.r.string.cancel, Toast.LENGTH_LONG).show(); public void onclick(view v) { Confirma?onDialogFragment confirma?ondialog = Confirma?onDialogFragment public class Confirma?onDialogFragment extends DialogFragment {.newinstance(r.string.dialog_format_?tle); private Confirma?onDialogFragmentListener listener; confirma?ondialog.setconfirma(ondialogfragmentlistener(this); confirma?ondialog.show(getsupportfragmentmanager(), null); public interface Confirma?onDialogFragmentListener { public void onposi?veclick(); } public void onnega?veclick(); public void setconfirma?ondialogfragmentlistener( Confirma?onDialogFragmentListener listener) { this.listener = listener; }

20 public class Confirma?onDialogFragment extends DialogFragment implements DialogInterface.OnClickListener public Dialog oncreatedialog(bundle savedinstancestate) { int?tle = getarguments().getint("?tle"); return new AlertDialog.Builder(getAc?vity()).setIcon(android.R.drawable.ic_dialog_alert).setTitle(?tle).setPosi?veBulon(android.R.string.ok, this).setnega?vebulon(android.r.string.cancel, this).create(); public void onclick(dialoginterface dialog, int which) { if (listener!= null) { switch (which) { case DialogInterface.BUTTON_POSITIVE: listener.onposi?veclick(); break; default: listener.onnega?veclick(); } Confirma?onDialogFragment.java Que padrão de projetos é esse? E o que a a?vidade principal fará quando for no?ficada do evento que escuta? Lidando com o Clique

21 Aula16Ac?vity.java Toast! public class Aula16Ac?vity extends FragmentAc?vity implements OnClickListener, Confirma?onDialogFragmentListener { public void onposi?veclick() { Toast.makeText(this, android.r.string.ok, Toast.LENGTH_LONG).show(); public void onnega?veclick() { Toast.makeText(this, android.r.string.cancel, Toast.LENGTH_LONG).show(); }

22 Recapitulando public class Aula16Ac?vity extends FragmentAc?vity implements OnClickListener, Confirma?onDialogFragmentListener public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Bulon bulonpostdialog = (Bulon) findviewbyid(r.id.bulon_post_dialog); bulonpostdialog.setonclicklistener(this); public void onclick(view v) { Confirma?onDialogFragment confirma?ondialog = Confirma?onDialogFragment.newInstance(R.string.dialog_format_?tle); confirma?ondialog.setconfirma?ondialogfragmentlistener(this); confirma?ondialog.show(getsupportfragmentmanager(), null); public void onposi?veclick() { Toast.makeText(this, android.r.string.ok, Toast.LENGTH_LONG).show(); public void onnega?veclick() { Toast.makeText(this, android.r.string.cancel, Toast.LENGTH_LONG).show(); } public class Confirma?onDialogFragment extends DialogFragment implements DialogInterface.OnClickListener { private Confirma?onDialogFragmentListener listener; public sta?c Confirma?onDialogFragment newinstance(int?tle) { Confirma?onDialogFragment frag = new Confirma?onDialogFragment(); Bundle args = new Bundle(); args.putint("?tle",?tle); frag.setarguments(args); return frag; public interface Confirma?onDialogFragmentListener { public void onposi?veclick(); public void onnega?veclick(); public void setconfirma?ondialogfragmentlistener( Confirma?onDialogFragmentListener listener) { this.listener = public Dialog oncreatedialog(bundle savedinstancestate) { int?tle = getarguments().getint("?tle"); return new AlertDialog.Builder(getAc?vity()).setIcon(android.R.drawable.ic_dialog_alert).setTitle(?tle).setPosi?veBulon(android.R.string.ok, this).setnega?vebulon(android.r.string.cancel, this).create(); public void onclick(dialoginterface dialog, int which) { if (listener!= null) { switch (which) { case DialogInterface.BUTTON_POSITIVE: listener.onposi?veclick(); break; default: listener.onnega?veclick(); } Aula16Ac?vity.java Confirma?onDialogFragment.java

23 Leitor de Livros: Crie um leitor de livros com duas visões: Uma é uma lista com os títulos de capítulso. A outra é um campo de texto com o conteúdo do capítulo. Múl?plas Visões Clicando em um título abre-se o capítulo. Em modo de retrato vê-se somente uma visão de cada vez. Em modo de paisagem, vêmse as duas!

24 Os Layouts Como é esse layout aqui? E esse layout aqui, como é?

25 Os Layouts Como é esse layout aqui? Na verdade, tudo depende de como estamos vendo o telefone: se em modo de retrato, ou em modo de paisagem E esse layout aqui, como é?

26 Os Layouts Esse componente de layout, e esse outro serão preenchidos por classes do?po Fragment. O que são esses nomes? <?xml version="1.0" encoding="uz 8"?> <LinearLayout xmlns:android= "hlp://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orienta?on="horizontal" > <fragment android:id="@+id/summary_fragment" android:name= "com.dcc052.aula16.summaryfragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <fragment android:id="@+id/chapter_fragment" android:name= "com.dcc052.aula16.chapterfragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="2" /> </LinearLayout>

27 Os Layouts Esse outro layout na verdade é somente uma moldura, onde encaixaremos um fragmento em tempo de execução da aplicação. Ele terá, assim duas visões possíveis. <?xml version="1.0" encoding="uz 8"?> <FrameLayout xmlns:android= "hlp://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" />

28 ChapterFragment public class ChapterFragment extends Fragment public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) public void onstart() { public void updatechapterview(int posi?on) public void onsaveinstancestate(bundle outstate) { } ChapterFragment.java Fragmentos possuem um ciclo de vida, parecido, porém diferente do ciclo de vida de a?vidades. Quais partes desse ciclo seriam iguais? E quais partes seriam diferentes?

29 Ciclo de Vida Qual é o papel dos métodos abaixo? onattach oncreateview onactivitycreated ondestroyview ondetach

30 ChapterFragment.java Criando Visão do Fragmento public class ChapterFragment extends Fragment { final sta?c String ARG_POSITION = "posi?on"; int mcurrentposi?on = public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { if (savedinstancestate!= null) { mcurrentposi?on = savedinstancestate.getint(arg_position); return inflater.inflate(r.layout.chapter_view, container, false); } Esse método faz parte do ciclo de vida do Fragmento. Porque temos esse teste? Que outros métodos são chamados nesse ciclo? Temos de criar esse layout.

31 layout/chapterview.xml O layout de um capítulo <?xml version="1.0" encoding="uz 8"?> <TextView xmlns:android= "hlp://schemas.android.com/apk/res/android" android:id="@+id/chapter_view" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:textsize="18sp" /> Por hora o layout será assim. Esse layout possui algumas deficiências. Quais? Mas é claro que poderemos melhorá lo depois. Por que não é preciso criar uma versão de paisagem?

32 ChapterFragment.java Começando o public void onstart() { super.onstart(); Bundle args = getarguments(); if (args!= null) { updatechapterview(args.getint(arg_position)); Explique a lógica do condicional nesse código. else if (mcurrentposi?on!= 1) { public void onsaveinstancestate(bundle outstate) { super.onsaveinstancestate(outstate); outstate.putint(arg_position, mcurrentposi?on); Precisamos definir esse método, que cria a visão do fragmento.

33 Criando a Visão do Fragmento public void updatechapterview(int posi?on) { Ac(vity ac(vity = getac(vity(); TextView chapter = (TextView) ac?vity.findviewbyid(r.id.chapter_view); chapter.settext(book.poems[posi(on]); mcurrentposi?on = posi?on; ChapterFragment.java O que esse código está fazendo? Em termos de reúso de código, esse projeto é um pouco deficiente. Quais são essas deficiências? Que a?vidade é essa?

34 Book.java public class Book { sta?c String[]?tles = { "Primeiro Poema", "Segundo Poema" }; O Livro livro por hora é um stub. Como poderíamos implementar a aplicação defini?va? sta?c String[] poems = { "Olha estas velhas arvores, mais belas\ndo que as ", "Sobre minh'alma, como sobre um trono,\nsenhor..." }; }

35 A lista de capítulos Nosso próximo passo é implementar a lista de capítulos. Essa classe deve ser capaz de no?ficar eventos. Que eventos são esses?

36 SummaryFragment.java public class SummaryFragment extends ListFragment { OnChapterSelectedListener mcallback; public interface OnChapterSelectedListener { public void onchapterselected(int posi(on); Para que serve todo esse public void oncreate(bundle savedinstancestate) public void onstart() public void onalach(ac?vity ac?vity) public void onlistitemclick(listview l, View v, int posi?on, long id) { }

37 Criando o Layout the public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); int layout = Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB? android.r.layout.simple_list_item_ac?vated_1 : android.r.layout.simple_list_item_1; setlistadapter(new ArrayAdapter<String>(getAc?vity(), layout, Book.?tles)); SummaryFragment.java Por que esse teste? Isso se parece com um #ifndef dinâmico. Você pode explicar a analogia? Note que não foi preciso criar o método oncreateview. Porque?

38 Começando a lista de public void onstart() { super.onstart(); if (getfragmentmanager().findfragmentbyid(r.id.chapter_fragment)!=null) { getlistview().setchoicemode(listview.choice_mode_single); } Para que serve esse teste misterioso? SummaryFragment.java

39 Começando a lista de public void onstart() { super.onstart(); if (getfragmentmanager().findfragmentbyid(r.id.chapter_fragment)!=null) { getlistview().setchoicemode(listview.choice_mode_single); } Estamos testando se o fragmento está em modo de tela dupla. Esse só é o caso quando o fragmento chapter_fragment está presente na lista de layouts a?vos. Quando estamos em modo de tela dupla, marcamos o item selecionado na lista. SummaryFragment.java

40 public class SummaryFragment extends ListFragment { OnChapterSelectedListener mcallback; public interface OnChapterSelectedListener { public void onchapterselected(int public void onaaach(ac?vity ac?vity) { super.onalach(ac?vity); try { mcallback = (OnChapterSelectedListener) ac?vity; catch (ClassCastExcep?on e) { throw new ClassCastExcep?on(ac?vity.toString() + " must implement public void onlistitemclick(listview l, View v, int posi?on, long id) { mcallback.onchapterselected(posi?on); getlistview().setitemchecked(posi?on, true); } SummaryFragment.java onalach Explica me novamente a lógica desse código. Precisamos agora implementar a a?vidade principal. Essa será a cola que ligará os dois fragmentos.

41 BookAc?vity.java A A?vidade Principal Que interface é essa? public class BookAc?vity extends FragmentAc?vity implements SummaryFragment.OnChapterSelectedListener public void oncreate(bundle savedinstancestate) { Por que esse método está aqui? public void onchapterselected(int posi?on) { } Como será a implementação de oncreate?

42 BookAc?vity.java Vários public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.summary_view); if (findviewbyid(r.id.fragment_container)!= null) { if (savedinstancestate!= null) { return; Para que serve esse teste? E esse outro teste, para que ele serve? SummaryFragment firstfragment = new SummaryFragment(); firstfragment.setarguments(getintent().getextras()); getsupportfragmentmanager().begintransac?on().add(r.id.fragment_container, firstfragment).commit(); }

43 BookAc?vity.java public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.summary_view); if (findviewbyid(r.id.fragment_container)!= null) { if (savedinstancestate!= null) { return; Fragmentos são criados em transações. Porque? Precisamos agora implementar onchapterselected. Ideas? SummaryFragment firstfragment = new SummaryFragment(); firstfragment.setarguments(getintent().getextras()); getsupportfragmentmanager().begintransac?on().add(r.id.fragment_container, firstfragment).commit(); }

44 BookAc?vity.java Selecionando um Capítulo public void onchapterselected(int posi?on) { ChapterFragment chapterfrag = (ChapterFragment) getsupportfragmentmanager().findfragmentbyid(r.id.chapter_fragment); if (chapterfrag!= null && chapterfrag.getac(vity()!= null) { Para que serve esse teste? chapterfrag.updatechapterview(posi?on); else { E se eu ChapterFragment newfragment = new ChapterFragment(); removesse essa Bundle args = new Bundle(); condição? args.putint(chapterfragment.arg_position, posi?on); newfragment.setarguments(args); FragmentTransac?on transac?on = getsupportfragmentmanager().begintransac?on(); transac?on.replace(r.id.fragment_container, newfragment); transac?on.addtobackstack(null); transac?on.commit(); } O que essa transação está fazendo?

45 Alternando entre visões É possível alterar a visão do emulador usando a combinação de telcas CTRL+F11. Será que o custo de alterar essas visões é alto? Como saber se novas a?vidades são criadas?

46 BookAc?vity.java Logando transições de estado public class BookAc?vity extends FragmentAc?vity implements SummaryFragment.OnChapterSelectedListener public void onstart() { super.onstart(); Log.v("BookAc?vity", "onstart"); public void onstop() { super.onstop(); Log.v("BookAc?vity", "onstop"); public void onresume() { super.onresume(); Log.v("BookAc?vity", "onresume"); public void onpause() { super.onpause(); Log.v("BookAc?vity", "onpause"); public void ondestroy() { super.ondestroy(); Log.v("BookAc?vity", "ondestroy"); } } Será que uma nova a?vidade é criada quando alternamos entre retrato e paisagem?

47 Melhorando o Layout de Capítulos O layout que usamos para capítulos não está bom: o usuário não consegue ler o texto inteiro. O que poderíamos fazer? <?xml version="1.0" encoding="uz 8"?> <TextView xmlns:android= "hlp://schemas.android.com/apk/res/android" android:id="@+id/chapter_view" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:textsize="18sp" /> chapter_view.xml

48 Melhorando o Layout de Capítulos O layout que usamos para capítulos não está bom: o usuário não consegue ler o texto inteiro. O que poderíamos fazer? <?xml version="1.0" encoding="uz 8"?> <TextView xmlns:android= "hlp://schemas.android.com/apk/res/android" android:id="@+id/chapter_view" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="14dp" android:textsize="18sp" /> chapter_view.xml O que mais podemos fazer? Podemos reduzir o tamanho da fonte!

49 chapter_view.xml Melhorando o Layout de Capítulos O layout que usamos para capítulos não está bom: o usuário não consegue ler o texto inteiro. O que poderíamos fazer? <?xml version="1.0" encoding="uz 8"?> <ScrollView xmlns:android= "hlp://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="16dp" > <TextView android:id="@+id/chapter_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="18sp" /> </ScrollView> Ou podemos usar um scroll