Android - Navegando entre telas

Neste artigo explicarei mais alguns recursos básicos do Android e em seguida será criado um exemplo de como trabalhar com várias telas e navegar entre elas. Aproveitaremos o exemplo montado no mês anterior.

Para trabalhar com várias telas é necessário criar vários templates que ficarão armazenados na pasta “res/layout”, assim como o template “main.xml” que é criado por padrão.

Cada “xml” localizado nesta pasta pode ter um layot diferente, podendo ser alterado como desejar.

Conceitos Básicos e essenciais

Antes de colocarmos mãos à obra, abaixo gostaria de explicar alguns recursos que serão utilizados neste artigo e em outros posteriores.

O que é um Activity?

Um “Activity” ou uma atividade representa uma tela qualquer do sistema, sendo a peça principal de sua aplicação. Responsável por exibir todos os componentes gráficos. Uma aplicação Android geralmente possui uma ou mais Atividade estando relacionadas entre si.

O método “OnCreate()” é obrigatório, pois durante o ciclo de vida de uma Atividade ele é chamado no momento que ela estiver sendo criada, sendo uma boa prática inicializarmos tarefas de carregamento de recursos e logo em seguida executar o método SetContentView(), este sendo responsável por carregar o layout da aplicação.

Importante: Toda Atividade deve ser declarada no “AndroidManifest.xml” utilizando a tag  <activity>.

O que é o R.java?

É a classe responsável por gerenciar os recursos de nossa aplicação. O Android localiza um recurso específico atraves dos denominados “IDs” e quem os gerencia é a classe “R.java”, sendo criado automaticamente quando iniciamos um novo projeto.

Esta classe não deve ser alterada de forma nenhuma e é gerenciada atomaticamente pelo Sistema Android.

Neste artigo específico utilizaremos o comando:

setContentView(R.Layout.cadastro);

Toda atividade possui o método acima, que é responsável por carregar toda a hierarquia de layout definida no arquivo “xml”. Neste momento é que a classe “R.java” entra em ação, ela está diretamente ligada à uma atividade. Quando pasamos “R.Layout.cadastro” como parâmetro para este método, é como se disséssemos para o Android carregar um recurso do tipo “layout” cujo nome é “cadastro.xml”.

Importando um projeto pronto

Para isto clique em “File/Import” e escolha a opção “Existing Projects into Workspace” localizada na aba “General”. O próximo passo é selecionar onde o projeto foi criado e em seguida concluir clicando no botão “Finish”. Ver Imagem 01.

Figura 01: Importação de um projeto.

Fique à vontade para renomear o projeto da maneira que desejar. Neste caso aproveitaremos o lay-out da tela, adaptaremos o código de sua “Activity” e a classe “Registro.java”. No meu caso utilizei esta tela como “cadastro.xml”, mas fiquem a vontade para trabalhar da forma que desejarem.

Criando a tela main.xml

Clique no diretório “res/layout” e com o botão direito escolha “New/Other...” e aparecerá uma tela como ilustra a Figura 02, escolha “XML/XML File” clique em Next, defina como “main.xml” e conclua logo em seguida.

Figura 02: Criando um XML.

Uma dica que deixo aqui seria de copiar todo conteúdo XML da tela de cadastro e ir excluindo os componentes que não for utilizar, isto economiza tempo e trabalho.

Adicionaremos os seguintes componentes:

1 LinearLayout , 4 textView e 2 botões. A Figura 03 mostra como ficou o lay-out e a Figura 04 a disposição dentro do Linearlayout.

Figura 03: Lay-out tela Principal.

Figura 04: Configuração dos componentes.

E o código XML ficou da seguinte maneira:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:weightSum="1">

    <TextView android:id="@+id/textView1"

    android:textAppearance="?android:attr/textAppearanceLarge"

    android:layout_width="wrap_content"

    android:text="TELA PRINCIPAL - THE CLUB"

    android:layout_gravity="center"

    android:layout_height="78dp"></TextView>

    <Button android:text="Cadastrar"

    android:id="@+id/btCadastrar"

    android:layout_height="100dp"

    android:layout_width="260dp"

    android:layout_gravity="center"></Button>

    <Button android:text="Consultar"

    android:id="@+id/btConsultar"

    android:layout_height="100dp"

    android:layout_width="260dp"

    android:layout_gravity="center"></Button>

    <TextView android:id="@+id/textView4"

    android:textAppearance="?android:attr/textAppearanceLarge"

    android:layout_width="match_parent"

    android:text=" "

    android:layout_height="103dp"></TextView>

    <TextView android:id="@+id/textView2"

    android:textAppearance="?android:attr/textAppearanceMedium"

    android:layout_width="wrap_content"

    android:text="Conheça o The Club"

    android:layout_gravity="center"

    android:layout_height="wrap_content"></TextView>

    <TextView android:id="@+id/textView3"

    android:textAppearance="?android:attr/textAppearanceMedium"

    android:layout_width="wrap_content"

    android:text="http://www.theclub.com.br/"

    android:layout_gravity="center"

    android:layout_height="wrap_content"></TextView>

</LinearLayout>

Criando a tela consulta.xml

Seguindo os mesmos passos da tela principal, adicione um arquivo do tipo XML e em seguida os seguintes componentes:

 5 LinearLayout, 9 TextViewer, 1 RadioGroup e 1 Button

A Figura 05 mostra como ficou o lay-out e a Figura 06 a disposição dentro do Linearlayout.

Figura 05: Lay-Out tela de Consulta.

Figura 06: Configuração dos componentes.

E o código XML ficou da seguinte maneira:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <TextView android:id="@+id/textView3"

    android:layout_width="wrap_content"

    android:textAppearance="?android:attr/textAppearanceLarge"

    android:layout_height="wrap_content"

    android:layout_gravity="center"

    android:text="CONSULTAR"></TextView>

    <LinearLayout android:layout_height="wrap_content"

       android:orientation="vertical"

       android:layout_width="wrap_content"

       android:id="@+id/linearLayout2">

       <TextView android:id="@+id/textView1"

       android:textAppearance="?android:attr/textAppearanceLarge"

       android:layout_height="wrap_content"

       android:layout_width="wrap_content"

       android:text="Nome Cliente:"></TextView>

       <TextView android:textAppearance="?android:attr/textAppearanceMedium"

       android:layout_height="wrap_content"

       android:layout_width="wrap_content"

       android:id="@+id/lbCliente"

       android:text="lbCliente"></TextView>

    </LinearLayout>

    <LinearLayout android:layout_height="wrap_content"

       android:layout_width="match_parent"

       android:id="@+id/linearLayout1"

       android:orientation="horizontal">

       <LinearLayout android:layout_height="match_parent"

       android:orientation="vertical"

       android:layout_width="wrap_content"

       android:id="@+id/linearLayout4">

       <TextView android:id="@+id/textView9"

       android:textAppearance="?android:attr/textAppearanceLarge"

       android:layout_height="wrap_content"

       android:text="Cidade"

       android:layout_width="214dp"></TextView>

       <TextView android:textAppearance="?android:attr/textAppearanceMedium"

       android:layout_height="wrap_content"

       android:layout_width="wrap_content"

       android:id="@+id/lbCidade"

       android:text="lbCidade"></TextView>

    </LinearLayout>

    <LinearLayout android:layout_height="match_parent"

       android:orientation="vertical"

       android:id="@+id/linearLayout3"

       android:layout_width="match_parent">

       <TextView android:text="Estado"

       android:id="@+id/textView10"

       android:layout_width="wrap_content"

       android:textAppearance="?android:attr/textAppearanceLarge"

       android:layout_height="wrap_content"></TextView>

       <TextView android:textAppearance="?android:attr/textAppearanceMedium"

       android:layout_height="wrap_content"

       android:layout_width="wrap_content"

       android:id="@+id/lbEstado"

       android:text="lbEstado"></TextView>

    </LinearLayout>

    </LinearLayout>

    <RadioGroup android:id="@+id/rgCursos"

       xmlns:android="http://schemas.android.com/apk/res/android"

         android:orientation="vertical"

       android:layout_width="fill_parent"

       android:layout_height="wrap_content">

       <TextView android:id="@+id/textView2"

       android:layout_width="wrap_content"

       android:textAppearance="?android:attr/textAppearanceLarge"

       android:layout_height="wrap_content"

       android:includeFontPadding="true"

       android:hapticFeedbackEnabled="true"

       android:text="Produto:"></TextView>

       <TextView android:layout_width="wrap_content"

       android:textAppearance="?android:attr/textAppearanceMedium"

       android:layout_height="wrap_content"

       android:id="@+id/lbProduto"

       android:text="lbProduto"></TextView>

    </RadioGroup>

    <Button android:layout_gravity="center"

    android:layout_width="81dp"

    android:text="Voltar"

    android:id="@+id/btVoltarConsulta"

    android:layout_height="wrap_content"></Button>

</LinearLayout>

Codificando nosso Exemplo

O principal método é o SetContentView(), ele é responsável por carregar o layout da aplicação. Portanto, iremos utilizá-lo para carregar e navegar entre nossas telas. Serão criadas três Procedures e neste caso todas serão implementadas em nossa “Activity” principal que no meu caso deixei como “NavegandoActivity”

ChamaMenuPrincipal() – Responsável por executar a tela principal.
ChamaCadastro() – Responsável por executar a tela de cadastro.
ChamaConsulta() - Responsável por executar a tela de consulta.
MensagemAlerta() - Responsável por executar uma caixa de alerta.

Variáveis globais

//Classe Registro

Registro reg;

     

//Variáveis da Tela de Cadastro

RadioGroup rgCursos;

RadioButton rbLiteDelphi, rbLiteC, rbProfessional, rbStudent;

TextView txtCliente, txtCidade, txtEstado;

Spinner spEstado;

Button btEfetuar;

     

//Variáveis da Tela de Consulta

TextView txtCli, txtCid, txtEst, txtCur;

No evento OnCreate() é onde invocaremos o métodos ChamaMenuPrincipal()

@Override

public void onCreate(Bundle savedInstanceState)

{

    super.onCreate(savedInstanceState);

    ChamaMenuPrincipal();

}

Abaixo a implementação dos Métodos utilizados seguidos de uma breve explicação:

public void ChamaMenuPrincipal()

{

     setContentView(R.layout.main);

     ChamaCadastro();

     ChamaConsulta();

}

O método ChamaMenuPrincipal() engloba também os dois métodos ChamaCadastro() e o ChamaConsulta().

public void ChamaCadastro()

{

    Button btCadastrar = (Button) findViewById(R.id.btCadastrar);

    btCadastrar.setOnClickListener(new View.OnClickListener()

    {  

        @Override

         public void onClick(View v)

         {

             setContentView(R.layout.cadastro);

             rgCursos = (RadioGroup) findViewById(R.id.rgCursos);

             rbLiteDelphi = (RadioButton) findViewById(R.id.rbLiteDelphi);

rbLiteC = (RadioButton) findViewById(R.id.rbLiteC);

              rbProfessional = (RadioButton) findViewById(R.id.rbProfessional);

             rbStudent = (RadioButton) findViewById(R.id.rbStudent);

             txtCliente = (TextView) findViewById(R.id.edtCliente);

             txtCidade = (TextView) findViewById(R.id.edtCidade);

             spEstado = (Spinner) findViewById(R.id.spnEstado);

             btEfetuar = (Button) findViewById(R.id.btnEfetuar);

                

             btEfetuar =  (Button) findViewById(R.id.btnEfetuar);

             btEfetuar.setOnClickListener(new View.OnClickListener()

             {

                 @Override

                  public void onClick(View arg0)

                  {

                      reg = new Registro();

                      reg.cliente = txtCliente.getText().toString();

                      reg.cidade = txtCidade.getText().toString();

                      reg.estado = spEstado.getSelectedItem().toString();

                                       

                      switch (rgCursos.getCheckedRadioButtonId())

                      {

                         case R.id.rbLiteDelphi : reg.curso = 1;

                         break;

                                              

                         case R.id.rbLiteC : reg.curso = 2;

                         break;

                                       

                         case R.id.rbProfessional : reg.curso = 3;

                         break;

                                              

                         case R.id.rbStudent : reg.curso = 4;

                         break;

                       }

                                 

MensagemAlerta("Resultado", "Venda Efetuada com sucesso!" + "\n" +

                           "--------------------------------------" +

                           "Cliente: " + reg.cliente + "\n"+

                           "Cidade: " + reg.cidade + 

                           " / Estado: " + reg.estado + "\n" +

                           "Cód. Curso: " + reg.curso);

                   }

             });

                   

       Button btVoltarCadastro = (Button) findViewById(R.id.btVoltarCadastro);

       btVoltarCadastro.setOnClickListener(new View.OnClickListener()

       {

           @Override

           public void onClick(View v)

           { 

               ChamaMenuPrincipal();

           }

       });

   }

 });

}

public void MensagemAlerta(String titulo, String corpo)

{     

AlertDialog.Builder infoResultado = new  AlertDialog.Builder(NavegandoActivity.this);

    infoResultado.setTitle(titulo);

    infoResultado.setMessage(corpo); 

    infoResultado.setNeutralButton("Ok",null);

    infoResultado.show();

}

O que devemos salientar nesta função ChamaCadastro() é que foi inserido um “Button” Voltar logo abaixo do Botão “Efetuar Venda”. Este botão permite navegar até a tela principal através do método ChamaMenuPrincipal(), não podemos esquecer que os dados digitados em nossa tela de cadastro serão armazenados em uma Classe “Registro” podendo ser consultados na tela de Consulta.

public void ChamaConsulta()

{

   Button btConsultar = (Button) findViewById(R.id.btConsultar);

   btConsultar.setOnClickListener(new View.OnClickListener()

   {

       @Override

       public void onClick(View v)

       {

             setContentView(R.layout.consulta);

            

              txtCli = (TextView) findViewById(R.id.lbCliente);

             txtCid = (TextView) findViewById(R.id.lbCidade);

             txtEst = (TextView) findViewById(R.id.lbEstado);

             txtCur = (TextView) findViewById(R.id.lbProduto);

                     

             txtCli.setText(reg.cliente);

             txtCid.setText(reg.cidade);

             txtEst.setText(reg.estado);

                      

              switch (reg.curso)

              {

                    case 1: txtCur.setText("The Club Lite (Delphi) - R$59,90");

                    break;

                    case 2: txtCur.setText("The Club Lite (C#) - R$59,90");

                    break;

                    case 3: txtCur.setText("The Club Professional - R$88,00");

                    break;

                    case 4: txtCur.setText("The Club Student - R$25,00");

                    break;

             }

                          

Button btVoltarConsulta = (Button) findViewById(R.id.btVoltarConsulta);

                          

             btVoltarConsulta.setOnClickListener(new View.OnClickListener()

              {

                    @Override

                    public void onClick(View v)

                    {

                          ChamaMenuPrincipal();

                    }

             }); 

                            

       }

    });

}

Já o Método ChamaConsulta() tem como objetivo carregar os dados inseridos na classe Registro. Quando chamarmos a tela aproveitamos e carregamos os dados em seus respectivos componentes, seguido de um “Switch – case” para fazer o inverso no que foi feito na tela de cadastro, ou seja, vamos ler um número inteiro e carregar um texto referente o que foi escolhido. O botão voltar tem a função de chamar o Menu Principal.

Figura 07: Exemplo em Run-Time.

Conclusão

Aprendemos neste artigo alguns conceitos básicos para navegar entre telas no sistema Android. Complementamos o artigo do mês passado e concluímos com um exemplo prático e fácil. Espero que os senhores possam implementar outros recursos e que estes exemplos sejam úteis no no decorrer do desenvolvimento.

Abraço e até o mês que vem!

Fonte de Informações

http://developer.android.com/guide/topics/fundamentals/activities.html