Por Christian Göllner para o PPLWARE.COM
Depois de termos aprendido a instalar e configurar o SDK (ver aqui) desenvolvemos o layout de uma aplicação tipo calculadora (ver aqui).
Hoje vamos dar vida à nossa calculadora e aprender como se faz a ligação dos elementos no layout xml com a linguagem de programação Java. A calculadora que vamos desenvolver hoje vai ser capaz de calcular somas, diferenças, produtos e quocientes. Tudo com apenas um clique.
A calculadora que vamos desenvolver hoje vai ser capaz de calcular somas,diferenças, produtos e quocientes. Tudo em apenas um clique.
Passo 1 – Vamos abrir o eclipse e abrir o workspace que contém o projecto da nossa calculadora criada anteriormente.
Passo 2 – Os botões: Neste tutorial vamos editar o nosso layout directamente no xml porque nos permite ter melhor controlo sobre o que está a acontecer.
Vamos abrir o ficheiro main.xml para alterarmos o nosso layout. Em primeiro lugar vamos querer ter dois botões lado a lado que se vão chamar “Calcular” e “Limpar”.
Para colocar elementos lado a lado há várias técnicas. Nós vamos usar um LinearLayout com orientação horizontal. No sítio onde está o nosso botão antigo de “Somar” vamos passar a ter o seguinte código:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="@+id/btn_calcular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calcular" >
</Button>
<Button
android:id="@+id/btn_limpar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Limpar" >
</Button>
</LinearLayout>
É importante darmos id’s aos botões porque é através deles que vamos ter acesso aos mesmos no código Java. Passo 3 – Criar os TextViews: De seguida vamos querer ter TextViews que mostrem os resultados dos nossos cálculos. Vamos então colocar a seguir ao código dos botões o código dos resultados.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Soma"
android:textAppearance="@android:style/TextAppearance.Medium" />
<TextView
android:id="@+id/resultado_soma"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textAppearance="@android:style/TextAppearance.Small" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Diferença"
android:textAppearance="@android:style/TextAppearance.Medium" />
<TextView
android:id="@+id/resultado_diferenca"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textAppearance="@android:style/TextAppearance.Small" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Produto"
android:textAppearance="@android:style/TextAppearance.Medium" />
<TextView
android:id="@+id/resultado_produto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textAppearance="@android:style/TextAppearance.Small" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Quociente"
android:textAppearance="@android:style/TextAppearance.Medium" />
<TextView
android:id="@+id/resultado_quociente"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textAppearance="@android:style/TextAppearance.Small" />
Passo 4 – Agora que temos o nosso layout criado vamos passar ao código Java e dar vida à calculadora. Para tal vamos abrir o único ficheiro Java presente no nosso projecto que está dentro da pasta src e que se chama Calculadora.java.
Neste ficheiro está uma classe que extende a classe Activity. Ao extender a classe Activity temos acesso à interacção com o sistema Android.
A nossa classe Calculadora vai ter como atributos, os elementos com os quais queremos interagir. Estes são os campos de texto que guardam os dois números de entrada; Os botões de “Calcular” e “Limpar” e os TextViews que vão mostrar os resultados dos nossos cálculos.
public class Calculadora extends Activity {
private EditText numeroUm;
private EditText numeroDois;
private Button calcular;
private Button limpar;
private TextView resultadoSoma;
private TextView resultadoDiferenca;
private TextView resultadoProduto;
private TextView resultadoQuociente;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
Agora que temos os atributos necessários vamos dar-lhes vida. Para tal temos de interagir com o sistema Android e chamar os elementos que estão no nosso layout xml.
Como referido anteriormente conseguimos obter os elementos através dos id’s que lhes atríbuimos. Vamos então acrescentar o seguinte código ao método onCreate.
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
numeroUm = (EditText) findViewById(R.id.edt_num1);
numeroDois = (EditText) findViewById(R.id.edt_num2);
calcular = (Button) findViewById(R.id.btn_calcular);
limpar = (Button) findViewById(R.id.btn_limpar);
resultadoSoma = (TextView) findViewById(R.id.resultado_soma);
resultadoDiferenca = (TextView) findViewById(R.id.resultado_diferenca);
resultadoProduto = (TextView) findViewById(R.id.resultado_produto);
resultadoQuociente = (TextView) findViewById(R.id.resultado_quociente);
}
A partir de agora temos acesso aos elementos que estão no nosso layout e podemos interagir com eles através de código Java. Se quisermos podemos-lhes alterar o conteúdo, mudar as cores, visibilidade, etc.
Para já vamos querer ser notificados quando os botões forem clicados. Para tal temos de ter um listener dos botões que é notificado quando isso acontecer. Vamos então atribuir um listener aos botões.
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
numeroUm = (EditText) findViewById(R.id.edt_num1);
numeroDois = (EditText) findViewById(R.id.edt_num2);
calcular = (Button) findViewById(R.id.btn_calcular);
limpar = (Button) findViewById(R.id.btn_limpar);
resultadoSoma = (TextView) findViewById(R.id.resultado_soma);
resultadoDiferenca = (TextView) findViewById(R.id.resultado_diferenca);
resultadoProduto = (TextView) findViewById(R.id.resultado_produto);
resultadoQuociente = (TextView) findViewById(R.id.resultado_quociente);
calcular.setOnClickListener(this);
limpar.setOnClickListener(this);
}
Este código vai dar erro porque a nossa classe Calculadora (ainda) não é um OnClickListener. Para tirar o erro vamos então dizer que a nossa classe implementa a interface OnClickListener.
public class Calculadora extends Activity implements OnClickListener {
Mais um erro surgiu! O eclipse está-se a queixar que implementamos o OnClickListener mas que não temos nenhum método onClick. Vamos então criar esse método.
@Override
public void onClick(View v) {
}
Este método vai ser chamado sempre que um dos dois botões for clicado. Para sabermos qual dos botões foi clicado podemos chamar o método getId() do View que foi passado como parâmetro.
@Override
public void onClick(View v) {
//Foi clicado o botão calcular
if ( v.getId() == R.id.btn_calcular ) {
}
//Foi clicado o botão limpar
else if ( v.getId() == R.id.btn_limpar ) {
}
}
Quando o botão de calcular for chamado queremos saber que valores foram inseridos, calcular a soma, a diferença, o produto e quociente, e de seguida mostrar os resultados. Quando o botão de limpar for chamado simplesmente limpamos os inputs e colocamos os resultados todos a zero.
@Override
public void onClick(View v) {
if ( v.getId() == R.id.btn_calcular ) {
//Vamos buscar os valores aos campos de input
String numeroUmString = numeroUm.getText().toString();
String numeroDoisString = numeroDois.getText().toString();
//Converter as Strings para double
double numeroUmValor = Double.parseDouble(numeroUmString);
double numeroDoisValor = Double.parseDouble(numeroDoisString);
//Fazer as contas
double soma = numeroUmValor + numeroDoisValor;
double diferenca = numeroUmValor - numeroDoisValor;
double produto = numeroUmValor * numeroDoisValor;
double quociente;
//Verificar se o divisor é zero para evitar um DivisionByZeroException
if ( Double.compare(0,numeroDoisValor) == 0 ) {
quociente = Double.POSITIVE_INFINITY;
}
else {
quociente = numeroUmValor/numeroDoisValor;
}
//Actualizar os resultados
resultadoSoma.setText(soma+"");
resultadoDiferenca.setText(diferenca+"");
resultadoProduto.setText(produto+"");
resultadoQuociente.setText(quociente+"");
}
//Foi chamado o botão de limpar
else if ( v.getId() == R.id.btn_limpar ) {
//Limpar o input
numeroUm.setText("");
numeroDois.setText("");
//Colocar os resultados a zero
resultadoSoma.setText("0");
resultadoDiferenca.setText("0");
resultadoProduto.setText("0");
resultadoQuociente.setText("0");
}
}
Deste modo concluímos a nossa classe Calculadora e já podemos correr o nosso programa!
Espero que este tutorial tenha sido fácil de seguir e que seja uma rampa de lançamento para aplicações Android mais avançadas.
Em caso de dúvidas não hesitem em deixar-nos comentários que eu terei todo o gosto em vos ajudar.