|
Nesse projeto vamos utilizar dois componentes Imagem e carregar duas imagens diferen-tes em tempo de execu��o. Quando o projeto
for executado ser� carregada uma mesma imagem (um cubo azul) para cada um dos componentes Imagem. Quando uma imagem for clicada ser�
carregada a figura correspondente (no caso, uma fruta, Banana ou Uva), ou seja, como se fosse duas imagens em uma s� carta, como um
baralho. O nome de cada fruta ser� mostrado em uma legenda. Al�m disso, vamos utilizar um bot�o para reiniciar o processo, ou seja,
carregar a imagem do cubo azul em ambos os componentes Imagem, como se o projeto fosse executado pela primeira vez.
Ent�o vejamos como desenvolver esse projeto:
� Abra o App Inventor acessando o link:
App Inventor 2
� Na tela apresentada, clique no Bot�o Create Apps!, em seguida entre com sua conta.
� Crie um novo projeto com o nome: ViraImagem.
Feito isso, vamos alterar algumas propriedades da tela principal (Screen1).
� Clique em Screen1 na se��o Componentes.
� AlinhamentoHorizontal: Centro: 3.
� CorDeFundo: utilize qualquer cor de sua prefer�ncia.
� PrimaryColor: selecione uma cor que combine com a cor de fundo.
� Theme: Dark.
� T�tulo: Virando uma Imagem.
Agora vamos inserir os componentes do nosso projeto na seguinte ordem:
� 1 Layout Organiza��oHorizontal.
� 2 Imagens (coloque as imagens dentro do layout).
� 1 Legenda.
� 1 Layout Organiza��oHorizontal (usado apenas como separador).
� 1 Bot�o.
Agora vamos alterar algumas propriedades dos componentes:
Alterando as propriedades do Layout Organiza��oHorizontal:
� Nome: layoutOrgHorizontal.
� AlinhamentoHorizontal: Centro: 3.
� CorDeFundo: Azul.
Alterando as propriedades dos componentes Imagem:
� Nomes: imgFoto1 e imgFoto2.
� Clickable: marque o checkbox para tornar as imagens clic�veis.
Alterando as propriedades da Legenda:
� Nome: legFruta.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 20.
� Texto: Fruta.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Azul.
Alterando as propriedades do Layout Organiza��oHorizontal:
� Nome: layoutOrgHorizontal2.
� AlinhamentoHorizontal: Centro: 3.
� CorDeFundo: Azul.
� Altura: selecione a op��o percentagem e digite: 1.
� Largura: selecione a op��o percentagem e digite: 100.
Alterando as propriedades do Bot�o:
� Nome: btnReiniciar.
� Imagem: selecione uma imagem em forma de bot�o (de prefer�ncia no formato .png).
� Texto: Reiniciar.
� AlinhamentoDoTexto: Centro: 1.
Feito isso, o seu projeto dever� ficar igual ao da Figura 20.1:
Figura 20.1 � Projeto com os componentes
inseridos e configurados.
Agora precisamos enviar as tr�s imagens que dever�o ser carregadas no projeto em tempo de execu��o, o cubo azul quando o
projeto for executado e as frutas quando os respectivos bot�es forem clicados. Voc� poder� utilizar quaisquer imagens de sua prefer�ncia,
desde que sejam de 128x128 pixels para ficarem padronizadas. Vamos utilizar duas imagens de frutas, que vamos disponibilizar no link no
final desse tutorial.
Ent�o vamos l�:
� Na se��o Midia, logo abaixo da se��o Componentes, clique no bot�o Enviar Arquivo.
� Na janela apresentada, conforme mostra a Figura 20.2:
Figura 20.2 � Janela para escolher arquivo.
� Clique no bot�o Escolher arquivo.
� Feito isso, ser� mostrada a janela do Windows Explorer para voc� selecionar a pasta e o arquivo para carregar.
Depois de selecionar todas as imagens, a sua se��o Midia ficar� conforme mostra a Figura 20.3:
Figura 20.3 � Lista das imagens
carregadas.
C�digos:
Vejamos agora os c�digos dos componentes desse projeto:
C�digo para a Tela Principal (Screen1):
� Na tela Blocos, clique em Screen1 e arraste o terceiro bloco para a �rea em branco.
� Clique no componente imgFoto1, arraste o primeiro bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
Anima��o por: Imagem.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
box.png.
� Clique no componente imgFoto2, arraste o primeiro bloco verde e encaixe logo abaixo do �ltimo bloco. Altere a op��o Anima��o
por: Imagem.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
box.png.
Feito isso, o c�digo do seu projeto dever� ficar igual ao da Figura 20.4:
Figura 20.4 � C�digo final da Tela Principal.
Esse bloco nos diz o seguinte:
Quando o projeto for executado carregue nos componentes imgFoto1 e imgFoto2 a imagem do cubo azul.
C�digo para o componente imgFoto1:
� Clique no componente imgFoto1, arraste o primeiro bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
Anima��o por: Imagem.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
uva.png.
� Clique no componente legNomeFruta, arraste o segundo bloco verde e encaixe logo abaixo do �ltimo bloco. Altere a op��o
CorDeFundo para: Texto.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
Uva.
C�digo para o componente imgFoto2:
� Clique no componente imgFoto2, arraste o primeiro bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
Anima��o por: Imagem.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
banana.png.
� Clique no componente legNomeFruta, arraste o segundo bloco verde e encaixe logo abaixo do �ltimo bloco. Altere a op��o
CorDeFundo para: Texto.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
Banana.
Feito isso, seu projeto dever� ficar igual ao da Figura 20.5.:
Figura 20.5� C�digos finais dos componentes imgFoto1 e imgFoto2.
Esse bloco nos diz o seguinte:
Quando o componente imgFoto1 for clicado, mostre a imagem da uva no pr�prio componente e seu nome: Uva na legenda legNomeFruta.
Para o segundo componente o funcionamento � o mesmo.
C�digo para o componente Bot�o:
� Na se��o Blocos, clique no componente btnReiniciar, e arraste o primeiro bloco para a �rea em branco.
� Clique no componente imgFoto1, arraste o primeiro bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
Anima��o para Imagem.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
box.png.
� Clique no componente imgFoto2, arraste o primeiro bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
Anima��o para Imagem.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
box.png.
� Clique no componente legNomeFruta, arraste o segundo bloco verde e encaixe logo abaixo do �ltimo bloco. Altere a op��o
CorDeFundo para Texto.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Preencha a lacuna entres aspas com:
Fruta.
Feito isso, seu projeto dever� ficar igual ao da Figura 20.6:
Figura 20.6 � C�digo final do componente btnReiniciar.
Esse bloco nos diz o seguinte:
Quando o componente btnReiniciar preencha os dois componentes Imagem com a figura do cubo azul. Seria como estivesse reiniciando
um jogo. Em seguida, o nome Fruta ser� mostrado na legenda.
Sugest�o: Voc� poderia aproveitar esse projeto para criar um jogo de Mem�ria, adicionando mais imagens, n�mero de tentativas
etc.
Dessa forma, conclu�mos o nosso projeto. Teste seu projeto em um dispositivo real e confira o resultado.
Voc� pode baixar o c�digo completo desse projeto acessando os links:
ViraImagem.aia
ViraImagem.apk
ViraImagem-imagens.rar
|
