Android – Layout Manager

Ivan Nicoli

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.

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.

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.

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="http://schemas.android.com/apk/res/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>

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.

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

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.

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.

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="http://schemas.android.com/apk/res/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>

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="http://schemas.android.com/apk/res/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.

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="http://schemas.android.com/apk/res/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>

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="http://schemas.android.com/apk/res/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.

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="http://schemas.android.com/apk/res/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>

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

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="http://schemas.android.com/apk/res/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>

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>

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

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="http://schemas.android.com/apk/res/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>

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>

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

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="http://schemas.android.com/apk/res/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>

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

}

Gallery

● O componente android.widget.Gallerty é capaz de organizar componentes lado a lado na horizontal.

● Muito útil para criar uma galeria de imagens.

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="http://schemas.android.com/apk/res/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>

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

}});

}

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.

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.

Exercício 10 – WebView● Crie uma nova Activity chamada PaginaTerra, com

o conteúdo a seguir:@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);WebView wv = new WebView(this);wv.loadUrl("http://m.terra.com.br");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"/>

Fim