( TIAGO DOS SANTOS MENDES ) PROGRAMAÇÃO DISPOSITIVOS MOVEIS ANDROID STUDIO

Transcrição

1 Serviço Nacional de Aprendizagem Comercial E.E.P. Senac Pelotas Centro Histórico Programa Nacional de Acesso ao Ensino Técnico e Emprego Curso Técnico em Informática ( TIAGO DOS SANTOS MENDES ) PROGRAMAÇÃO DISPOSITIVOS MOVEIS ANDROID STUDIO Pelotas 2015

2 ANDROID STUDIO Introdução: Como o Android Studio instalado e configurado e também suas dependências como JDK e Android SDK pode-se começar a criar o seu primeiro projeto, e para criamos este novo projeto devemos seguir alguns passos importantes para posteriormente não termos problemas futuros, vamos a criação do novo projeto. Criando novo projeto no Android Studio: Ao executar pela primeira vez o software será apresentado uma tela de boas vindas com um menu de opções conforme mostra a imagem figura 1, sendo elas, ( 1ª criar um novo projeto, 2ª abrir um projeto já existente, 3ª importar um código de um projeto, 4ª verificar a entrada de um projeto já existente de outras plataformas, 5ª importar projetos de outras plataformas como Eclipse e 6ª configurações no software e 7ª e ultima informações sobre o Android Studio ). Figura 1 ( Janela de Boas Vidas Android Studio ).

3 Como o objetivo é criar uma calculadora simples para somar dois números devemos clicar na primeira opção para criarmos um projeto novo. Logo após abrirá uma nova janela solicitando as informações iniciais ao projeto, como pode-se ver na imagem figura 2 que a primeira informação será Application name, é o nome que será dado ao projeto, foi usado o nome de CalculadoraTSM, depois é solicitado que seja informado o nome do domínio da companhia, Company Domain, este não foi alterado e ficou como padrão. E a ultima opção e o local onde ficara a raiz do projeto, Project location, por padrão fica em C:\Users\Mendes\AndroidStudioProjects\CalculadoraTSM. Figura 2 ( Janela de informações iniciais do projeto ). Na próxima janela que visualiza-se na imagem figura 3, o usuário deverá informar que tipo de dispositivo irá ser implementado este projeto e qual plataforma conhecida como API usará este projeto, tendo com opções, celulares e tablets, TVs, relógios e óculos, pode-se marcar uma das opções que foi a caso desta implementação ficando marcado celulares e tablets, e com a API 14 para android 4.0 ou se achar pertinente pode ser marcada todas elas. Figura 3 ( Escolha dos dispositivos implementas e da API ).

4 Na janela seguinte conforme imagem figura 4, pode-se escolher qual tipo de activity, atividade que o projeto terá. A escolha foi a Blank Activity, atividade em branco. Figura 4 ( Escolha da Atividade do projeto ). Na próxima tela conforme imagem figura 5, o usuário terá que informar o nome da atividade, o nome do layout, titulo do projeto, e o nome do menu. Clicando em Finicsh irá ser finalizado a configuração inicial do projeto CalculadoraTSM. Figura 5 ( Informações da atividade, nome do layout e titulo do projeto ).

5 Pronto agora podemos ver na imagem figura 6 a tela onde pode-se começar a configurar o projeto CalcualdoraTSM, onde aparece uma tela de Hello World, olá mundo. Figura 6 ( Tela de boas vindas Hello World ). Clicando em Text na janela do centro correspondente a act_main.xml, podemos ver o código fonte inicial do layout do projeto frisando na imagem figura 7. Figura 7 ( Código fonte do layout do projeto ).

6 Clicando em Text na janela do centro correspondente a ActMain.java, podemos ver o código fonte inicial da implementação java do projeto frisando na imagem figura 8. Figura 8 (Código fonte da implementação java ). E o código fonte dos comandos em java do projeto na imagem figura 9, não vamos utilizar o act_main.xml do layout, iremos deletá-lo clicando com o botão direito do mouse e ir até a opção delete, aparecerá uma solicitação para confirmar a exclusão, clique em OK. Figura 9 ( Excluindo o arquivo act_main.xml do layout ).

7 Devemos criar um arquivo novo act_main.xml, que pode ser visualizada na imagem figura 10 clicando primeiro com o botão direito em cima da pasta layout, logo após New, depois XML e depois Layout XML File, assim criaremos um novo layout para o projeto. Figura 10 ( Criando um novo arquivo act_main.xml para o layout ). Na janela que abrirá será solicitado o nome do layout, terá que ser o mesmo da configuração inicial do projeto act_main, e o nome do Root Tage ficará como padrão sem precisar alterar, conforme na imagem figura 11. Figura 11 ( Janela para inserir informações do act_main do layout ).

8 A partir de agora podemos começar a adicionar os nossos componentes para a calculadora, primeiro vamos inserir um componente Medium Text, clique em cima e arraste até tela do celular no centro do software, solte-a o botão do mouse e ele ficará na parte superior esquerda. Depois devemos acrescentar um componente Number (Decimal), da mesma forma que o primeiro componente, depois mais um Medium Text, e depois mais um Number (Decimal), eles iram ficar um do lado do outro na horizontal, para fazer com que fique na vertical vamos até a LinearLayout, depois clicando em cima de orientation troque para vertical, ficará como mostra a imagem figura 12. Figura 12 ( Inserindo os componentes com o ambiente gráfico ). Temos que adicionar o botão para calcular nossos números inseridos na calculadora, para esta ação da mesma forma que usamos aos outros componentes adicionados, clicando em cima do componente Button e arrastando até tela do celular ao centro, conforme mostra a imagem figura 13. Figura 13 ( Inserindo o componente Button com o ambiente gráfico ).

9 A partir de agora com todos os componentes necessários adicionados para o projeto da calculadora, pode ser feitos os ajustes finais do layout, primeiro vamos ajustar o tamanho dos componentes inseridos que estão ocupando toda a tela do layout, conforme mostra a imagem figura 14 clique em cima do componente Number (Decimal), depois clique em cima de layout:weight e troque o valor de 1 para 0. Faça também no outro componente Number (Decimal) inserido. Figura 14 ( Ajustando o tamanho dos componentes do layout ). Após isso vamos aumentar a caixa de texto para ocupar toda a área, clique em cima deste componente, depois layout:width e vá até a opção match_parent, conforme a imagem figura 15, faça isso no outro componente também. Figura 15 ( Ajustando as caixas de textos ocupando toda área do layout ).

10 O próximo passo será tornar estes componentes inseridos em strings, clique em Medium Text, depois vá até a opção Text e ao lado clique no botão, aparecerá uma nova janela com um botão New Resource no canto inferior esquerdo, clique neste botão e depois em New String Value, digite as informações iguais estão na imagem figura 16. Figura 16 ( Tornando os componentes de texto em strings ). Faça o mesmo no outro componente Medium Text, para o componente Button vamos fazer a mesma configuração conforme a imagem figura 17. Figura 17 ( Tornando o componente Button em string ).

11 E por fim para completar a configuração do layout vamos alterar os IDs das caixas de texto e do botão calcular, clique na primeira caixa de texto e vá até a opção id e escreva, edtvalor1 e de enter. Faça o mesmo com a outra caixa de texto escrevendo edtvalor2. E para terminar faça o mesmo com o botão calcular escreva btncalcular, abaixo a imagem figura 18 como ficará esta configuração. Figura 18 ( Alterando os IDs das caixas de texto e do botão calcular ). Tudo pronto com o layout agora vamos acessar a classe ActMain mostrado na imagem figura 19. Figura 19 ( Imagem que mostra a classe ActMain, implementação java )

12 A partir de agora vamos começar a codificar a nossas classes, primeiro vamos importar os nossos pacotes para o projeto calculadora, conforme mostra a imagem figura 20 os comandos utilizados. Figura 20 ( Importando os pacotes para o projeto ). O próximo passo será criar os objetos da classe private EditText e Button para o projeto conforme mostra grifado em azul a imagem figura 21. Figura 21 ( Criando objetos da classe private ).

13 Logo após vamos recuperar os objetos da interface do projeto calculadora e também vamos implementar o ouvinte de eventos, para que o botão calcular faça uma ação ao clicá-lo, o comando implements View.OnClickListener, o comando tem a finalidade de implementar interfaces e de dar ação ao botão, a também devemos implementar o método OnClick. Estes comandos pode-se observar grifado em azul na imagem em anexo U. que será mostrado grifado em azul na imagem figura 22. Figura 22 ( Recuperar informações e implementar o ouvinte de eventos com classe implements ). No próximo comando vamos implementar o comando double para converter o valor das strings valor1 e valor2 e também a criação da variável resultado para guardar o valor1 e valor2, podemos ver na imagem figura 23, estas instruções aplicadas. Figura 23 ( Comando double para converter os valores da strings ).

14 A pós vamos implementar o comando AlertDialog.Builder, que é uma classe usada para exibir mensagens ao usuário, assim vamos poder mostrar o resultado da nossa soma para o usuário, estes comandos podemos ver destacado em azul na imagem figura 24. Figura 24 ( Comando AlertDialog.Builder, classe exibir menssagens de uma ação ). Agora devemos registrar uma ação para o vento botão, pois se não implementarmos esse comando nada acontecerá quando o botão calcular for clicado, com a imagem grifado em azul figura 25, pode-se observar os comandos implementados. Figura 25 ( setonclicklistener (this) comando para dar ação ao botão calcular ).

15 E para terminarmos o nosso projeto calculadora só esta faltando validar as entradas dos resultados antes do usuário realizar o calculo, sem estes comandos o software acusara um erro e fará com que feche a calculadora se não for inserido algum valor em um dos campos da calculadora, para que não aconteça este erro vamos usar os comandos conforme mostra a imagem figura 26. Figura 26 ( Comandos usados para validar os valores de entrada ). Depois de terminarmos todas configurações e comandos para o nosso projeto devemos testar para ver se tudo funcionando corretamente, pode-se usar um celular com o sistema android compatível com a API do projeto criado ou um emulador de Apps da plataforma android.a opção que foi adotada para testes da calculadora foi o emulador SDK Android, abaixo podemos ver as imagens figura 27, 28, 29, 30, com os resultados destes testes. Figura 27 ( Dois valores inseridos na calculadora ).

16 Figura 28 ( Resultado dos valores inseridos anterior na figura 27 ). Figura 29 ( Um só valor inserido na aplicação para teste de falta de valores na calculadora ).

17 Figura 30 ( Ação após a falta de um dos valores conforme figura 29 ).