Para realizar o desenvolvimento de sua Tela de Interface é fundamental a compreensão dos dois tipos de layout disponíveis no Android, o LinearLayout e o RelativeLayout.
Neste post falaremos sobre o LinearLayout e no post seguinte explicaremos o RelativeLayout.
Mas o que é um Layout ?
O Layout é basicamente a forma como você organiza os componentes na tela do dispositivo.
LinearLayout :
Neste método de organização os componentes (ou controles) são posicionados na tela na ordem em que são declarados, podendo esta sequência ocorrer com orientação horizontal ou vertical.
LinearLayout Horizontal :
Em uma organização horizontal, todos os componentes declarados serão posicionados um ao lado do outro. Se você declarar 3 botões em um layout horizontal, todos estarão dispostos um ao lado do outro, conforme figura abaixo:
A montagem do Layout pode ser feita de duas formas, a primeira é a montagem através de um arquivo .xml e a segunda é utilizando-se alguma ferramenta de desenho de Interfaces, como por exemplo a visão "Graphical Layout" disponível na IDE Eclipse.
Na figura acima temos um screen shot da tela construída no Eclipse. Mas utilizar diretamente a edição do arquivo .xml também pode ser uma boa forma de construir sua tela de interface.
Veja abaixo o arquivo .xml referente a tela da figura acima:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
LinearLayout Vertical:
Analogamente ao LinearLayout Horizontal, o Layout vertical posicionará os componentes um embaixo do outro, conforme a seguir:
Observe que pouca coisa mudará no arquivo .xml referente ao novo exemplo de layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Quando adicionamos a linha destacada acima no arquivo .xml, o layout se transforma em layout vertical, conforme observado.
Aplicando o conceito de Layout aprendido para construirmos um rápido exemplo no Eclipse:
- Abra o Eclipse
- Clique em File >> New >> Project
- Expanda a opção Android clicando no + que fica ao lado da referida opção
- Selecione Android Application Project e clique em Next.
- No campo Application Name digite EntendendoLayouts que é o nome que daremos a esta aplicação de exemplo.
- No campo Minimum Required SDK escolha 2.2
- Em target API, escolha API 18
- No campo Compile With, escolha API 19
- Clique em Next.
- Selecione a opção: Create Custom Launcher Icon
- Selecione também: Create Activity
- E finalmente selecione a opção Create Project in Workspace
- Clique em Next.
- Clique em Next
- Selecione a opção Blank Activity e Clique em Next.
- Na próxima tela clique em Finish.
O Eclipse criará uma aplicação básica, conforme vimos nos Posts anteriores. Vamos prosseguir aplicando o conceito aprendido sobre LinearLayout
Conforme explicado no Post anterior, as telas de Interface são posicionadas na estrutura de pastas dentro da pasta "res/layouts" , localize o arquivo .xml dentro desta pasta, conforme figura abaixo:
Efetue um duplo clique sobre o arquivo .xml e você verá a estrutura criada inicialmente pelo Eclipse, selecione o texto e apague, pois vamos inserir um novo layout.
Basicamente o que vamos fazer é utilizar o .xml de LinearLayout vertical já mostrado anteriormente e adicionarmos algumas poucas linhas apenas para permitir a adição de funcionalidades a esta aplicação que estamos criando. Faremos os botões funcionar apenas para não deixar a aplicação estática.
Copie o código abaixo, onde as linhas marcadas em amarelo foram adicionadas:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="OnButton1"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="OnButton2"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="OnButton3"
android:text="Button" />
</LinearLayout>
As linhas acima foram adicionadas para informar ao android quais rotinas deverão ser chamadas quando um botão for acionado. Para finalizarmos, vamos alterar o programa principal para implementar estas rotinas.
Para isto, abra o arquivo src/MainActivity.java efetuando um duplo clique sobre o mesmo no Package Explorer :
O código original deve ter sido criado semelhante ao código abaixo:
package com.example.entendendolayouts;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Faça a modificação adicionando o seguinte trecho abaixo:
package com.example.entendendolayouts;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View; // Para declaracao dos eventos dos botoes
import android.app.AlertDialog; // Para exibicao do message box
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
public void OnButton1(View v ) {
ShowMsgBox("O Botao 1 foi pressionado.");
}
public void OnButton2(View v) {
ShowMsgBox("O Botao 2 foi pressionado.");
}
public void OnButton3(View v) {
ShowMsgBox("O Botao 3 foi pressionado.");
}
private void ShowMsgBox(String text) {
AlertDialog.Builder dialogo = new AlertDialog.Builder(this);
dialogo.setTitle("Aviso");
dialogo.setMessage(text);
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
}
Executando a aplicação você poderá pressionar cada um dos 3 botões disponíveis na tela de interface da aplicação.
No próximo post explicaremos o RelativeLayout.
