Neste exemplo vamos criar um programa simples mas com alguns mecanismos fundamentais em aplicações robustas, nomeadamente, verificação dos dados introduzidos e um scroll view que permite visualizar informação que não cabe no espaço disponível no ecrã do dispositivo.
Durante este artigo implementamos dois menus, um que é apresentado com o botão menu do dispositivo e outro que está sempre visível na barra no nome da aplicação.
O que se pretende é demonstrar conceitos simples ao criar um programa que nos vai mostrar a tabuada de um determinado valor introduzido pelo utilizador.
Então começamos, criamos um projeto novo no Eclipse com uma atividade principal, a MainActivity.
A Interface da MainActivity
A interface é muito simples, um TextView com o texto Tabuada, não esquecer que devemos definir as strings no ficheiro strings.xml que está na pasta resources\values, se não o fizermos o Eclipse vai dar uns avisos que essa é que é a boa prática.
Além disso incluímos um EditText para introdução de dados, neste caso como só pretendemos valores numéricos podemos utilizar a propriedade inputType para referir que pretendemos number|numberDecimal, assim evitamos ter de testar se o utilizador introduziu letras em vez de números.
Por fim temos o botão Calcular, que tem a propriedade onClick definida com o nome da função que vai responder aos cliques, neste caso a função é click_calcular.
Como esta interface é pequena não é necessário prever a possibilidade de ter de fazer o scroll do conteúdo.
Sempre que o Eclipse cria uma atividade por defeito gera um menu com uma opção chamada settings, este menu está na pasta menu dentro da pasta res (resources) e é apresentado ao utilizador quando este clica no botão menu do dispositivo móvel.
Vamos alterar este menu para apresentar as opções Autor e Sair.
Então o código da interface fica assim:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="@string/ntabuada"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/txt_teste"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:ems="10"
android:inputType="number|numberDecimal" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="36dp"
android:onClick="click_calcular"
android:text="@string/calcular" />
</RelativeLayout>
O código do menu fica:
<!-- Este menu é chamado com o botão do sistema -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menu_sobre"
android:title="@string/about"
android:orderInCategory="100"
android:showAsAction="never"
/><!-- se estiver always o menu aparece em cima no título da aplicação -->
<item android:id="@+id/menu_sair"
android:title="@string/off"
android:orderInCategory="100"
android:showAsAction="never"
/>
</menu>
As duas opções que o menu apresenta ficam definidas no ficheiro das strings. Estas têm a propriedade showAsAction definida como never, assim, este menu só aparece quando o utilizador pressiona o botão de menu no dispositivo.
Agora a classe MainActivity:
package edu.pjcferreira.Tabuada;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends Activity {
public final static String EXTRA_NTABUADA = "ntabuada";
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
/*função chamada no click*/
public void click_calcular(View view){
Intent intent = new Intent(this,CalculaTabuada.class); //define a atividade a ser chamada
//nº da tabuada
EditText editTextTeste = (EditText) findViewById(R.id.txt_teste);
//verifica se foi preenchido
if(editTextTeste.getText().length()==0){
showMessage("Por favor introduz um número!");
return;
}
String message1 = editTextTeste.getText().toString();
intent.putExtra(EXTRA_NTABUADA, message1);
startActivity(intent);
}
//função chamada para preparar o menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
//menu do sistema
//função chamada quando uma opção do menu é selecionada
public boolean onOptionsItemSelected(MenuItem item) {
if(item.getTitle().toString().equals("Sobre"))
showMessage("Paulo Ferreira");
if(item.getTitle().toString().equals("Sair")){
showMessage("That's all folks!");
finish();
}
return true;
}
/* mostra o texto passado numa pequena mensagem */
private void showMessage(CharSequence text) {
Context context = getApplicationContext();
int duration = Toast.LENGTH_SHORT;
//faz aparecer uma mensagem pequena durante um certo tempo
Toast toast = Toast.makeText(context, text, duration);
toast.show();
}
}
Criamos uma função para apresentar as Toast, mensagens pequenas que são mostradas durante alguns segundos ao utilizador, simplificando o seu uso.
O código da função onOptionsItemSelected é executado sempre que o utilizador escolheu uma opção do menu.
O código da função click_calcular é executado com o clique no botão, nesta função, antes de chamar outra atividade testamos se o utilizador preencheu alguma coisa, é para isso que serve a linha
if(editTextTeste.getText().length()==0)
A função onOptionsItemSelected é chamada pelo sistema quando o utilizador clica no botão do menu e depois numa das opções, o modo como deteto qual a opção escolhida passa por verificar o paramêtro da função que corresponde ao selecionado.
Para terminar a parte interessante desta atividade falamos do modo como é chamada a segunda atividade, o método foi o mesmo do post anterior, criamos um Intent e passamos o número introduzido pelo utilizador.
Segunda Atividade
A segunda atividade vai receber o valor da tabuada e calcula apresentando ao utilizador o resultado num TextView. Neste layout incluímos um ScrollView que permitirá ao utilizador deslocar o conteúdo independentemente da orientação do dispositivo.
A Interface
O código da segunda interface é:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="click_bt_alunosnet"
android:text="@string/bt_alunosnet" />
<TextView
android:id="@+id/txt_Resultado"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button1"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</ScrollView>
Neste código destaco a tag ScrollView que envolve todo o conteúdo, além disso inclui um botão que permitirá abrir uma página web no browser do dispositivo.
O menu
<!-- Este menu está visivel -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menu_sobre"
android:title="@string/about"
android:orderInCategory="100"
android:showAsAction="always"
/>
<item android:id="@+id/menu_sair"
android:title="@string/back"
android:orderInCategory="100"
android:showAsAction="always"
/>
</menu>
O código de menu é semelhante ao outro menu com a diferença na propriedade showAsAction que como está definida em always faz aparecer o menu na barra da aplicação.
O código
package edu.pjcferreira.Tabuada;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
public class CalculaTabuada extends Activity{
//Chamada quando a atividade é criada
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
int ntabuada=0;
//recolher o nº da tabuada
Intent intent = getIntent();
String strTemp = intent.getStringExtra(MainActivity.EXTRA_NTABUADA);
ntabuada=Integer.parseInt(strTemp);
//mostra o novo layout
setContentView(R.layout.resultado);
//atualiza o novo layout com os dados
TextView txt_resultado=(TextView)findViewById(R.id.txt_Resultado);
txt_resultado.setText("");
for(int i=1;i<=10;i++){
txt_resultado.setText(txt_resultado.getText() + " " + i + " x " + ntabuada + " = " + (i*ntabuada) + "\n");
}
}
public void click_bt_alunosnet(View view){
Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("http://alunosnet.pt.vu"));
startActivity(i);
}
//Função chamada para apresentar o menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.resultado_menu, menu);
return true;
}
//menu do sistema
//função chamada quando uma opção do menu é selecionada
public boolean onOptionsItemSelected(MenuItem item) {
if(item.getTitle().toString().equals("Sobre"))
showMessage("Paulo Ferreira");
if(item.getTitle().toString().equals("Voltar")){
finish();
}
return true;
}
/* mostra o texto passado numa pequena mensagem */
private void showMessage(CharSequence text) {
Context context = getApplicationContext();
int duration = Toast.LENGTH_SHORT;
//faz aparecer uma mensagem pequena durante um certo tempo
Toast toast = Toast.makeText(context, text, duration);
toast.show();
}
}
Deste código realço a função do botão que cria uma Intent para abrir uma página Web no browser.
Como incluímos um ScrollView na interface podemos mudar a orientação do dispositvo e fazer deslizar o conteúdo.
Como se pode ver pelas imagens o menu desta vez está sempre visível.
O projeto pode ser retirado aqui e a aplicação pronta instalar aqui.
Sem comentários:
Enviar um comentário