Tutorial Android (Parte II)
Por Abner Matheus Costa de Araújo
(abner.araujo@ccc.ufcg.edu.br)
No tutorial da edição anterior, aprendemos um pouco sobre a plataforma Android e criamos nosso primeiro projeto. Nesta edição, falaremos sobre os layouts que o Android oferece e como usá-los.



Explorando a interface gráfica

Vamos explorar mais algumas possibilidades que a interface gráfica do Android oferece. Ainda usando o projeto anterior, vá em res > layout > activity_main.xml e tente acessar o arquivo XML. Perceba algo interessante…

Além de Button e TextView, temos uma tag chamada “RelativeLayout” que é pai das outras duas. O que essa tag faz? O que um layout faz?

Um layout nada mais é do que um container de elementos responsável por organizá-los na tela de alguma forma. No Android existem vários tipos de layouts, dentre eles os mais comuns são: LinearLayout e RelativeLayout. Vamos explorar detalhadamente o que cada um desses layouts faz.



LinearLayout

LinearLayout é um dos layouts mais simples. Ele organiza os elementos dentro dele de forma linear, podendo ser de maneira horizontal ou vertical.

Muito simples! Vamos testar? A seguir adicionarei três botões:

Preste atenção em dois detalhes: O primeiro, o fato de ter mudado o nome da tag de “RelativeLayout” para “LinearLayout”. Isso é padrão se quisermos usar o LinearLayout. Outro detalhe é que adicionamos um novo atributo ao nosso layout: “android:orientation”. O que isso faz?

android:orientation é um atributo válido apenas para o LinearLayout. Ele define se queremos alinhar nossos elementos de maneira vertical ou horizontal. Neste caso, eu usei o vertical. Você consegue imaginar como ficará minha tela? Pense um pouco…

.

.

.

.

.

Se você imaginou algo do tipo:

Muito bem! Você já está craque em LinearLayout. :)



RelativeLayout

O RelativeLayout difere do LinearLayout por não organizar os elementos dentro dele de maneira automática: Você deve dizer explicitamente a posição de cada elemento, e essa posição é sempre relativa à posição de outro elemento, ou até do pai, daí o nome: RelativeLayout.

Para não ficar muito abstrato, vamos estudar dois casos:

1) Alinhar um elemento um abaixo do outro (simular o efeito do LinearLayout):

E aqui eu chamo atenção pras partes em vermelho: Pra cada elemento estamos definindo dois atributos diferentes: O id (estudamos com detalhes sobre o ID na aula passada. Se não recorda, vale a pena dar uma olhadinha…) e o “android:layout_below”. Como o nome sugere, esse atributo é responsável por posicionar o elemento abaixo de outro, esse outro sendo representado pelo seu id. Simples, não? Existem muito mais opções!

2) Posicionar um botão no começo, outro no centro e outro no fim.

O código acima está bem legível de entender:

O atributo “android:layout_alignParentTop” posiciona o elemento no topo da tela.

O atributo “android:layout_centerVertical” posiciona o elemento no centro vertical da tela.

E o atributo “layout_alignParentBottom” posiciona o elemento no rodapé da tela.

Como você pode ver, o RelativeLayout é mais robusto que o LinearLayout, mas é necessário definir o id de todos os elementos dentro dele, já que o posicionamento depende desses ids, e isso pode ser cansativo… O LinearLayout é uma versão simplificada dele.

DICA: digite “android:layout_” no Eclipse e pressione CTRL+SPACE para autocomplentar. Você verá muito mais opções interessantes!



O atributo “weight”:

Por questões de simplicidade, voltemos ao LinearLayout. O que acontece se eu quiser alinhas meus botões, ao invés de verticalmente, horizontalmente?

E o resultado é…

Oops…! Parece que apenas o Botão 1 está aparecendo. Por que será? : (

Voltemos ao arquivo XML… Como está definida a largura do botão 1?

Exato, ele está definido pra ocupar a tela toda. O que acontece quando três elementos querem ocupar a tela toda? Apenas um deles vai conseguir, no caso, o primeiro. Para consertar esse problema, existem três soluções:

1. Definir “android:layout_width” como “wrap_content”

Não é uma solução muito boa. Por quê? Porque pode ser que haja espaço sobrando depois do terceiro botão. Não fica esteticamente bonito.

2. Definir um tamanho fixo.

Também não é uma solução muito boa, pelos motivos descritos acima.

3. Definir em relação a uma porcentagem

Essa sim é uma solução muito boa! Por que não fazer com que os botões ocupem, cada um, ? da largura da tela? Seria massa, não é? E como faço isso? É simples! Usando o atributo “android:layout_weight”.

“android:layout_weight” assume valores entre 0 e 1, onde 0 corresponde à 0% da tela e 1 igual a 100% da tela. Como queríamos que cada um ocupasse ?, usamos o valor 0.33.

Outro detalhe importante a ressaltar é que zeramos suas larguras. Não é necessário definir uma largura ou altura quando estamos trabalhando com o “weight”, já que ele já faz esse ajuste pra nós. Se vamos zerar a largura ou a altura, isso depende da orientação do seu layout.



Nested layouts

Trabalhar com um único layout não é nada interessante. Na prática, estamos interessados em mesclar vários layouts numa mesma janela pra facilitar nosso trabalho. Veja o seguinte exemplo:

O que o código acima faz? Pare pra pensar um pouquinho…

.

.

.

.

.

Se você imaginou:

Parabéns! Você já entendeu intuitivamente o conceito de Nested Layout.

Nested Layout nada mais é do que adicionar um layout dentro do outro. No caso acima, usamos outro LinearLayout com orientação diferente para ser possível alinhar alguns elementos de maneira vertical e outros de maneira horizontal. Não é bacana?



Exercício 2.1

Implemente o seguinte layout usando botões e o conceito de RelativeLayout e weight:



Revisão

1. LinearLayout

Layout que alinha todos os elementos dentro dele em linha. Pode ser de dois tipos: vertical e horizontal.

2. RelativeLayout

Layout que alinha os elementos em relação a outros.

3. Atributo weight

Usado quando queremos definir a dimensão do elemento em relação a uma fração do tamanho do pai.

4. Nested layouts

Técnica de usar um ou mais layouts dentro de outros para obter um efeito visual que seria difícil de obter com apenas um layout.

Com isso terminamos esse tutorial. Esperamos que tenham gostado e não percam o próximo e último tutorial dessa série onde falaremos sobre activities e como navegar entre eles.


Jornal PETNews - Edição: Rafael Rêgo e Julie Pessoa- Revisão: Lívia Sampaio e Gleyser Guimarães
Grupo PET Computação UFCG, 2013. All rights reserved.