Programar para Android - 04

Try02 - Layout com XML.

Vamos criar um layout exatamente idêntico ao criado no Try01, mas usando apenas os ficheiros XML diretamente.

Começamos por criar um projeto Android chamado Try02.
Por uma questão de criação de bons hábitos vamos abrir os ficheiros Try02Activity.java, res/layout/main.xml e res/values/strings.xml, mas na verdade nem sequer vamos mexer no .java.
Mudamos o main.xml e strings.xml para a vista de XML.

Ao contrário do modo de edição gráfico, em que vamos fazendo as coisas à medida que nos lembramos, do tipo "ah, preciso aqui duma string, click direito e adiciono-a", o modo XML exige que se pense um pouco antes de começar a editar.
Neste caso já sabemos bem o que pretendemos, por isso podemos ir diretamente ao ficheiro strings.xml e adicionar as strings que precisamos, que são:

• uma string tvName com o valor "Nome", para aparecer como legenda de uma caixa de texto;
• uma string btOk com o valor "Ok", para aparecer no botão.

A estrutura do strings.xml é bastante simples de perceber e para adicionar as duas strings basta acrescentar duas linhas dentro do resources ... /resources. Fica assim (as linhas adicionadas estão a negrito):

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="hello">Try02Activity</string>

    <string name="app_name">Try02</string>

    <string name="tvName">Nome</string>

    <string name="btOk">Ok</string>

</resources>

Também mudamo a mensagem de "Hello World" para aparecer apenas o nome da atividade.

O main.xml já dá mais um pouco de trabalho, mas nada de muito difícil.

Temos de pensar primeiro na estrutura que queremos criar. No topo tem de existir sempre um layout, que no nosso caso é um LinearLayout vertical. Dentro dele vamos colocando os outros elementos e outros layouts. Assim:

• LinearLayout vertical
• TextView "Try02Activity"
• LinearLayout horizontal
• TextView "Nome"
• TextField editText1
• Botão "Ok"

O main.xml criado pelo Eclipse já tem o layout vertical e a primeira TextView, só temos de acrescentar o resto, usando o que já lá está como guia (as linhas acrescentadas estão a negrito):

<?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/hello" />

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="@string/tvName" />

        <EditText

            android:id="@+id/editText1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:ems="10" />

    </LinearLayout>

    <Button

        android:id="@+id/button1"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/btOk" />

</LinearLayout>

Algumas coisas são óbvias, outras nem por isso.

Um elemento <LinearLayout> precisa sempre de um </LinearLayout> a fechar, porque um layout pode conter um número indeterminado de elementos, mas um elemento TextView, EditText, Button, etc não precisa da tag a fechar.

Todos os elementos (layouts ou não) precisam de pelo menos as propriedades android:layout_width e android:layout_height definidas. O valor fill_parent indica que o elemento deve estender-se para encher a área disponível no elemento "pai". O valor wrap_content indica que o elemento deve ocupar apenas o espaço necessário.

Os elementos gráficos precisam de um android:id. Observamos que todos os id aqui presentes começam com um @ e que as views (é como são conhecidos os widgets no Android) têm um @+, enquanto que as strings têm um @ sozinho.

O @ indica que não queremos que o que está escrito dentro das "" seja escrito literalmente, mas que seja procurada a referência nos recursos (ou seja algures em res/). No caso das strings o @string/btOk significa "procura nas strings uma com o id btOk". No caso das views o @+id/button1 significa "cria um identificador para esta view chamado button1". Ou seja o + é usado para criar um novo id. Se houver mais tarde uma nova referência a este botão bastaria usar @id/button1.

Também é possível referenciar recursos disponibilizados pelo próprio Android com @android:id/qq_coisa, mas lá iremos.

Se os elementos tiverem algum conteúdo de texto este é definido com android:text. Podemos fazer uma pequena experiência que é acrescentar a linha android:text="Escreva o seu nome" ao EditText. Se corrermos agora a aplicação aparece o texto "Escreva o seu nome" na caixa de edição. Já sabemos que não é boa ideia ter strings hardcoded na aplicação, por isso se quisermos realmente que apareça uma mensagem devemos criar uma string no strings.xml e colocar aqui o seu id.

A propriedade android:ems="10" do EditText parece um pouco mais obscura. Define a largura mínima do campo, que neste caso é de 10 ems. E o que é um "ems"? É a largura da letra mais larga, que é a letra "M", daí o nome. Ou seja, é o número de M's que cabem no campo.

E cá está, mais um programa que não faz nada, sem escrever uma única linha de código.