Android - Scroll View e outras afinações

No post anterior, ao criar a nossa primeira aplicação Android, o código utilizado foi, por opção, simples. Não sendo implementados mecanismos de validação dos dados, de igual modo a interface, apesar de utilizar duas atividades com dois layouts, era básica.

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.