Programação para a Plataforma Android Aula 4. Objetos Gráficos

Transcrição

1 Programação para a Plataforma Android Aula 4 Objetos Gráficos Depuração simples: imprimindo eventos Lidando com botões e spinners Carregando múleplas aevidades em uma aplicação O padrão adapter Mostrando vários itens com listas Os diversos layouts

2 Views (de novo) Visão (view): um objeto que sabe se desenhar na tela. Grupos (ViewGroup): uma visão que pode conter outras. Layout: uma visão que sabe dispor outras visões na tela do aparelho. Antropomorfismo: E desde quando um pedaço de código sabe qualquer coisa?

3 Textos e Botões Primeira aplicação: Crie a visão mostrada ao lado. Um clique no botão faz com que o texto exibido seja impresso no log do Android. O log do Android é um arquivo de texto que pode ser usado para depuração.

4 O Log do Android Saída crua: Podemos usar esse log para recolher informações de depuração e testes de desempenho

5 O Log do Android Texto é impresso pela classe Log, que possui cinco métodos estáecos. Cada método impreme em uma cor diferente: Log.v: texto verboso (preto) Log.d: texto de depuração (azul) Log.i: texto informaevo (verde) Log.w: texto de aviso (laranja) Log.e: texto de erro (vermelho)

6 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= " android:orientation="vertical" android:layout_height="fill_parent" > <TextView /> <EditText /> <Button android:layout_width="wrap_content" android:text="log it" /> </LinearLayout> Qual é a cola entre a interface XML e o código Java?

7 Os Nomes dos Componentes public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); txt1 = (TextView)findViewById(R.id.txtDemo); etxt1 = (EditText)findViewById(R.id.eTxtDemo); btn1 = (Button)findViewById(R.id.btnDone); txt1.settext("entre seu texto"); btn1.setonclicklistener(btndoneonclick); Falta ainda programar o evento. Como fica isso?

8 Mais um evento de botão private final Button.OnClickListener btndoneonclick = new Button.OnClickListener() { public void onclick(view v) { 1 2 ; String input = etxt1.gettext().tostring(); Log.v("TextViewDemo", input); etxt1.settext(""); 1. O que significam os parâmetros de Log.v? 2. O que essa linha está fazendo?

9 Botões com Imagens... <ImageButton android:layout_width="wrap_content" />... public void oncreate(bundle savedinstancestate) {... btn1 = (ImageButton) findviewbyid(r.id.btndone); btn1.setimageresource(r.drawable.log);...

10 Caixas de Marcação <CheckBox android:layout_width="40dp" android:layout_height="40dp" android:checked="false"/> <TextView android:text="checkbox: caixa desmarcada" /> Como implementar a camada de controle dessa aplicação?

11 Eventos de Marcação public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); checkbox = (CheckBox) findviewbyid(r.id.cbxbox1); txtcheckbox = (TextView) findviewbyid(r.id.txtcheckbox); checkbox.setonclicklistener(new CheckBox.OnClickListener() { public void onclick(view v) { if (checkbox.ischecked()) { txtcheckbox.settext("checkbox: caixa marcada!"); else { txtcheckbox.settext("checkbox: caixa desmarcada..."); ); Qual o próximo componente gráfico?!

12 Botões de Rádio <RadioGroup android:orientation="vertical"> <RadioButton android:text="button1" /> <RadioButton android:text="button2" /> <RadioButton android:text="button3" /> </RadioGroup> <TextView android:text= "RadioGroup: nada escolhido ainda" />

13 Botões de Rádio <RadioGroup android:orientation="vertical"> <RadioButton android:text="button1" /> <RadioButton android:text="button2" /> <RadioButton android:text="button3" /> </RadioGroup> <TextView android:text= "RadioGroup: nada escolhido ainda" /> Como implementar a camada de controle dessa aplicação?

14 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); txtradio = (TextView) findviewbyid(r.id.txtradio); rb1 = (RadioButton) findviewbyid(r.id.rb1); rb2 = (RadioButton) findviewbyid(r.id.rb2); rb3 = (RadioButton) findviewbyid(r.id.rb3); // React to events from the RadioGroup rb1.setonclicklistener(new RadioGroup.OnClickListener() { public void onclick(view v) { txtradio.settext("radio: escolhido botao 1"); ); rb2.setonclicklistener(new RadioGroup.OnClickListener() { public void onclick(view v) { txtradio.settext("radio: escolhido botao 2"); ); rb3.setonclicklistener(new RadioGroup.OnClickListener() { public void onclick(view v) { txtradio.settext("radio: escolhido botao 3"); );

15 <Spinner android:layout_width="250dp" android:layout_centerhorizontal="true" android:layout_margintop="2dp" /> Spinners

16 Spinner: layout Completo <?xml version="1.0" encoding="u/ 8"?> <LinearLayout xmlns:android="h5p://schemas.android.com/apk/res/android" android:orientaeon="ver?cal" android:layout_height="fill_parent" > <Spinner android:layout_width="250dp" android:layout_centerhorizontal="true" android:layout_margintop="2dp" /> </LinearLayout>

17 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); O que faz esse bloco de código? spnmusketeers = (Spinner) findviewbyid(r.id.spnmusketeers); List<String> lsmusketeers = new ArrayList<String>(); lsmusketeers.add("athos"); lsmusketeers.add("porthos"); lsmusketeers.add("aramis"); ArrayAdapter<String> aspnmusketeers = new ArrayAdapter<String>(this, android.r.layout.simple_spinner_item, lsmusketeers); aspnmusketeers.setdropdownviewresource (android.r.layout.simple_spinner_dropdown_item); spnmusketeers.setadapter(aspnmusketeers); spnmusketeers.setonitemselectedlistener (new OnItemSelectedListener() { public void onnothingselected(adapterview<?> arg0) { public void onitemselected (AdapterView<?> parent, View v, int position, long id) { ); //??? E esse bloco de código, o que faz?

18 public void oncreate(bundle savedinstancestate) Eventos de Spinner: { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Adicione um controlador de spnmusketeers = (Spinner) findviewbyid(r.id.spnmusketeers); eventos a essa spinner List<String> lsmusketeers = new ArrayList<String>(); lsmusketeers.add("athos"); lsmusketeers.add("porthos"); lsmusketeers.add("aramis"); ArrayAdapter<String> aspnmusketeers = Modifique a visão para incluir uma caixa de texto. Cada item selecionado deve ser mostrado na caixa de new ArrayAdapter<String>(this, android.r.layout.simple_spinner_item, texto. lsmusketeers); aspnmusketeers.setdropdownviewresource (android.r.layout.simple_spinner_dropdown_item); spnmusketeers.setadapter(aspnmusketeers); spnmusketeers.setonitemselectedlistener (new OnItemSelectedListener() { public void onnothingselected(adapterview<?> arg0) {??? public void onitemselected (AdapterView<?> parent, View v, int position, long id) { //??? );

19 Spinner mais Caixa de Texto <?xml version="1.0" encoding="u/ 8"?> <LinearLayout xmlns:android="h5p://schemas.android.com/apk/res/android" android:orientaeon="ver?cal" android:layout_height="fill_parent" > <Spinner android:layout_width="250dp" android:layout_centerhorizontal="true" android:layout_margintop="2dp" /> <TextView android:text="spinner: nenhum item selecionado" /> </LinearLayout>

20 Eventos de Spinner spnmusketeers.setonitemselectedlistener( new OnItemSelectedListener() { public void onnothingselected(adapterview<?> arg0) { txtspinner.settext("nada foi selecionado!"); public void onitemselected(adapterview<?> parent, View v, int position, long id) { txtspinner.settext( (String) parent.getitematposition(position)); );

21 MúlEplas AEvidades É possível desenvolver múleplas aevidades na mesma aplicação. Novas aevidades são declaradas em AndroidManifest.xml. Usando o Eclipse, pode se escolher qual a aevidade a ser lançada no emulador: Run, Run configuration, Launch.

22 AndroidManifest.xml <applicaeon <acevity android:name=".aulaacevity4" <intent filter> <aceon android:name="android.intent.aceon.main" /> <category android:name="android.intent.category.launcher" /> </intent filter> </acevity> <acevity android:name=".gallery1" <intent filter> <aceon android:name="android.intent.aceon.main" /> <category android:name="android.intent.category.launcher" /> </intent filter> </acevity> </applicaeon>

23 Selecione a atividade aqui!

24 Lista de fotos: Galerias de Imagens Crie uma galeria de imagens, tal que seja possível escolher alguma dentre as fotos mostradas. Cada vez que uma foto é escolhida, seu índice na galeria deve ser mostrado no Toast do aparelho celular

25 Galerias Android possui um elemento gráfico que se presta exatamente ao propósito de criar galerias de imagens. <?xml version="1.0" encoding="utf-8"?> <Gallery xmlns:android=" />

26 Inicialização da Galeria public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.gallery_1); Gallery g = (Gallery) findviewbyid(r.id.gallery); g.setadapter(new ImageAdapter(this)); g.setonitemclicklistener( new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View v, int position, long id) { Toast.makeText(Gallery1.this, "" + position, Toast.LENGTH_LONG).show(); ); O que é esta classe Toast?

27 Adaptadores Adapter é um padrão de projetos. Aliás, dos mais simples que existem. Um adaptador faz a adequação entre duas interfaces. Quais interfaces precisam ser adaptadas, em nosso caso?

28 Adaptadores em UML

29 ImageAdapter public class ImageAdapter extends BaseAdapter { public ImageAdapter(Context c) {... public int getcount() {... public Object getitem(int position) {... public long getitemid(int position) {... public View getview( int position, View convertview, ViewGroup parent) {... Como implementar este adaptador?

30 ImageAdapter public class ImageAdapter extends BaseAdapter { public ImageAdapter(Context c) {... public int getcount() {... public Object getitem(int position) {... public long getitemid(int position) {... public View getview( int position, View convertview, ViewGroup parent) {... Objeto em uma certa posição Número de items representados pelo adaptador. Visão que mostrará o objeto armazenado na dada posição.

31 Atributos de EsElo int mgalleryitembackground; private Context mcontext; public ImageAdapter(Context c) { mcontext = c; TypedArray a = obtainstyledattributes(r.styleable.gallery1); mgalleryitembackground = a.getresourceid( R.styleable.Gallery1_android_galleryItemBackground, 0); a.recycle(); values/anrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="gallery1"> <attr name="android:galleryitembackground" /> </declare-styleable> </resources>

32 A lista de imagens private Integer[] mimageids = { R.drawable.gallery_photo_1, R.drawable.gallery_photo_2, R.drawable.gallery_photo_3, R.drawable.gallery_photo_4, R.drawable.gallery_photo_5, R.drawable.gallery_photo_6, R.drawable.gallery_photo_7, R.drawable.gallery_photo_8 ; public int getcount() { return mimageids.length; public Object getitem(int position) { return position; public long getitemid(int position) { return position;

33 E o mais importante public View getview( int position, View convertview, ViewGroup parent ) { ImageView i = new ImageView(mContext); i.setimageresource(mimageids[position]); i.setscaletype(imageview.scaletype.fit_xy); i.setlayoutparams(new Gallery.LayoutParams(136, 88)); i.setbackgroundresource(mgalleryitembackground); return i;

34 Listas Uma das visões mais uelizadas são as listas. Existe uma aevidade que já incorpora o layout de listas: trata se de ListActivity. public class List1 extends ListActivity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setlistadapter(new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, mstrings)); getlistview().settextfilterenabled(true); private String[] mstrings = {"Alexia", "Bruna", "Carla", "Daniele", "Erica", "Fernanda", "Glauberlaine", "Heleonora", "Ivana", "Janete", "Kenia", "Luciana", "Marta", "Norma", "Osma", "Patricia";

35 Listas Uma das visões mais uelizadas são as listas. Existe uma aevidade que já incorpora o layout de listas: trata se de ListActivity. public class List1 extends ListActivity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setlistadapter(new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, mstrings)); getlistview().settextfilterenabled(true); private String[] mstrings = {"Alexia", "Bruna", "Carla", "Daniele", "Erica", "Fernanda", "Glauberlaine", "Heleonora", "Ivana", "Janete", "Kenia", "Luciana", "Marta", "Norma", "Osma", "Patricia";

36 Eventos de Listas Uma das visões mais uelizadas são as listas. Existe uma aevidade que já incorpora o layout de listas: trata se de ListActivity. Adicione a funcionalidade de remover elementos de sua aplicação. Discuta a estratégia escolhida. Será que essa estratégia pode ser estendida no futuro?

37 Menu de Contexto Menus de contexto aparecem em Janelas popup. Podemos aevar o menu de contexto de uma lista se clicarmos sobre um de seus items e pressionarmos o ponteiro durante um tempo. Mas, como adicionar um menu de contexto à lista?

38 Menu de Contexto private final int del = 1; private List<String> mstrings = new ArrayList<String>(); public final void oncreatecontextmenu(final ContextMenu menu, final View v, final ContextMenuInfo menuinfo) { super.oncreatecontextmenu(menu, v, menuinfo); menu.add(menu.none, del, Menu.NONE, "DEL"); public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setlistadapter(new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, mstrings)); registerforcontextmenu(getlistview()); getlistview().settextfilterenabled(true); initlist(); E como tratar o evento produzido pelo menu? Stub para testes

39 Tratando eventos de contexto public final boolean oncontextitemselected(final MenuItem item) { AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getmenuinfo(); ListAdapter adapter = getlistadapter(); String e = (String) adapter.getitem((int) info.id); switch (item.getitemid()) { case del: mstrings.remove(e); filldata(); return true; default: return super.oncontextitemselected(item); Como é feita a amarração entre evento escolhido e evento tratado?

40 Estendendo a Aplicação Múltiplos Eventos: Adicione um evento UP para mover o item selecionado para a primeira posição da lista. Adicione um evento DOWN para mover o item selecionado para a última posição da lista.

41 Programando para Interfaces Uma lista baseada em arranjos talvez não seja a melhor opção para essa nova especificação. Por que? private List<String> mstrings = new ArrayList<String>(); O que seria uma opção mais adequada? Qual o custo de fazer a mudança? E como inserir os novos eventos no menu?

42 MúlEplos Eventos public final void oncreatecontextmenu( final ContextMenu menu, final View v, final ContextMenuInfo menuinfo ) { super.oncreatecontextmenu(menu, v, menuinfo); menu.add(menu.none, del, Menu.NONE, "DEL"); menu.add(menu.none, up, Menu.NONE, "UP"); menu.add(menu.none, down, Menu.NONE, "DOWN");

43 public final boolean oncontextitemselected(final MenuItem item) { AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getmenuinfo(); ListAdapter adapter = getlistadapter(); String e = (String) adapter.getitem((int) info.id); switch (item.getitemid()) { case del: mstrings.remove(e); break; case up: mstrings.remove(e); mstrings.add(0, e); break; case down: mstrings.remove(e); mstrings.add(e); break; default: return super.oncontextitemselected(item); this.setlistadapter(new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, mstrings)); return true;

44 Mais um pouco sobre Layouts Android usa layouts para controlar a aparência das aplicações. Existem vários Epos de layouts: FrameLayout LinearLayout TableLayout AbsoluteLayout RelativeLayout etc Para que serve cada um desses formatos?

45 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="fill_parent" > <EditText android:text="edittext1" /> <EditText android:text="edittext2" /> <EditText android:text="edittext3" /> <EditText android:text="edittext4" /> </LinearLayout> LinearLayout E basta mudar uma linha para

46 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" schemas.android.com/apk/res/android" android:orientation= horizontal" android:layout_height="fill_parent" > <EditText android:text= E1" /> <EditText android:text= E2" /> <EditText android:text= E3" /> <EditText android:text= E4" /> </LinearLayout> LinearLayout O que significa esse wrap_ content?

47 Pesos <EditText android:text="edittext1" android:layout_weight="1"/> <EditText android:text="edittext2" /> <EditText android:text="edittext3" android:layout_weight="0.5"/> <EditText android:text="edittext4" android:layout_weight="0.5"/>

48 Layouts de Tabela Tabelas permitem que componentes gráficos sejam armazenados em linhas e colunas. É possível determinar o peso de cada item?

49 Tabelas: exemplo <?xml version="1.0" encoding="ut 8"?> <TableLayout xmlns:android="hnp://schemas.android.com/apk/res/android" > <TableRow > <Bunon android:text="cell 11" android:layout_width="wrap_content" android:layout_weight="2"/> /> <TextView android:layout_width="wrap_content" android:text="cell 12" android:layout_weight="1"/> /> <TextView android:layout_width="wrap_content" android:text="cell 13" android:layout_weight="1"/> /> <TextView android:layout_width="wrap_content" android:text="cell 14" android:layout_weight="1"/> /> </TableRow> <TableRow > <Bunon android:text="wrap_content" android:layout_width="100dip" /> <TextView android:layout_width="wrap_content" android:text="cell 22" /> <TextView android:layout_width="wrap_content" android:text="cell 23" /> <TextView android:layout_width="wrap_content" android:text="cell 24" /> </TableRow> </TableLayout>

50 Layouts Absolutos <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android= " android:orientation="vertical" android:layout_width="fill_parent android:layout_height="fill_parent > <TextView android:text="canto superior esquerdo" android:layout_x="0.0px android:layout_y="0.0px" /> <TextView android:text="meio" android:layout_x="140.0px android:layout_y="200.0px" /> <TextView android:text="canto superior direito" android:layout_x="240.0px android:layout_y="400.0px" /> </AbsoluteLayout> Como será a tela dessa aplicação?

51 Layouts Absolutos <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android= " android:orientation="vertical" android:layout_width="fill_parent android:layout_height="fill_parent > <TextView android:text="canto superior esquerdo" android:layout_x="0.0px android:layout_y="0.0px" /> <TextView android:text="meio" android:layout_x="140.0px android:layout_y="200.0px" /> <TextView android:text="canto superior direito" android:layout_x="240.0px android:layout_y="400.0px" /> </AbsoluteLayout> E se de fôssemos para ?

52 Discussão Quais as vantagens de um layout absoluto? E quais as desvantagens? E como se determinam dimensões em Android?

53 <?xml version="1.0" encoding="u/ 8"?> <RelaEveLayout xmlns:android="h5p://schemas.android.com/apk/res/android" android:orientaeon="ver?cal" android:layout_height="fill_parent" > <TextView android:layout_width="wrap_content" android:text="text1" android:gravity="top" android:layout_alignparentright="true" /> <TextView android:layout_width="wrap_content" android:text="text2" /> <Bunon android:layout_width="150dp" android:text="bu5on1" /> <Bunon android:layout_width="150dp" android:layout_height="100dp" android:text="bu5on2" /> </RelaEveLayout> É possível especificar a posição de um elemento gráfico com relação a outro, usando layouts relaevos.

54 Layouts RelaEvos É possível especificar a posição de um elemento gráfico com relação a outro. <TextView android:id="@+id/txttext1" android:layout_width="wrap_content" android:text="text1" android:gravity="top" android:layout_alignparentright="true" /> <Button android:id="@+id/btnbutton1" android:layout_width="150dp" android:text="button1" android:layout_below="@+id/txttext2" />

55 Layouts RelaEvos É possível especificar a posição de um elemento gráfico com relação a outro. <TextView android:id="@+id/txttext2" android:layout_width="wrap_content" android:text="text2" android:layout_below="@+id/txttext1" /> <Button android:id="@+id/btnbutton2" android:layout_width="150dp" android:layout_height="100dp" android:text="button2" android:layout_torightof="@+id/btnbutton1" android:layout_aligntop="@+id/btnbutton1" />

56 Incrementando a nossa lista Modifique a aevidade ListContext para que seja possível mover um item uma posição para baixo. O úlemo item não pode ser movido, mas a sua aplicação não deve parar de funcionar se o usuário tentar movê lo.