terça-feira, 7 de dezembro de 2010

Navegando entre layouts

Olá pessoas,
Aqui iremos fazer uma rápida abordagem de navegar entre layouts (páginas).

Nesta pequena aplicação, eu apenas criei duas páginas, cada uma com um texto para identificá-las e com apenas um botão, que irá fazer a chamada para a página seguinte.



Para você trabalhar com várias páginas, você vai precisar primeiramente criar vários templates. Este templates deverão ficar em res/layout, assim como o nosso template padrão, o main.xml.
Cada arquivo *.xml nesta pasta, pode ser um layout diferente, ou seja, uma página diferente que você pode alterar da forma como quiser, com os componentes que quiser.

Depois de criar estas páginas, é aconselhável você criar cada classe para cada template, no mínimo. Isso garante a manutenibilidade (facilidade de uma possível manutenção posteriormente) de seu software.

E por fim, você deverá altera o seu arquivo AndroidManifest.xml, onde está localizado todas as informações da sua aplicação. Neste arquivo, você deverá informar que irá usar outra Activity em seu sistema, sem isso, mesmo chamando uma página, o Android não irá entender que aquela página chamada existe e irá ocasionar um erro em tempo de execução.

Vamos colocar a mão na massa? :-)

Nossa hierarquia de arquivos ficará desta maneira.

Hierarquia de arquivos.
Como pode notar, criei dois templates XML, o page1.xml e o page2.xml.
Os dois são iguais, com apenas um texto identificando qual é a tela e um botão para chamar a tela seguinte.

page1.xml:

    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
        
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:text="@string/page1">
        
          

Agora vamos analisar o código Java que mapeia cada template criado e também que contém a ação do botão para chamar a página seguinte.
Assim como o xml, o código Java é praticamente igual, só muda a chamada das páginas. Portanto, irei postar apenas a primeira página.

NavegandoEntreLayouts

package com.navegandoentrelayouts;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class NavegandoEntreLayouts extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.page1); // Mapeando o page1.xml

        // Criação a mapeamento do botão
        Button button = (Button) findViewById(R.id.btnPage1);

        // Listener que irá ouvir os eventos do botão
        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // Cria a chamada para a página 2
                Intent myIntent = new Intent(v.getContext(), Page2.class);
                startActivity(myIntent);
            }
        });
    }
}


Como podem ver no comentário do método setContentView(R.layout.page1), é neste ponto que definimos qual template que está no res/layout vamos mapear com esta classe.
Feito isso, recuperamos o botão do template com o método findViewById(id), como de costume e adicionamos o listner para "ouvir" quando usuário clicar na aplicação.
O grande lance é declaramos um objeto Intent, e adicionar em seu construtor o nosso contexto atual no primeiro parâmetro v.getContext() e como segundo parâmetro, a classe que foi mapeada pela segunda classe, no nosso caso, a Page2.class (você deverá colocar o .class para que isso funcione).
Depois do objeto Intent criado, chamamos o método startActivity() passando o Intent como parâmetro.
E voilà? Quase... ainda não, precisamos configurar o AndroidManifest.xml. :-)

Como disse logo acima, precisamos configurar este arquivo de propriedades que vamos ter uma outra página sendo chamada.

AndroidManifest.xml


      package="com.navegandoentrelayouts"
      android:versionCode="1"
      android:versionName="1.0">
    
        
                  android:label="@string/app_name">
            
                
                
            
        
    
     

Para isso, basta colocar a tag activity, com o atributo android:name=".NomeDaClasseMapeada" dentro do application do xml.
Cada novo activit criado neste arquivo, corresponderá a uma classe que logo corresponderá a uma tela.
No atributo android:name="", você deverá informar o caminho da classe java,caso a classe esteja no mesmo pacote que a classe principal, só é necessário colocar um ponto (.) e o nome da classe.
A classe principal está logo acima, dentro de outra activit. Nela, atém do android:name, temos o android:label que mapeia o nome da aplicação. Este atributo contém o nome que a sua aplicação terá na tela do seu aparelho.
Dentro também temos o intent-filter, que contém os campos action android:name="android.intent.action.MAIN" e category android:name="android.intent.category.LAUNCHER"  indicando que a classe é a classe principal e que também esta é a classe que deverá ser chamada assim que a aplicação se inicializar.

Resumindo como criar uma nova tela:
Para criar uma nova página, você precisa criar um arquivo xml com os componentes salvo em res/layout, mapear este arquivo em um arquivo java, para implementar inteligência nesta tela e mapear esta classe no AndroidManifest.xml para que o Android saiba da existência desta página.

Agora você tem conhecimento de como funciona o fluxo de telas no Android, deixe a imaginação agir.





12 comentários:

  1. Vamos supor que haja um campo Edit na pagina 1 e na pagina 2 eu queira mostrar num textview o conteudo desse campo? Como faço para "trafegar" a informacao da pagina 1 para a pagina 2?

    Agradeço antecipadamente pela ajuda.
    Bonissauro

    ResponderExcluir
  2. Amigo, a noite vou fazer um post como você pode fazer isso.
    É uma forma bem simples.
    Abraços

    ResponderExcluir
  3. muito bom artigo...
    quando faço a chamada do outro layout acusa o erro abaixo:

    the source attachment does not contain the source for the file view.class

    ResponderExcluir
  4. Olá, poderiam me ajudar?
    estou a ter problemas a tentar saber como faço para voltar à página anterior, por ex. se estou na pagina 1 e clico para ir para a página 2, até aí tudo bem, mas como faço para voltar à página 1? Sem sair da aplicação, porque sempre que clico no botão voltar ele sai da aplicação. Agradeço a ajuda

    ResponderExcluir
    Respostas
    1. Olá!
      Veja se você está dando finish() na primeira página, isso mata a instancia da primeira e ao apertar o botão voltar, ele irá sair da aplicação mesmo.

      Excluir
  5. Então basta tirar o finish() da primeira página?

    ResponderExcluir
  6. Sim, é isso, já testei e é isso mesmo :D
    muito obrigada pela ajuda, afinal a solução era bem simples

    ResponderExcluir
  7. Como colocar e configurar mais de um botão?

    ResponderExcluir