Jogo BrainTrainer para Android – Parte 2

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 ¬¬

Vamos listar os elementos que teremos:

• Um campo <TextView> para a String “Score:”;
• Um campo <TextView> que exibirá o valor da pontuação do jogador;
• Um campo <TextView> que exibirá o valor referente ao primeiro número;
• Um campo <TextView> que exibirá o sinal da operação de acordo com o que tiver sido sorteado;
• Um campo <TextView> que exibirá o valor referente ao segundo número;
• Um campo <EditText> para o usuário digitar a resposta;
• Um campo <Button> 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

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

Layout 'user' com orientação vertical, um <EditText> e um <Button>

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

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