Ícone do componente AutoCompleteTextView
Neste capítulo tivemos a oportunidade de conhecer os componentes básicos e essenciais da plataforma Android. No próximo capitulo iremos construir diversas aplicações que façam uso da maioria dos componentes descritos nessa seção.
95
Capitulo 5 Capitulo 5 Capitulo 5 Capitulo 5 Construindo nossas Construindo nossas Construindo nossas Construindo nossas Construindo nossas Construindo nossas Construindo nossas aplicações no Android aplicações no Androidaplicações no Android aplicações no Androidaplicações no Android aplicações no Android aplicações no Androidaplicações no Android
amos colocar a mão na massa ? A partir de agora iremos começar a desenvolver as nossas aplicações no Android utilizando os componentes descritos no capítulo anterior. Começaremos com aplicações simples e aos poucos iremos evoluir, criando aplicações mais ricas.
5.1) Desenvolvendo uma Calculadora Básica
Vamos construir a nossa primeira aplicação que vai consistir em uma calculadora básica com as quatro operações aritméticas. Para criar um projeto no Android Studio vamos no menu “File”/“New Project”. Confira na figura seguinte:
New Project (pelo menu)
Seguido os passos descritos acima, irá se abrir a caixa de diálogo abaixo:
V
96
Criando o projeto Calculadora
Agora vamos preencher os campos, conforme abaixo:
Application Name : Calculadora
Company Domain : app.usuario
Project location : (Fica a sua escolha)
Confira como ficou na figura seguinte:
97
Criando o projeto Calculadora – Campos preenchidos
Agora na próxima seção (clicando em “Next”) será aberta a tela de configurações do projeto (que já estão previamente definidas.Nela não iremos alterar nada, simplesmente vamos clicar em “Next”). Na próxima etapa vamos escolher qual tipo de Activity iremos criar (por padrão, o BlackActivity), conforme demonstra a próxima imagem:
98
Criando o projeto Calculadora – Definindo a Activity
Agora na próxima seção (clicando em “Next”) vamos preencher as informações da Activity, conforme é mostrado abaixo:
Activity Name : CalculadoraActivity
Layout Name : activity_calculadora
Title : Calculadora
Resource Menu Name : menu_calculadora
Confira como ficou na figura seguinte:
99
Criando o projeto Calculadora – Informações preenchidas
Depois de preenchidas as informações, vamos criar o nosso projeto clicando no botão “Finish”. Feito isso o nosso projeto será criado.
Antes de começarmos a desenvolver nosso projeto, vamos alterar a “Skin” do nosso dispositivo (preview). O padrão é o “Nexus 4”. Vamos trocar para o “Nexus S”, conforme indica a figura a seguir :
1) Clique aqui.
2) Surgirá este menu.
3) Selecione esta opção.
100
A escolha da Skin mencionada é pela fato de a mesma “se aproximar” das dimensões do emulador, porém , FIQUE A VONTADE para escolher a Skin que você desejar.
Na tela da aplicação selecione o componente TextView na tela (cuja frase está escrito “Hello world”) e vamos alterar as seguintes propriedades, como segue:
TextView
Propriedade
Valor
text
Digite o primeiro número
Veja o resultado:
Tela da aplicação em desenvolvimento
Agora arraste e solte um componente “Plain Text” (EditText) presente dentro da seção “Text Fields” abaixo do título. Veja como ficou em seguida :
101
Componente “Plain Text” (EditText) inserido
Com o componente selecionado, vamos em suas propriedades para alterar os seguintes valores, como segue :
EditText (Plan Text)
Propriedade
Valor
layout:width
match_parent
id
ednumero1
Na propriedade “layout:width” especificamos a largura do nosso componente, que no caso de nossa aplicação possuirá (ocupará) a mesma largura da tela do dispositivo (“match_parent”).
Em “id” especificamos o nome do nosso componente, que será tratado (e identificado) na programação ao utilizarmos a linguagem Java. Porque alterar a sua ID ? Isso é necessário pois vamos “manipular” esse componente através do código Java, então nada mais justo do que trabalhar com componentes cujos nomes estejam de forma clara e organizada.
Agora arraste e solte um componente TextView abaixo da caixa de texto que inserimos, e em seguida altere as seguintes propriedades:
TextView
Propriedade
Valor
text
Digite o segundo número
102
Logo após , arraste e solte um componente Plain Text (EditText), situado na guia “Text Fields”, abaixo do componente acima inserido, e altere seu nome (ID) para “ednumero2” e sua largura (layout:width) para “match_parent”. (conforme já foi mostrado).
Veja o resultado:
Tela da aplicação em desenvolvimento
Agora vamos adicionar um componente Button abaixo da caixa de texto, que vai ser o nosso botão de “somar” os números. Depois de adicionar, vamos alterar as suas propriedades, conforme é mostrado abaixo:
Button
Propriedade
Valor
text
Somar
layout:width
match_parent
id
btsomar
Vejamos o resultado abaixo:
103
Tela da aplicação em desenvolvimento
Para começarmos, vamos fazer o teste da nossa aplicação realizando somente soma dos números (implementaremos as outras operações restantes daqui a pouco).
Para inserirmos o código em nossa classe (o arquivo “CalculadoraActivity.java”) , basta seguir os procedimentos da figura a seguir :
Chamando o arquivo “CalculadoraActivity.java”
1) Clique aqui.
2) Selecione esta opção.
104
Feito isso será aberto o seu conteúdo conforme é demonstrado na imagem seguinte:
Conteúdo do arquivo “CalculadoraActivity.java”
Se você observar no código acima, na seção onde se declaram os pacotes, existe a seguinte instrução :
import ...;
Nessa linha se você observar (conforme demonstra a figura acima), existe um sinal de “+”, que na verdade indica que há mais de uma importação (processo esse que o eclipse faz para “simplificar” e “organizar” a compreensão do código). Para você visualizar todos os pacotes utilizados basta clicar nesse sinal. Confira o resultado na próxima figura:
Visualizando todos os pacotes
105
Para começar, vamos importar alguns pacotes da plataforma Android que serão necessários para o desenvolvimento da nossa aplicação. Na seção onde se encontram os pacotes importados , vamos importar mais alguns pacotes digitando as seguintes linhas de comando abaixo:
import android.widget.*;
import android.view.*;
import android.app.*;
Agora no código do nosso programa, antes (EU DISSE ANTES) da linha:
@Override
Digite:
EditText ednumero1,ednumero2;
Button btsomar;
Vejamos como ficou na figura seguinte :
Atributos declarados
Agora vamos à explicação do código acima. Como você pode ver , os widgets também podem ser usados no nosso código Java. Se no código XML eu possuir um widget do tipo EditText, para acessar esse componente pelo Java é preciso fazer uso da classe EditText. Cada widget no XML possui o seu respectivo “em classe” Java, logo, se possui um widget Button, para acessá-lo devo fazer uso da classe Button e assim vai.
Agora dentro do método onCreate após a linha:
setContentView(R.layout.activity_calculadora);
106
Digite as seguintes linhas de código:
ednumero1 = (EditText) findViewById(R.id.ednumero1);
ednumero2 = (EditText) findViewById(R.id.ednumero2);
btsomar = (Button) findViewById(R.id.btsomar);
Veja como ficou na figura abaixo :
Código digitado
Agora vou explicar as linhas de comando acima que adicionamos. A linha:
ednumero1 = (EditText) findViewById(R.id.ednumero1);
Faz referência ao primeiro EditText, através do método findViewById com o parâmetro “R.id.numero1”.
Se lembra do nome da primeira EditText que está no código XML? Ela se chama “ednumero1”.
Vamos entender. Observe que para fazer referência ao EditText pelo método findViewById eu passei o parâmetro “R.id.numero1”.
107
Na segunda instrução que digitamos, para fazer referência à segunda EditText, cujo nome é “ednumero2”, pelo método findViewById, passei o parâmetro “R.id.numero2”.
Como você pode ver, estou fazendo uso da classe R (uma classe “interna” do Android, onde todos os elementos e diretórios são estruturados em atributos da classe) que funciona como interface entre o código Java e o arquivo XML. O procedimento é o mesmo para o componente Button.
Agora iremos adicionar um evento em nosso componente Button que será responsável por “detectar” toda vez que ele for “clicado” (tocado na tela), executando um conjunto de instruções após o evento (que vai consistir na soma dos números e na exibição do resultado). Para adicionarmos esse evento em nosso componente, basta escrevermos, após a última instrução que adicionamos, a seguinte linha de código destacado em azul:
Comentários
Postar um comentário