Android Layout Manager. Ivan Nicoli

Transcrição

1 Android Layout Manager Ivan Nicoli

2 Classe View A classe android.view.view é a classe mãe de todos os componentes visuais do Android. Qualquer desenvolvedor pode criar seu próprio componente herdando a classe View e implementando o método ondraw(canvas). Existem dois tipos de componentes visuais: Widgets. Ex: Buttons, ImageView, TextView... Layout Manager: Ex: LinearLayout, AbsoluteLayout, TableLayout... Os gerenciadores de layout são filhos de uma subclasse da classe View. A classe ViewGroup.

3 FrameLayout É o layout manager mais simples de todos. Cada componente é adicionado em um novo Frame na tela. O primeiro adicionado ficará no fundo da tela os demais ficarão por cima dele. Atualmente pode ser substituído pela tag merge com algumas otimizações.

4 Exercício 1 FrameLayout (1/2) Crie um projeto chamado ExplorandoLayoutManager. Crie um MenuActivity do tipo ListActivity e adicione o menu Exemplo Frame Layout e Sair. Crie uma Activity chamada FrameLayoutActivity. Sua implementação deve simplesmente chamar o arquivo xml R.layout.framelayout. Adicione uma imagem chamada paisagem.jpg na pasta res/drawable-hdpi.

5 Exercício 1 FrameLayout (2/2) Adicione a seguinte implementação no arquivo framelayout.xml: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:contentdescription="@string/paisagem" android:src="@drawable/paisagem" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/paisagem" android:layout_gravity="center" android:padding="12dp" android:background="#aa000000"/> </FrameLayout>

6 LinearLayout Layout padrão do Android. Organiza os componentes de forma horizontal ou vertical. Os componentes internos podem ser alinhados pelo atributo android:layout_gravity. O tamanho de cada componente pode ser proporcional ao atributo layout_weight com relação aos demais componentes da tela.

7 TableLayout Para solucionar problemas como: manter a proporção entre diversos componentes do tipo LinearLayout numa mesma tela. Foi criado o LayoutManager TableLayout. TableLayout é uma classe filha do LinearLayout. O TableLayout é um LinearLayout vertical. Em sua construção, aninhados ao TableLayout serão adicionados vários componentes do Tipo TableRow. O componente TableRow também é uma classe filha de LinearLayout. TableRow é um LinearLayout horizontal. A vantagem desta junção é que é mantida a proporcionalidade entre as colunas de vários componentes TableRow dentro de um TableLayout

8 Exercício 2 - TableLayout Reconstrua o Layout da Calculadora utilizando o TableLayout. Disposição dos componentes: Console Botão Limpar 7, 8, 9, / 4, 5, 6, * 1, 2, 3, -., 0, =, + (Optativo) Construa o mesmo layout utilizando o LinearLayout e veja a desproporcionalidade entre os tamanhos dos botões.

9 TableLayout Dois atributos importantes do LayoutManager TableLayout, são: android:shrinkcolumns: Permite que as colunas especificadas sejam comprimidas de forma que ocorra quebras de linha, se necessário, para exibição do texto. android:stretchcolumns: Permite especificar quais colunas devem ser esticadas para que a linha ocupe todo o espaço. Exemplos de especificação: android:stretchcolumns= 0,1 para as colunas 1 e 2 ou android:stretchcolumns= * para todas as colunas.

10 Exercício 3 shrinkcolumns (1/2) Crie uma Activity ShrinkColumnsTL que realiza a chamada: setcontentview(r.layout.shrinkcolumnstl) Crei o arquivo shrinkcolumnstl.xml, com o seguinte conteúdo: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:shrinkcolumns="1"> <TableRow > <TextView android:text="@string/texto_1"/> <TextView android:text="@string/texto_2_texto_2_texto_2_texto_2_"/> <TextView android:text="@string/texto_3"/> <TextView android:text="@string/texto_4"/> </TableRow> <TableRow > <TextView android:text="@string/texto_1"/> <TextView android:text="@string/texto_2"/> <TextView android:text="@string/texto_3"/> <TextView android:text="@string/texto_4"/> </TableRow> </TableLayout>

11 Exercício 3 shrinkcolumns (2/2) Adicione a Activity no menu da aplicação e no AndroidManifest.xml Execute e verifique o resultado. Adicione a tag TableLayout adicionando o atributo android:shrinkcolumns, como abaixo: <TableLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:shrinkcolumns="1"> Verifique o resultado obtido. Observe que o texto foi quebrado para que fosse possível a visualização da linha.

12 Exercício 4 strecthcolumns (1/2) Crie uma Activity StretchColumnsTL que realiza a chamada: setcontentview(r.layout.stretchcolumnstl) Crei o arquivo stretchcolumnstl.xml, com o conteúdo: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TableRow> <Button android:text="@string/texto_1" /> <Button android:text="@string/texto_2" /> <Button android:text="@string/texto_3" /> <Button android:text="@string/texto_4" /> </TableRow> <TableRow> <Button android:text="@string/texto_1" /> <Button android:text="@string/texto_2" /> <Button android:text="@string/texto_3" /> <Button android:text="@string/texto_4" /> </TableRow> </TableLayout>

13 Exercício 4 stretchcolumns (2/2) Adicione a Activity no menu da aplicação e no AndroidManifest.xml Execute e verifique o resultado. Adicione a tag TableLayout adicionando o atributo android:stretchcolumns, como abaixo: <TableLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchcolumns="1,2"> Verifique o resultado obtido. Observe que a largura dos componentes da segunda e da terceira coluna foram alterados preencher de toda a linha.

14 Exercício 5 Login Table Layout Crie uma Activity chamada LoginTL que realize a chamada: setcontentview(r.layout.logintl); Crie o arquivo logintl.xml e adicione o conteúdo a seguir: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchcolumns="1" > <TableRow> <TextView android:text="@string/usuario" /> <EditText android:inputtype="text" /> </TableRow> <TableRow> <TextView android:text="@string/senha" /> <EditText android:inputtype="text" android:password="true" /> </TableRow> <TableRow android:gravity="right"> <Button android:text="@string/login"/> </TableRow> </TableLayout>

15 RelativeLayout Permite posicionar componentes ao lado, abaixo ou acima de outro componente já existente, referenciado pelo id. Poderão ser utilizados os seguintes atributos para realizar um alinhamento relativo: android:layout_below android:layout_above android:layout_torightof android:layout_toleftof android:layout_alignleft android:layout_alignright android:layout_aligntop android:layout_alignbaseline

16 Exercício 6 Login RelativeLayout (1/2) Crie uma Activity chamada LoginRL que realiza a chamada setcontentview(r.layout.loginrl); Crie um arquivo loginrl.xml com o conteúdo: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/usuario" style="@style/componentesrl" android:text="@string/usuario" /> <TextView android:id="@+id/senha" style="@style/componentesrl" android:layout_below="@id/usuario" android:text="@string/senha" /> <EditText android:id="@+id/txtusuario" style="@style/textsrl" android:layout_torightof="@id/usuario" android:inputtype="text" /> <EditText android:id="@+id/txtsenha" style="@style/textsrl" android:layout_alignleft="@id/txtusuario" android:layout_below="@id/txtusuario" android:inputtype="text" android:password="true" /> <Button android:id="@+id/login" style="@style/componentesrl" android:layout_alignright="@id/txtsenha" android:layout_below="@id/txtsenha" android:text="@string/login" /> </RelativeLayout>

17 Exercício 6 Login RelativeLayout (2/2) Adicione a classe LoginRL no menu principal da aplicação e no AndroidManifest.xml Crie as definições de estilo: <style name="componentesrl"> <item name="android:layout_height">wrap_content</item> <item name="android:layout_width">wrap_content</item> <item name="android:padding">10dip</item> </style> <style name="textsrl" parent="componentesrl"> <item name="android:layout_width">fill_parent</item> </style>

18 AbsoluteLayout Layout que permite controlar a posição x e y exata em que o componente vai aparecer. Em diferentes dispositivos o mesmo aplicativo pode aparecer de forma diferente. Os atributos que controlam a posição do componente são: android:layout_x android:layout_y

19 Exercício 7 Login AbsoluteLayout (1/2) Crie uma Activity chamada LoginAL que realiza a chamada setcontentview(r.layout.loginal); Crie um arquivo loginal.xml com o conteúdo: <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView style="@style/componenteal" android:layout_x="0dp" android:layout_y="12dp" android:text="@string/usuario" /> <TextView style="@style/componenteal" android:layout_x="0dp" android:layout_y="62dp" android:text="@string/senha" /> <EditText style="@style/textal" android:layout_x="50dp" android:layout_y="0dp" android:inputtype="text" /> <EditText style="@style/textal" android:layout_x="50dp" android:layout_y="50dp" android:inputtype="text" /> <Button style="@style/componenteal" android:layout_x="249dp" android:layout_y="100dp" android:text="@string/login" /> </AbsoluteLayout>

20 Exercício 7 Login AbsoluteLayout (2/2) Adicione a classe LoginAL no menu principal da aplicação e no AndroidManifest.xml Crie as definições de estilo: <style name="componenteal"> <item name="android:layout_height">wrap_content</item> <item name="android:layout_width">wrap_content</item> </style> <style name="textal" parent="componenteal"> <item name="android:layout_width">250dp</item> </style>

21 ScrollView A classe android.widget.scrollview é utilizada para telas que contem muitos componentes. A classe ScrollView é uma subclasse de FrameLayout. Dessa forma, pode receber apenas um componente, que vai ocupar o tamanho inteiro da tela. Para utilizar de forma adequada é necessário adicionar um layout dentro manager aninhado ao ScrollView

22 Exercício 8 ScrollView (1/2) Crie a Activity CemTextViewsSV bem como o arquivo de layout cemtextviewssv.xml. Adicione o conteúdo a seguir no arquivo cemtextviewssv.xml: <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" android:layout_width="fill_parent" android:layout_height="wrap_content" > <LinearLayout android:id="@+id/scrollviewlinearlayout" android:layout_width="fill_parent" android:layout_height="wrap_content" > </LinearLayout> </ScrollView>

23 Exercício 8 ScrollView (2/2) Adicione a Activity CemTextViewsSV no menu da aplicação e no AndroidManifest.xml Adicione a seguinte implementação no método oncreate da classe CemTextViewsSV: super.oncreate(savedinstancestate); setcontentview(r.layout.cemtextviewssv); LinearLayout ll = (LinearLayout) findviewbyid(r.id.scrollviewlinearlayout); for (int i = 0; i < 100; i++) { TextView t = new TextView(this); t.settext("textview número: " + i); ll.addview(t); }

24 Gallery O componente android.widget.gallerty é capaz de organizar componentes lado a lado na horizontal. Muito útil para criar uma galeria de imagens.

25 Exercício 9 Gallery (1/3) Crie uma activity chamada Exemplo Gallery. Adicione-a no AndroidManifest e no menu da aplicação. Crie um arquivo de layout chamado exemplogallery.xml, com o conteúdo: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/exemplo_gallery" android:textsize="30dp" /> <Gallery android:id="@+id/mygallery" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center"/> </LinearLayout>

26 Exercício 9 Gallery (2/3) Adicione a implementação a seguir na classe ExemploGallery: int[] imagens = { R.drawable.i1, R.drawable.i2, R.drawable.i3, R.drawable.i4, R.drawable.i5 }; protected void oncreate(bundle savedinstancestate) { setcontentview(r.layout.exemplogallery); Gallery g = (Gallery) findviewbyid(r.id.mygallery); g.setadapter(new BaseAdapter() { public View getview(int position, View convertview, ViewGroup parent) { ImageView iv = new ImageView(ExemploGallery.this); iv.setimageresource(imagens[position]); iv.setlayoutparams(new Gallery.LayoutParams(100, 150)); return iv; } public long getitemid(int position) {return position;} public Object getitem(int position) {return imagens[position];} public int getcount() {return imagens.length;} }); g.setonitemclicklistener(new OnItemClickListener() { public void onitemclick(adapterview<?> arg0, View arg1, int arg2, long arg3) { ImageView iv = new ImageView(ExemploGallery.this); iv.setimageresource(imagens[arg2]); Toast t = new Toast(ExemploGallery.this); t.setview(iv); t.show(); } }); }

27 Exercício 9 Gallery (3/3) Procure pela palavra Android no images.google.com. Pesquise por imagens do tamanho 200x200 Realize o download de cinco imagens. Nomeie-as como: i1.jpg, i2.jpg, i3.jpg, i4.jpg e i5.jpg. Adicione-as no diretório res/drawable-hdpi.

28 WebView O android possui um componente que permite visualizar páginas web dentro da aplicação desenvolvida. O funcionamento do componente é idêntico ao do navegador do android.

29 Exercício 10 WebView Crie uma nova Activity chamada PaginaTerra, com o conteúdo a protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); WebView wv = new WebView(this); wv.loadurl(" setcontentview(wv); } Adicione a declaração da Activity no AndroidManifest e no menu principal da aplicação. No arquivo AndroidManifest adicione a instrução: <uses-permission android:name="android.permission.internet"/>

30 Fim