Programar para Android - 03

Try01 - Layout com o editor gráfico.

Vamos fazer mais uns TryXX até conseguirmos fazer um programa que realize algum trabalho útil (se bem que não muito) lá pelo Try07.

Android usa intensamente o interface gráfico, por isso alguma forma haverá de definir o interface gráfico de uma atividade. Na verdade existem 3 formas: usando métodos Java, usando ficheiros XML e usando o editor de interface gráfica incluído no Eclipse. É claro que o editor do Eclipse é o mais fácil de usar, mas por vezes temos de usar um dos outros métodos. Se, por exemplo, a informação que queremos mostrar é obtida em runtime temos de usar o Java para definir os elementos gráficos.

Neste try vamos começar por usar o editor do Eclipse. Criamos um novo projeto Try01. O Eclipse cria o Hello World do costume. Tipicamente há 3 ficheiros que vamos usar muito: o .java da atividade, o res/value/strings.xml e o res/layout/main.xml, por isso podemos começar por abrir os três.
Já usámos estes três ficheiros no Try00, mas aí limitamo-nos a apagar coisas.

No editor visual do main.xml, vemos uma grande quantidade de informação, o que ao princípio pode ser intimidante.

No lado direito temos uma janela "Outline", que apresenta todos os elementos gráficos, organizados em árvore. Cada elemento gráfico fica dentro de um "layout". O pré-definido é o layout linear vertical (LinearLayout, que é vertical vê-se porque o ícone ao lado apresenta umas caixas empilhadas verticalmente). Há vários (neste momento 8) tipos de layout, mas quase sempre se usam apenas o LinearLayout vertical e horizontal. É possível (e muito comum) colocar um layout dentro de outro layout.
Na janela do main.xml propriamente dito temos dois separadores na base (estilo separadores do Excel) onde podemos ver o Graphical Layout ou XML do ficheiro. Neste try vamos ficar pelo graphical layout, mas podemos sempre dar uma olhadela ao XML, para ver como fica.
Este try não faz nenhum trabalho útil, mas a ideia é criar um layout várias linhas, em que há:

• um texto na primeira linha (já lá está, é o hello world);
• um texto e uma caixa de entrada na segunda linha (lado a lado);
• um botão na terceira linha (o botão é suposto ocupar toda a largura do écrã).

Bem, o texto do hello world já está no sítio, por isso nem lhe mexemos por enquanto.
Com o grupo "Form widgets" selecionado na palete, basta arrastar um TextView para a área do editor gráfico para criar a respetiva área de texto. Um TextView é o que noutros ambiente se chamaria uma Label (ou JLabel). É um texto estático, não interativo. A palette apresenta 4 TextView, a de tamanho normal (TextView), grande (Large), um pouco maior (Medium) e mais pequena (Small). Para este try escolhemos o que nos apetecer no momento. É claro que depois de introduzir a TextView lhe podemos mudar o tamanho (e mais uma tonelada de outras propriedades), mas vamos KISS e usar só o que está na palette.

Agora adicionamos o campo de entrada de texto. Esses campos estão no grupos Text Fields da palette. Há muito tipos, para texto, números, datas, passwords, etc. Escolhemos logo o primeiro e arrastamos para o editor gráfico. O campo de texto fica por baixo (ou por cima, depende de onde o largarmos) do TextView, mas nós queremos que fique ao lado. Não vale a penas arrastar mais, estamos a colocar os elementos dentro de um layout vertical, por isso ficam sempre na vertical. Temos de adicionar um layout horizontal. Estão no grupo Layouts.
Ao arrastar um LinearLayout horizontal, cria-se uma zona retangular vazia. Arrastamos agora o TextView e o Text Field para dentro deste retângulo. Por arrastamento é possível controlar qual fica à esquerda e à direita (prestar atenção às linhas amarelas que aparecem). O aspeto não fica muito bom (o texto deve ficar muito apertado), mas já vamos tratar disso a seguir.

Pro fim arrastamos um botão (está nos Form Widgets, há botões normais e pequenos) para baixo do LinearLayout horizontal. Mas o botão não ocupa a largura toda do écrã. Logo acima da pré-visualização do aspeto gráfico da atividade há uma série de botões. Com o botão selecionado vemos os seguintes:

Os dois primeiros controlam o tipo de layout (vertical ou horizontal) em que o elemento atual (neste caso o botão) está inserido. O terceiro e quarto controlam se o botão ocupa a largura/altura completa do écrã. Clicamos no terceiro. Os restantes botões controlam outras propriedades mais comuns do botão. Mais uma vez, estas propriedades podem ser alteradas na lista de propriedades do botão, esta barra de ferramentas é apenas um atalho para as propriedades mais comuns.

O aspeto da segunda linha (a que tem a TextView e o Text Field) também se pode melhorar com este botão. Provavelmente o melhor é desligar esta opção nos dois widgets.

Agora vamos tratar das strings.
Vamos supor que o campo de texto é para escrever o nosso nome e que, portanto, a TextView à esquerda deve ter a string "Nome".
Ao clicar nesta TextView vemos no Outline que é selecionado o "textView1". É o nome do objeto associada ao widget. Fazendo click direto sobre a TextView (ou sobre o seu identificador no Outline) aparece um menu de contexto. Precisamos da primeira opção, Edit Text...
Aparece uma caixa de diálogo com as strings definidas para a nossa aplicação. Por enquanto devem lá estar duas. Vamos criar uma terceira em New String... Em String colocamos o que queremos que apareça no écrã, neste caso "Nome" (sem aspas). Em New R.string colocamos o identificador que vai identificar este texto, por exemplo tvName (o tv é de TextView, mas é claro que se pode escolher outra coisa). Há mais uma série de propriedades que se podem editar, mas não lhes vamos mexer.
Depois de clicar em Ok, se formos espreitar ao ficheiro res/values/strings.xml, já lá está a nossa string.
Vamos agora editar o texto do botão. Click direito e Edit Text... Vamos criar uma nova string com o texto Ok e o id btOk.

Se queremos mudar o texto do "Hello World...", temos de ir ao strings.xml e alterar lá o valor da string.
Podemos agora correr o projeto.

Não faz absolutamente nada, mas está mais bonito.