Prof: Ricardo Quintão Site:

Transcrição

1 Prof: Ricardo Quintão Site:

2 Vamos agora criar o nosso primeiro projeto Android. Na criação de um projeto novo, o ADT já cria um programa de exemplo que escreve na tela a mensagem Hello World. Este programa, devido a sua extrema simplicidade, será o nosso primeiro ponto de análise. Vejamos agora o passo a passo para a criação deste projeto.

3 Click em: start a new Android Studio project. Criando um Projeto Android

4 Preencha o campo com o nome da aplicação.

5 Marque a caixa Phone and Tablet. Em seguida, defina a APIs do seu projeto em Minimum SDK. Vamos trabalhar com a API 19. Temos os seguintes campos:

6 Na tela seguinte, devemos escolher se desejamos que o SDK crie uma Activity automaticamente. Caso desejamos, devemos dizer que tipo de Activity será esta. Vamos utilizar uma Activity vazia. Faça a marcação de Empty Activity conforme a figura ao lado.

7 A próxima tela pede pelo nome da Activity e o nome do Layout. Activity Name: representa tanto o nome do Arquivo Java como também o nome da Classe que será inicializada a aplicação. Layout Name: representa o nome do arquivo.xml que conterá as especificações da tela. Estes campos já vem preenchidos com valores padrões mas, mudaremos para nomes mais sugestivos, como mostra a figura ao lado. No nosso caso: Activity Name: Activity_Tela1 Layout Name: tela1 Desmarque a caixa Backwards Compatibility (AppCompat).

8 Aguarde um tempo que o projeto será criado. Criando um Projeto Android Provavelmente o seu Layout de Tela estará configurado para utilizar a API 25. Como nossa aplicação foi projetada para a API 19, faremos então a mudança para esta API.

9

10 A aplicação será executada mostrando a tela ilustrada ao lado. Criando um Projeto Android

11 O programa de exemplo criado encontra-se no arquivo Activity_Tela1.java. Criando um Projeto Android

12 Arquivos Importantes: Criando um Projeto Android Activity_tela1.java: este arquivo contém o código fonte Java da nossa aplicação. classes são definidas e os objetos criados e executados. É neste arquivo que as nossas tela1.xml: este arquivo contém, no formato xml, os componentes da tela que será apresentada na Activity. R.java: este arquivo define a classe R que possui várias classes de constantes. Estas classes contém a identificação hexadecimal de todos os recursos definidos no projeto fazendo do arquivo R.java o elo de ligação destes recursos com o arquivo principal Java. Não altere este arquivo!!! Ele é criado automaticamente pelo referência ao arquivo R.java + acrescentar id classe id nome constante de identificação O método findviewbyid( ) retorna o ponteiro do objeto identificado no seu parâmetro. *.xml *.java Tipo Componente c = (Tipo Componente) findviewbyid(r.id.nome); Este arquivo é criado e atualizado automaticamente pelo Eclipse. Não altere o seu conteúdo!!!! R.java public static final class id { public static final int nome = 0x7f050001; }

13 Vamos analisar o arquivo Activity_tela1.java apresentado ao lado. Na linha 1 temos a identificação do projeto. Nas linha 3 e 4 são feitas as importações das classes do Android que serão usadas na aplicação. Activity_tela1.java 1: package com.example.rgquintao.mensagem; 2: 3: import android.app.activity; 4: import android.os.bundle; 5: 6: public class Activity_tela1 extends Activity 7: { 9: protected void oncreate(bundle savedinstancestate) 10: { 11: super.oncreate(savedinstancestate); 12: setcontentview(r.layout.tela1); 13: } 14: 15: }

14 Na linha 6 é definida a nossa classe Activity_tela1. Ela herda (extends) da classe Activity da biblioteca android. Na linha 8 é informado ao compilador que iremos sobrescrever um método herdado. Esta linha não é executada, ela é só um indicativo para evitar algum erro de digitação no nome do método sobrescrito. Activity_tela1.java 1: package com.example.rgquintao.mensagem; 2: 3: import android.app.activity; 4: import android.os.bundle; 5: 6: public class Activity_tela1 extends Activity 7: { 9: protected void oncreate(bundle savedinstancestate) 10: { 11: super.oncreate(savedinstancestate); 12: setcontentview(r.layout.tela1); 13: } 14: 15: }

15 Na linha 9 é indicado o método que será sobrescrito. No nosso caso, é o método oncreate(). Na linha 11 é chamado o método oncreate( ) da classe pai (super) para que a Activity seja criada. Na linha 12 é feita a apresentação da tela. O arquivo tela1.xml contém a descrição da tela a ser apresentada. Activity_tela1.java 1: package com.example.rgquintao.mensagem; 2: 3: import android.app.activity; 4: import android.os.bundle; 5: 6: public class Activity_tela1 extends Activity 7: { 9: protected void oncreate(bundle savedinstancestate) 10: { 11: super.oncreate(savedinstancestate); 12: setcontentview(r.layout.tela1); 13: } 14: 15: }

16 Vamos analisar o arquivo tela1.xml apresentado ao lado. Na linha 1 temos a definição da versão e a codificação do xml. Na linha 2 temos a definição do Layout. Mais adiante mudaremos para um Layout Linear. As linhas 3 a 5 definem três espaços de nomes: android, app e tools. As linhas 6 e 7 definem a largura e a altura da tela respectivamente. A cláusula match_parent determina que o parâmetro em questão coincida com o seu pai, no caso, o tamanho total da tela. tela1.xml 1: <?xml version="1.0" encoding="utf-8"?> 2: <android.support.constraint.constraintlayout 3: xmlns:android=" 4: xmlns:app=" 5: xmlns:tools=" 6: android:layout_width="match_parent" 7: android:layout_height="match_parent" 8: tools:context="com.example.rgquintao.mensagem.activity_tela1"> 9: 10: <TextView 11: android:layout_width="wrap_content" 12: android:layout_height="wrap_content" 13: android:text="hello World!" 14: app:layout_constraintbottom_tobottomof="parent" 15: app:layout_constraintleft_toleftof="parent" 16: app:layout_constraintright_torightof="parent" 17: app:layout_constrainttop_totopof="parent" /> 18: 19: </android.support.constraint.constraintlayout>

17 Na linha 19 temos o fechamento do Layout. Na linha 8 temos a definição de qual Activity o espaço de nomes tools está atrelada. Na linha 10 é definida uma View (objeto visual). No caso, uma TextView, isto é, um visualizador de texto. Na linha 11 e 12 são definidos os tamanhos, largura e altura, respectivamente. A cláusula wrap_content quer dizer adequar ao conteúdo. A linha 13 contém o texto a ser exibido nesta View. Nas linhas 14 a 17 a definição do posicionamento. Criando um Projeto Android tela1.xml 1: <?xml version="1.0" encoding="utf-8"?> 2: <android.support.constraint.constraintlayout 3: xmlns:android=" 4: xmlns:app=" 5: xmlns:tools=" 6: android:layout_width="match_parent" 7: android:layout_height="match_parent" 8: tools:context="com.example.rgquintao.mensagem.activity_tela1"> 9: 10: <TextView 11: android:layout_width="wrap_content" 12: android:layout_height="wrap_content" 13: android:text="hello World!" 14: app:layout_constraintbottom_tobottomof="parent" 15: app:layout_constraintleft_toleftof="parent" 16: app:layout_constraintright_torightof="parent" 17: app:layout_constrainttop_totopof="parent" /> 18: 19: </android.support.constraint.constraintlayout>

18 Vamos entender agora a diferença entre dois atributos XML de afastamento de borda: android:layout_margin e android:padding. android:layout_margin: este comando define o espaçamento da borda do objeto visual para a parte externa, gerando normalmente um afastamento entre os objetos visuais adjacentes. Este afastamento pode ser definido igualmente para as 4 bordas usando o comando android:layout_margin ou podemos definir valores individuais para cada borda com os comandos: android:layout_margintop Define a margem superior. android:layout_marginbotton Define a margem inferior. android:layout_marginleft Define a margem esquerda. android:layout_marginright Define a margem direita. Conteúdo Top Ao lado temos um exemplo em relação ao objeto central exibido na cor azul. Conteúdo Left Conteúdo Right Conteúdo Botton Conteúdo

19 android:padding: este comando define o espaçamento da borda do objeto visual para o seu conteúdo. Semelhante ao android:layout_margin, este afastamento pode ser definido igualmente para as 4 bordas usando o comando android:padding ou podemos definir valores individuais para cada borda com os comandos: android:paddingtop Define a margem superior. android:paddingbotton Define a margem inferior. android:paddingleft Define a margem esquerda. android:paddingright Define a margem direita. Ao lado temos um exemplo do uso do padding. Left Top Conteúdo Right Botton

20 Prof: Ricardo Quintão Site: