quinta-feira, 10 de novembro de 2011

Criando o primeiro aplicativo para Android

Agora que você já tem um ambiente de programação para Android no seu PC, vamos criar um aplicativo simples para trabalhar com alguns conceitos de programação dentro do Eclipse. Este aplicativo apresentará ao usuário uma imagem de um dado. Ao tocar no dado, o aplicativo sorteará um número aleatório de 1 a 6 e o exibirá numa imagem.

Para começar, abra o Eclipse, clique em File, New, Project. Selecione Android Project, como na imagem abaixo e clique em Next.

Figura 1: Criando um novo projeto Android.

O Eclipse pedirá um nome para o projeto. Digite "RollingDiceProject". Esse nome será usado internamente dentro do Eclipse. A seguir clique em Next.




Figura 2: Defina um nome para o projeto.

Escolha agora o Build Target do seu projeto. Isso quer dizer, seu aplicativo usará funções de que versão do Android. No Android 2.2 por exemplo há o excelente recurso de instalar o aplicativo no cartão de memória.

Figura 3: Escolhendo o Build Target.

Na próxima tela você definirá o nome do aplicativo, que é aquele que o usuário vê. Eu darei o nome de "Rolling Dice". Fique livre para batizar seu primeiro projeto como quiser. 

Também nessa tela você definirá o nome do pacote. O nome do pacote deve ser único e exclusivo do seu aplicativo. É por meio dele que seu programa será identificado dentro dos aparelhos Android. Não podem ser instalados dois aplicativos com o mesmo Package Name. O último que for instalado substituirá o primeiro.

Digite um nome para a Activity. Activity é uma classe em Android que permite criar uma janela e exibir informações ao usuário. Por último, escolha a versão mínima do Android que rodará seu aplicativo e clique em Finish.



Agora no Package Explorer, procure pelo nome RollingDiceProject, abra-o, e dê um duplo clique sobre o arquivo "main.xml". Veja que abrirá ao lado uma exibição (layout) da tela principal do aplicativo. Ela contém apenas uma frase padrão do Android dentro de um TextView que, claro, pode ser excluída ou modificada. Um TextView é um objeto usado para exibir conteúdo textual.

Figura 4: Package Explorer.

Aqui cabe uma breve explicação sobre as partes que compõem o projeto.

SRC: Contém os códigos-fonte em java do aplicativo.
GEN: São arquivos gerados pelo compilador. Geralmente não é necessário mudar nada aqui. 
ASSETS: Este item funciona como uma gaveta dentro do aplicativo. Você pode guardar arquivos aqui dentro que serão utilizados mais tarde pelo programa, como arquivos de texto ou algum banco de dados. 
RES: Onde ficam armazenados os recursos (resources) do aplicativo, como imagens, ícones e também o design da tela do aplicativo (chamado de layout).

Vamos então alterar o texto que está escrito na tela. Clique com o botão direito do mouse sobre o texto "hello world" e escolha a opção "Edit Text...". Na caixa que se abrir, clique em "New String...". Na nova caixa, digite "Toque no dado para jogar!" para String e "string1" para New R.string, como na figura abaixo. Clique em OK duas vezes para confirmar a alteração e observe o comportamento do seu layout.

Figura 5: Altere o texto do TextView.


Agora clique com o botão direito sobre o nosso TextView, selecione a propriedade Layout Width e altere-a para "wrap_content". Isso é necessário para que possamos centralizar nosso objeto dentro da tela. Para isso, no canto direito da tela, clique com o botão direito sobre LinearLayout, selecione a propriedade Gravity, e depois Center Horizontal, como na figura abaixo. Pronto, observe como a tela do aplicativo se comporta.

Figura 6: Defina a propriedade Gravity do Linear Layout.

Agora vamos importar para dentro do aplicativo as imagens que vamos usar. Você pode criar as suas próprias ou usar essas minhas imagens estilosas aqui de baixo :D.

Figura 7: Imagens estilosas que usaremos no aplicativo.

Você pode baixar as figuras que usaremos no tutorial neste link.

Dentro do Package Explorer, na pasta do projeto, abra o item "res", e clique com o botão direito em "drawable" e selecione Import. Na janela que se abrir, selecione File System e clique em Next. Depois clique em Browse e selecione a pasta onde você salvou as imagens. Selecione as imagens e, por fim, clique em Finish.

Agora vamos inserir um ImageView dentro do nosso aplicativo. Um ImageView, como o nome sugere, é um objeto que exibe uma imagem. Procure pela guia Images & Media no Eclipse, clique sobre o ícone indicado na figura e arraste até a tela do seu aplicativo.

Figura 8: Acrescentando um ImageView ao nosso Layout.

O Eclipse perguntará qual Resource você quer exibir. Vamos escolher d1. Clique em OK. À direita, na guia Outline, clique com o botão direito sobre "imageView1" e selecione "Edit id...". Vamos dar o nome de "imgDiceFace".

Figuta 9: Escolhendo a figura do imgDiceFace.

Pronto. Nosso layout está finalizado. Agora vamos escrever, literalmente, nossa aplicação.

Dentro do nosso projeto no Package Explorer, dê um duplo-clique sobre o arquivo RollingDiceActivity.java. Veja que o nosso código-fonte aparece no centro da tela. A seção imports diz ao compilador quais funções nós estamos usando dentro do arquivo .java. É semelhante à seção uses do Delphi e à seção include do C++.

Figura 10: Começando a escrever o código.

Agora atente para a linha: 
  • setContentView(R.layout.main);
Essa linha de código define que será exibido na tela principal aquele nosso layout criado há pouco (chamado de main).

Durante o funcionamento do aplicativo, para que possamos exibir o dado durante o sorteio precisamos implementar uma Thread. Thread (tarefa) é um conceito bastante útil em programação, pois permite que seja executada mais de uma tarefa ao mesmo tempo. No caso do nosso aplicativo, enquanto ele faz o sorteio, ele exibe o dado "rolando" ao mesmo tempo.

Acrescente na linha a seguir o trecho marcado em laranja.

public class AppRollingDice extends Activity implements Runnable {

Agora observe que apareceu um X vermelho no início desta linha. Isso quer dizer que o Eclipse encontrou algum erro no código. Clique sobre o X e então o Eclipse irá sugerir correções automáticas. Depois dê um clique duplo em "Add unimplemented methods". Assim, será adicionado um novo método ao código.

Figura 11: Implementando o método run().

Após a linha abaixo nós vamos declarar as variáveis que serão usadas no nosso aplicativo.

/** Called when the activity is first created. */

ImageView imgDiceFace;
Handler h;
Thread t;
int i;
A primeira variável do tipo ImageView irá fazer referência a nossa imagem do dado, para que possamos capturar o evento OnClick (que é disparado quando o usuário toca a imagem) e também para que possamos mudar a imagem.

As variáveis h e t servem para fazer a Thread funcionar corretamente. A última, chamada de i, funcionará como um contador de quantas vezes o dado será "girado" antes de apresentar o resultado.

Agora vamos capturar o evento OnClick da imagem.

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView imgDiceFace = (ImageView) findViewById(R.id.imgDiceFace);
        
  imgDiceFace.setOnClickListener(new View.OnClickListener() {
  @Override
    public void onClick(View v) {

      h = new Handler();
      t = new Thread(RollingDiceActivity.this);
      t.start();
    }
  });   
}

O que o código acima faz é indicar ao compilador que o ImageView que queremos manipular é aquele chamado imgDiceFace, nome definido agora há pouco. Depois disso, o código verifica quando o ImageView é tocado e então chama o método run(), que será escrito agora.

Adicione as linhas a seguir para que seu código fique como o abaixo:

public void run() {
  i = 0; //inicializa a variável
  try {
    while (i<=50) { //i = quantidade de vezes que o dado "rola"
      i++;
      Thread.sleep(50); //o dado demora 50 ms para cada vez que "rola"
      h.post(new Runnable() {

@Override
public void run() {
int face = 0;
face = (int)(1 + Math.random() * 6);
//face contém um número inteiro aleatório que varia de 1 a 6

ImageView imgDiceFace = (ImageView) findViewById(R.id.imgDiceFace);

   
if (face==1) imgDiceFace.setImageResource(R.drawable.d1);
else if (face==2) imgDiceFace.setImageResource(R.drawable.d2);
else if (face==3) imgDiceFace.setImageResource(R.drawable.d3);
else if (face==4) imgDiceFace.setImageResource(R.drawable.d4);
else if (face==5) imgDiceFace.setImageResource(R.drawable.d5);
else if (face==6) imgDiceFace.setImageResource(R.drawable.d6);
}
      });
    }
  } catch(Exception e) {}
}

Esse código que você acabou de acrescentar usa um loop (laço), que é uma estrutura em programação usada para repetir as instruções até que uma determinada condição seja preenchida. Nesse caso, as linhas pertencentes ao while serão repetidas enquanto a variável i for menor ou igual a 50. Como a cada repetição o inteiro i será acrescido de uma unidade (i++;), a sequência será repetida 50 vezes, ou seja, o dado será "rolado" 50 vezes.

Dentro do while é feita a chamada à Thread que se encarregará de mudar a imagem do dado enquanto o sorteio acontece. Aí é gerado um número aleatório que varia de 1 a 6, correspondente à face do dado. O método Math.random() gera um número no intervalo [0.0,1.0), ou seja, entre 0 (inclusive) e 1 (exclusive), ou entre 0.0 a 0.9999....

Logo após, o código testa a variável: se i igual a 1, exibe a face número 1 do dado; ou então se i igual a 2, exibe a face número 2 do dado... e assim vai até o número 6.

Por fim é feita uma captura de exceção (try {} catch(e){}) - que é obrigatória quando se usa Thread - para que o programa não trave se por acaso houver algum erro durante a execução.

Uma última dica. Se o Eclipse não colocou automaticamente todos os imports necessários, use o atalho Ctrl+Shift+O para que ele importe agora.

Pronto. Se você seguiu corretamente tudo o que foi dito aqui, seu primeiro aplicativo está pronto ser testado!

Salve seu projeto. Para testar, clique na setinha verde, na parte superior do Eclipse, ou tecle Ctrl+F11. Selecione Android Application e então clique em OK. Agora é só aguardar o Emulador carregar e observar o aplicativo funcionar do jeito que você programou. Sinta o poder que você tem em suas mãos!

Figura 12: Testando o aplicativo.

Figura 13: Aplicativo rodando sobre o emulador.

Se você quiser, pode baixar o código-fonte deste aplicativo clicando aqui.

Ficou alguma dúvida? O tutorial foi útil para você? Deixe um comentário aqui em baixo!

Se você encontrou qualquer erro, não deixe de avisar.

Nenhum comentário:

Postar um comentário