Jogo BrainTrainer para Android – Parte 2
Autor: André de Lima | Publicado: 2011-09-15T06:59:00-07:00

Bom dia a todos,



Primeiro de tudo,
desculpem a demora aí de quase uma semana para postar a segunda
parte do tutorial de como montar um jogo no estilo BrainTrainer
apenas utilizando elementos que já falamos aqui no blog e alguns
conceitos de programação, mas minha rotina está uma doidera e
quase não tive tempo de estudar Android, que o diga montar um post
mais elaborado, mas agora vamos para o que interessa: o Layout!



Lembrando que sou
péssimo em layout, então se vocês, leitores, acharem melhor
trabalhar de uma outra maneira o layout, sem problemas. Aqui passo
apenas o básico, no meu caso tratando-se de layout, seria meu
avançado ¬¬



<!--
		@page { margin: 2cm }
		P { margin-bottom: 0.21cm }
	-->
	




Vamos listar os
elementos que teremos:


Um campo
		&lt;TextView&gt; para a String “Score:”;


Um campo
		&lt;TextView&gt; que exibirá o valor da pontuação do jogador;


Um campo
		&lt;TextView&gt; que exibirá o valor referente ao primeiro número;


Um campo
		&lt;TextView&gt; que exibirá o sinal da operação de acordo com o
		que tiver sido sorteado;


Um campo
		&lt;TextView&gt; que exibirá o valor referente ao segundo número;


Um campo
		&lt;EditText&gt; para o usuário digitar a resposta;


Um campo &lt;Button&gt;
		onde o usuário irá clicar para enviar a resposta ao sistema e
		este iniciar as verificações.





Primeiro iremos pensar
nos dois campos  que se referem a String “Score:”.
Iremos colocá-los lado a lado. Ou seja, precisaremos de uma maneira
de ao invés de alinhá-los verticalmente, alinhá-los
horizontalmente. Para isso, iremos criar dentro do 
principal, outro  com uma pequena diferença: ao invés de utilizarmos o atributo android:orientation=“vertical”, utilizaremos o valor da
orientação do layout como horizontal resultando
[i]android:orientation=“horizontal”.



Dentro desse layout
iremos adicionar os dois  referentes a pontuação do
jogador. Atente no fato de que precisamos criar um nome de 'id' para
o  que exibirá o valor da pontuação do jogador. No
meu caso, utilizei o nome 'score_text', mas isso fica de acordo com
cada um, lembrando que alterando o nome do 'id' no main.xml o
nome no código-fonte também deverá ser alterado. O código xml
ficará similar ao da imagem abaixo:




Layout 'header' com orientação horizontal e dois 



Certo. Então criamos o
'header' do nosso jogo. Agora precisamos criar o corpo dele no qual
será exibido os dois números juntamente com o sinal da operação.



Como no passo anterior,
precisaremos criar um  com orientação
'horizontal'. Isso porque queremos que apareça o primeiro número,
ao lado dele o sinal e do lado do sinal mostraremos o segundo número.
O código fica semelhante ao do layout anterior, por isso não irei
explicar detalhado.




Layout 'body' com orientação horizontal e três 










	<!--
		@page { margin: 2cm }
		P { margin-bottom: 0.21cm }
	-->
	




E por último nosso
layout onde estará o &lt;EditText&gt; e o &lt;Button&gt;. Contudo, o
&lt;LinearLayout&gt; que utilizaremos para os dois componentes
citados terá a orientação 'vertical' assim como seu pai.




Layout 'user' com orientação vertical, um &lt;EditText&gt; e um &lt;Button&gt;






Agora sim. Depois de
terminarmos nosso layout podemos rodar o código e ver como ficou.
Provavelmente algo semelhante a imagem abaixo será exibido e se você
chegou até aqui, agora é só programar as funcionalidades e teremos
um BrainTrainer básico para jogar.




Layout final






	<!--
		@page { margin: 2cm }
		P { margin-bottom: 0.21cm }
	-->
	




Até a próxima e um
grande abraço para todos.