Layouts XML em Android

Fala galera!

Hoje vamos aprender um pouco sobre layouts XML em Android. Para isso, vamos criar um novo projeto e utilizá-lo em todos os nossos tutoriais seguintes, a fim de criarmos um aplicativo completo.

Seguindo os passos no tutorial anterior (Hello World em Android), vamos criar um projeto chamado Tutorial YESbr, onde a classe principal será chamada ListaCarros.

Depois de criado, vamos observar a estrutura de diretórios do projeto. Inicialmente, vamos trabalhar apenas com 3 diretórios: src, res/layouts e res/values. No diretório src ficam os arquivos .java dentro dos respectivos pacotes, onde colocamos toda a programação. No diretório res/layouts ficam os arquivos XML dos layouts, e no diretório res/values ficam as constantes do sistema.

Layouts XML em Android

Vamos começar a edição do layout principal. Abrindo o arquivo activity_main.xml, vamos observar a seguinte estrutura:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="br.com.yesbr.tutorial.ListaCarros" >
 
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/hello_world" />
 
</RelativeLayout>

Se você já trabalhou com Swing no Java, fica mais fácil entender a estrutura.

Os layouts são organizados em elementos, representados no código fonte por tags, e são distribuídos de forma hierárquica.

No layout criado automaticamente, podemos observar dois componentes:

• RelativeLayout: é um container, onde serão adicionados outros componentes. Nesse layout os componentes são “flutuantes”, ou seja, sem alinhamento padrão.
• TextView: é um elemento de texto. Neste caso, está imprimindo a constante @string/hello_world (mais abaixo vamos falar sobre as constantes).

Inicialmente, vamos apenas modificar nosso layout para o código abaixo. O objetivo do aplicativo é obter a lista de carros que estão/serão cadastrados. Para isso, vamos utilizar quatro elementos:

• LinearLayout: outro tipo de container, porém neste os elementos são inseridos um após o outro. dependendo da orientação do layout.
• EditText: uma caixa de texto para inserção de informação.
• Button: botão que irá executar uma ação.
• ListView: obtém uma lista previamente submetida.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
 
   <EditText
       android:id="@+id/veiculo"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="@string/veiculo" >
 
       <requestFocus />
   </EditText>
 
   <Button
       android:id="@+id/salvar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/salvar" />
 
   <ListView
       android:id="@+id/lista"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" >
   </ListView>
 
</LinearLayout>

Todos os atributos dos componentes são precedidos por android:, indicando ser um atributo android.

O LinearLayout adota uma orientação vertical, ou seja, os elementos são inseridos um abaixo do outro. layout_width e layout_height indicam largura e altura respectivamente, e foram configurados como fill_parent para preencher toda a área disponível.

EditText nada mais é que um campo de texto (tipo input type=text em HTML). Para ele, definimos o id “veiculo”, pois iremos na programação do projeto. Note que, antes do id, existe um prefixo “@+id/”, que indica o tipo de informação (neste caso, id). Definimos layout_width como match_parent (parecido com full_parent) e layout_height como wrap_content (ajuste de acordo com o conteúdo. O atributo hint é um texto prévio que vem no campo, semelhante ao “placeholder” em HTML. Também foi adicionado uma tag requestFocus dentro da tag EditText, que faz o campo já esteja pronto para digitação.

Button é o botão que irá chamar uma ação, simples assim. Para ele, foi definido o id “salvar”. layout_width e layout_height foram definidos como wrap_content. O texto do botão é definido pelo atributo text, neste caso com a constante @string/salvar.

ListView será identificado pela id lista, e layout_width e layout_height foram definidos como match_parent e wrap_content respectivamente.

Executando o projeto, vamos obter o seguinte resultado:

Constantes

As constantes são variáveis que não mudam (óoooh). Elas são definidas dentro do diretório res/values quando serão utilizadas em mais de um local, não tendo a necessidade de sempre criar uma por uma. Por padrão, o Eclipse cria três arquivos de constantes: dimens.xml, strings.xml e styles.xml. Pelo nome deles, você com certeza já compreendeu o que cada um deles armazena.

MAS E OS IDs?

Os IDs dos componentes ficam salvos em outro arquivo, a classe R. Essa classe possui todas as referências para os recursos da aplicação. Está localizada no diretório gen/nome_do_pacote, e o próprio Eclipse se encarrega de atualizá-lo quando necessário, e quando o projeto não apresenta nenhum erro. A classe R NUNCA deve ser alterada ou deletada.

Considerações Finais

Por enquanto, nosso projeto não faz o tratamento dos dados. Por enquanto…

Nos próximo post, vamos aprender a tratar os dados e salvar na memória. Não perca!

Baixe o projeto do Eclipse aqui.

DICA: Existe uma ferramenta online, gratuita, para edição de arquivos de layout XML em Android. É o DroidDraw.

Até mais!