quarta-feira, 1 de agosto de 2012

A primeira aplicação - Mãos no código

Olá a todos,

Como disse no post anterior, a minha intenção era não fazer o nosso primeiro código no formato de um Hello World, mas fazer um aplicativo com um pouco de funcionalidade e que pudéssemos ver alguns recursos da plataforma Android. Pensei em reescrever o meu primeiro código em Android e postar aqui, mas ache interessante começar algo do zero. Foi a melhor escolha que pude fazer, pois descobri que há recursos muito interessantes nas últimas alterações do ADT plugin para o Eclipse. Antes das atualizações, ao iniciar uma nova aplicação, poucos da aplicação era configurado no assistente. Agora temos 5 telas antes de começar o projeto, que ajudam muito.

No post anterior criamos a AVD para executar nosso aplicativo, hoje iremos fazer uso dela. Mas para isso teremos que ter algo construído, bom vamos criar nosso primeiro projeto.

Entre no Eclipse e vá até o menu File > New > Java Project...
O assistente será iniciado como a próxima imagem. Nesta tela você pode escolher o tipo de projeto que deseja criar. No nosso caso será Android Application Project, mas se você reparar, irá perceber que temos templates prontos para outros tipos de aplicativos sem ser Android.

Clique em Next e você verá a tela para configuração de nome, pacote, build e localização do código do seu projeto.
Application Name é o nome que seu aplicativo terá na Play Store
Project Name é o nome do projeto para ser gerenciado pelo Eclipse
Package Name é o nome do pacote onde seu código será agrupado
Build SDK é a versão do SDK que estamos utilizando (neste exemplo o 4.1)
Minimum Required SDK é a versão minima na qual o nosso sistema pode executar (neste exemplo 2.2)


No momento são estas as configurações que nos interessam nesta tela. Em outras eu também não devo explicar o que não será muito relevante no momento.

Click em Next e na próxima tela iremos escolher o ícone do nosso programa. Eu baixei uma imagem do Google somente para ilustrar. Nesta tela você deve escolher Foreground: Image e selecionar uma imagem no campo Image File.

A próxima tela questiona sobre a criação de uma "atividade". Vamos criar uma atividade em branco. Como estamos começando não temos condições de utilizar a mais detalhada.


Clique em Next. As atividades (ou Activity) definem a interface de interação com o usuário, funciona grosseiramente falando, como um formulário em uma aplicação Windows Forms. Nesta tela podemos definir o nome da Activity e seu layout. No nosso caso vamos utilizar os valores padrão.


Clique em finalizar e somente para matar a vontade de ver algo rodando vamos executar a nossa AVD e testar nossa aplicação. Se você está atento a esta postagem deve ter reparado que nossa aplicação está preparada para o Android 4.1 e nós criamos uma AVD com a versão 4.0.3. Isso foi proposital para que você veja que uma aplicação feita para uma versão 4.1 pode ser executada até o SDK minimo definido durante nossas configurações. Se você só tem a versão 4.0.3, não tem problema, pode utilizá também.

Se você leu a postagem anterior já sabe como iniciar uma AVD, caso não tenha lido, tem mais uma chance agora clicando aqui.

Vamos executar nosso aplicativo clicando com o botão direito do mouse sobre o projeto e escolhendo a opção Run As > Android Application e veja que temos o famoso Hello World na tela, mas que não vai ficar ai por muito tempo.
Vamos falar agora sobre a estrutura do nosso aplicativo e como o desenvolvimento funciona para Android. Tanto no livro que estou lendo, quanto na referencia do Google, há muito cuidado com a organização do código visando sempre manter as boas práticas e a facilidade de entendimento. O primeiro impacto que tive é em relação a organização do código de um aplicação Android. As partes são divididas em pastas. Dê uma olhada do lado esquerdo da tela, na estrutura de pastas. Não vamos falar muito desta estrutura hoje, mas note que há uma pasta chamada res (resources) que é contem uma pasta dedicada ao layout, outra dedicada a telas, outra dedicada a menu, e algumas a valores. Acreditem, neste única aplicação vamos falar um pouco de cada uma delas. 


Logo no começo da estrutura há uma pasta chamada src que contém o código fonte do nosso projeto, inclusive uma classe representando a atividade principal (MainActivity.java). 
Este tipo de estrutura divide nitidamente o código do layout. 
Agora vamos começar a codificar. A nossa aplicação será muito simples, terá uma caixa de texto onde o usuário informa um valor em metros e três botões logo abaixo serão responsáveis por converter para centimetros, kilometros e metros (que irá retornar para o primeiro valor). 
Primeiro vamos desennhar o layout de nosso aplicativo, através do arquivo que está na pasta res\layout\activity_main.xml. Clique duas vezes sobre ele e você verá uma representação visual da tela do sistema.


Ter uma ferramenta para criar o layout visualmente é muito interessante e produtivo, mas como estamos começando é importante saber o que corre por de trás do layout. Nesta tela você tem duas guias, sendo uma delas nomeada com o nome do arquivo. Clique nela e você verá o código XML da atividade. 
No Android, os controles de uma Activity ficam dentro de um layout, representando no código que você está vendo por <RelativeLayout>...</RelativeLayout>, que define o posicionamento dos controles na tela. Há um controle dentro deste layout chamado TextView que é responsável pela exibição de textos. Nós iremos utilizar um destes mais para frente neste código. Iremos mudar este tipo de layout para linear neste momento, vou explicar sobre isso em outras postagens mais para frente. Para agilizar vou passar passar o código do nosso layout pronto aqui e vou explicar os pontos importantes.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText
         android:id="@+id/txtvalue_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/textvalue_hint"
        android:inputType="numberDecimal" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button_cm_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="converterCM"
            android:text="@string/button_cm_text" />

        <Button
            android:id="@+id/button_m_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="converterM"
            android:text="@string/button_m_text" />

        <Button
            android:id="@+id/button_km_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="converterKM"
            android:text="@string/button_km_text" />
    </LinearLayout>

    <TextView
        android:id="@+id/textview_resultado_id"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

    </TextView>

</LinearLayout>




Vamos ao que é interessante para nosso conhecimento neste momento.

Se você reparar todos os controles tem as propriedades layout_width e layout_height que definem como será a largura do nosso controle. Eu utilizei algumas opções pré-definidas do Android. A wrap_content aumenta de acordo com o conteúdo, a match_parent ajusta de acordo com a largura do objeto pai. Um detalhe interessante são nossos botões. Todos eles estão como match_parent para a largura, mas cada não são todos do tamanho do controle pai, isso por que estamos utlizando o layout_weight que através do número de controles que tem agrupado faz uma proporção de tamanho, como defini 1 para todos, eles ficaram iguais se eu por exemplo tivesse feito 2 para um deles, este seria maior do que os outros. 
Utilizei o controle LinearLayout para agrupar os botões.
Se você foi apressado e copiou e colou o código irá perceber que ocorreram vários erros. Isso por que você não tem definidas as strings do seu projeto. É uma boa prática separar o texto também em arquivos, pois facilita a internacionalização do software, o que veremos mais para frente em outras postagens. Então vamos fazer isso, copie o código abaixo e substitua o conteúdo de res\values\strings.xml. 

<resources>

    <string name="app_name">Conversor de Medida</string>
    <string name="txtvalue_id">txtvalue</string>
    <string name="textvalue_hint">Valor em metros</string>
    <string name="button_cm_text">cm</string>
    <string name="button_m_text">m</string>
    <string name="button_km_text">km</string>
    <string name="button_cm_id">btncm</string>
    <string name="button_km_id">btnkm</string>
    <string name="button_m_id">btnm</string>
    <string name="menu_settings">menu_settings</string>
    <string name="textview_resultado_id">txtResultado</string>

</resources>




Outro detalhe são os ids que também são definidos fora do local de desenho do layout. Repare que eles são precedidos por "@+".



Execute o código e veja na AVD que já temos o nosso layout pronto, mas falta o código que iremos fazer em seguida.


Abra agora o código da Activity em MainActivity.java dentro da pasta src\<packagename> e cole o trecho de código abaixo. Você verá que o código que vem agora é simples e nós falaremos das particularidades depois. O único detalhe que vale ressaltar agora é que a classe R é compilada pelo Eclipse automaticamente quando fazemos alguma alteração nos resources.

package com.patrickreinan.conversormedida;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends Activity {

private double valorOriginal=0;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

public void converterM(View view) {

if(valorOriginal==0||valorOriginal!=retornarValor())
valorOriginal = retornarValor();
mostrarResultado(valorOriginal);
}

public void converterCM(View view) {
if(valorOriginal==0||valorOriginal!=retornarValor())
valorOriginal = retornarValor();
mostrarResultado(valorOriginal*100);
}

public void converterKM(View view) {
if(valorOriginal==0||valorOriginal!=retornarValor())
valorOriginal = retornarValor();
mostrarResultado(valorOriginal*0.001);
}

private double retornarValor(){
double retorno;
EditText txt = (EditText)findViewById(R.id.txtvalue_id);
retorno = Double.parseDouble(txt.getText().toString());
return retorno;
}
private void mostrarResultado(double valor)
{
TextView txtview = (TextView)findViewById(R.id.textview_resultado_id);
txtview.setText(Double.toString(valor));
}
}

Com isso temos nossa primeira aplicação sendo executada.

Faça o download deste código aqui.



2 comentários: