Avançar para o conteúdo principal

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.

Comentários

Mensagens populares deste blogue

Upgrade do Windows Home para Pro sem formatar

 Há algum tempo que tentava fazer o upgrade do meu Windows 10 da versão Home para a versão Pro, mas chegava sempre a um ponto em que me era solicitado para formatar o sistema e não estava para isso. Finalmente conseguinte seguindo estes passos: - seguinte estes passos  utilizei uma das chaves genéricas para o Windows 10 Pro e fui a Settings > Update & Security > Activation > Change the product key; - após inserir uma das chaves o Windows instala as funcionalidades Pro e pede para reiniciar; - agora tem o Windows Pro mas não está ativado, assim fui ao site urcdkeys  onde comprei uma chave para o Windows Pro por menos de €20; - com essa chave voltei a funcionalidade Change the product key e ativei o Windows; - e pronto, Windows Pro ativado sem formatar ou reinstalar. Importante : eu não tenho nada a ver com o site urcdkeys por isso a vossa experiência pode correr de forma diferente da minha.

Vamos fazer um carro com o Unity 3D

Neste artigo vamos fazer um carro, simples, com o Unity 3D. A ideia é utilizar o motor de física do Unity 3D para simular o comportamento do carro. Os passos a seguir são: [1] - Criar um projeto novo

Tem troco

Para hoje um pequeno programa que dá troco, bem dar não dá mas calcula o troco a dar em função das moedas disponíveis. Neste projeto vamos utilizar o novo Visual Studio 2012. Como era de se esperar vamos iniciar um projeto novo: Agora adicionamos os seguintes elementos:  - um botão para calcular as moedas a dar de troco  - um botão para repor o número de moedas iniciais disponíveis  - uma textbox para introduzir o valor a pagar  - uma textbox para introduzir o valor entregue  - umas labels para informar o utilizador do que deve introduzir e outra para mostrar o troco  - por fim uma grelha para mostrar os valores das moedas e as quantidades disponíveis de cada uma. A janela principal do programa fica assim: Agora o código, primeiro o evento load do formulário, neste vamos definir os valores das moedas e as respetivas quantidades Para guardar estes valores vamos necessitar de uma variável definida ao nível do formulário, logo abaixo da definição da class: Public Class Form1     Public mo