Aplicação de visualização de imagens em execução
145
Capitulo 6 Capitulo 6 Capitulo 6 Capitulo 6 TrabalhandoTrabalhandoTrabalhando Trabalhando Trabalhando com com mais de uma tela em mais de uma tela em mais de uma tela em mais de uma tela em mais de uma tela em mais de uma tela em mais de uma tela em mais de uma tela em mais de uma tela em mais de uma tela em mais de uma tela em aplicação aplicaçãoaplicação aplicação
té agora as aplicações que desenvolvemos tinham somente uma única tela, mas, sabemos que algumas aplicações possuem normalmente mais de uma tela. A partir de agora iremos aprender como inserir e gerenciar várias telas em uma aplicação Android através dos exemplos que serão demonstrados nesse capítulo.
Para começarmos, vamos criar um novo projeto Android com os seguintes dados abaixo:
Application Name: Troca de Telas
Company Domain : app.usuario
Project location : (Fica a sua escolha)
Activity Name: TrocaTelasActivity
Layout Name : tela_principal
Title : Troca de Telas
Resource Menu Name : menu_ tela_principal
Altere a estrutura de layout da sua aplicação para o LinearLayout e em seguida altere o componente TextView de acordo com a tabela abaixo.
TextView
Propriedade
Valor
text
Você está na tela principal
A
146
Agora adicione um componente Button e modifique as seguintes propriedades:
Button
Propriedade
Valor
id
bttela2
layout:width
match_parent
text
Ir pata tela 2
Seguindo os passos acima, a aplicação deve estar de acordo com a figura abaixo:
Layout da tela 1
Vejamos agora o código XML da tela da nossa aplicação:
<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"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".TrocaTelasActivity">
<TextView android:text="Você está na tela principal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />
147
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ir para tela 2"
android:id="@+id/bttela2"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true" />
</RelativeLayout>
Nossa primeira tela está pronta, muito bem! Agora vamos criar uma nova tela para a nossa aplicação. O nome do arquivo que vai representar a segunda tela da nossa aplicação vai se chamar “tela2.xml” (um arquivo XML). Conforme já foi explicado (e explico novamente aqui), todos os arquivos que representam a tela da aplicação devem estar dentro do diretório “layout” (situado dentro da pasta “res” do projeto), logo, vamos criar o nosso arquivo dentro desse diretório.
Para criarmos um novo arquivo XML dentro do diretório “layout” basta clicar com o botão direito sobre a pasta “layout” e em seguida selecionar “New” e em seguida clicar em “Layout Resource File”. Veja na figura abaixo :
Criando um novo arquivo de layout
Feito isso surgirá uma caixa de diálogo, conforme mostra a figura a seguir :
148
New Resource File
Por padrão a estrutura de layout padrão selecionada é LinearLayout (definida em “Root element”). Vamos no campo “Root element" para substituir LinearLayout por RelativeLayout. Feito isso , vamos no campo “File name” para digitar “tela2” (que será o nome do nosso arquivo XML) e em seguida clique em “OK” para que o arquivo seja gerado. Veja o resultado na figura seguinte:
Tela de layout em branco
149
No componente RelativeLayout vamos modificar as seguintes propriedades a seguir:
RelativeLayout
Propriedade
Valor
padding / right
@dimen/activity_horizontal_margin
padding / left
@dimen/activity_horizontal_margin
padding / top
@dimen/activity_vertical_margin
padding / bottom
@dimen/activity_vertical_margin
Agora vamos adicionar os seguintes componentes, na sequência:
TextView
Propriedade
Valor
text
Você está na tela 2
Button
Propriedade
Valor
id
bttelaprincipal
padding:width
match_parent
text
Ir pata tela principal
Seguindo os passos acima, o layout do arquivo “tela2.xml” deve estar de acordo com a figura abaixo:
150
Layout da tela 2
Vejamos agora o código XML da tela da nossa aplicação:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Você está na tela 2"
android:id="@+id/textView2"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ir para tela principal"
android:id="@+id/bttelaprincipal"
android:layout_below="@+id/textView2"
android:layout_alignLeft="@+id/textView2" />
</RelativeLayout>
151
Agora vamos no arquivo “TrocaTelasActivity.java” para digitarmos o código em seguida:
package usuario.app.trocadetelas;
import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;
public class TrocaTelasActivity extends Activity {
Button bttelaprincipal, bttela2;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
CarregarTelaPrincipal();
}
public void CarregarTelaPrincipal()
{
setContentView(R.layout.tela_principal);
bttela2 = (Button) findViewById(R.id.bttela2);
bttela2.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {
CarregarTela2();
}
});
}
public void CarregarTela2()
{
setContentView(R.layout.tela2);
bttelaprincipal = (Button) findViewById
(R.id.bttelaprincipal);
bttelaprincipal.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {
CarregarTelaPrincipal();
}
});
}
}
152
Observem que nesta classe eu criei dois métodos : CarregaTelaPrincipal e CarregaTela2. Para toda aplicação que utilize mais de um layout (tela), o carregamento dos layouts e de seus respectivos widgets devem estar separados em funções desenvolvidas para esse propósito. Logo, o método CarregaTelaPrincipal carrega o layout principal e seus respectivos componentes, o mesmo válido para o método CarregaTela2, que carrega o layout da tela 2 e seus respectivos componentes. Feito isso, execute a aplicação. Veja o resultado abaixo:
Aplicação em execução (na tela principal)
153
Aplicação em execução (na segunda tela)
6.1) Desenvolvendo um Sistema de Cadastro (Primeira versão)
Com o que já aprendemos neste capítulo (e também nós capítulos e tópicos anteriores) já podemos desenvolver agora uma aplicação mais interessante. Para isso, vamos criar um sistema de cadastro de usuários, onde através dele iremos cadastrar as seguintes informações: nome, telefone e endereço.
Essa aplicação vai possuir três telas, cada uma com as seguintes funcionalidades:
Tela principal (tela com opções): Nessa tela da aplicação teremos um menu que dará acesso ao cadastro do usuário e a visualização dos usuários cadastrados.
Tela de cadastro: Nesse tela o usuário irá preencher os campos solicitados pela aplicação e em seguida o mesmo poderá cadastrar para que as informações sejam registradas.
Tela de visualização de dados: Nessa tela poderão ser visualizados os dados (usuários) cadastrados. Se nada foi cadastrado na aplicação, será exibida uma mensagem informando essa situação.
154
Nessa primeira versão da nossa aplicação que iremos desenvolver, utilizaremos somente uma única Activity com vários arquivos XML (onde cada arquivo XML representa uma tela da nossa aplicação) que será gerenciados pela mesma.
Bom, vamos construir a nossa aplicação. Crie um novo projeto com os seguintes dados abaixo:
Application Name: Sistema de Cadastro
Company Domain : app.usuario
Project location : (Fica a sua escolha)
Activity Name: MainActivity
Layout Name : tela_principal
Title : Sistema de Cadastro
Resource Menu Name : menu_ aplicacao
Dentro da pasta “drawable” vamos colocar uma imagem que acompanha este material (que se encontra dentro do diretório “Tópico 6.x”) chamada “icone_programa.png”.
Depois de colocar a imagem solicitada, abra o código XML do arquivo “tela_principal.xml” para adicionarmos o seguinte código XML abaixo :
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/layouttopo_tp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fdb46d"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icone_programa" />
155
<LinearLayout
android:id="@+id/layout_titulo_programa_tp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Sistema de"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Cadastro"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="Bem vindo ao Sistema de Cadastro. Esse é um pequeno
software de cadastro de usuários. Escolha uma das opções abaixo :"
android:textSize="18sp" />
<Button
android:id="@+id/btcadastrar_usuario"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cadastrar Usuário" />
<Button
android:id="@+id/bt_listar_usuarios_cadastrados"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Listar usuários cadastrados" />
</LinearLayout>
Depois de colocarmos o código XML solicitado, teremos o seguinte resultado abaixo :
156
Layout da tela principal da aplicação
Agora vamos criar mais uma tela (arquivo de layout XML) para nossa aplicação, referente à tela de cadastro de usuário. Para isso vamos clicar com o botão direito sobre a pasta “layout” e em seguida vamos chamar o recurso de criação de arquivos de layout XML para Android (o “Layout Resource File”, conforme já foi mostrado anteriormente no último exemplo). O nome do nosso arquivo de layout XML vai ser “cadastro_de_usuario”.
Depois de criado o arquivo vamos abrir o editor de XML para digitarmos o seguinte código refente a tela de cadastro de usuários :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/layouttopo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fdb46d"
android:orientation="horizontal" >
157
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icone_programa" />
<LinearLayout
android:id="@+id/layout_titulo_programa"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Cadastro de"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Usuário"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="@+id/txtnome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Preencha os dados abaixo :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:text="Nome :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/ednome"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<requestFocus />
</EditText>
158
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Endereço :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/edendereco"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Telefone :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/edtelefone"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="@+id/layout_botoes_cadastro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="@+id/btcadastrar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cadastrar" />
<Button
android:id="@+id/btcancelar_cadastro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancelar" />
</LinearLayout>
</LinearLayout>
CONTINUE >>>
Comentários
Postar um comentário