|
Nesse projeto vamos utilizar algumas imagens, de forma que, quando elas forem clicadas, uma mensagem ser� mostrada em uma legenda.
Para isso vamos utilizar oito imagens com algumas bandeiras do Brasil. Quando uma bandeira for clicada o nome do estado referente �quela
bandeira ser� mostrada na legenda. Esse projeto � ideal para voc� fazer uma esp�cie de teste de m�ltipla escolha. Voc� poderia utilizar
para as imagens os estados de um pa�s, sinais de tr�nsito, presidentes de um determinado pa�s, entre outras sugest�es.
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: ImagensClicaveis.
Agora vamos alterar algumas propriedades da tela principal (Screen1).
� Clique em Screen1 na se��o Componentes.
� AlinhamentoHorizontal: Centro: 3.
� CorDeFundo: Laranja.
� PrimaryColor: Amarelo.
� Theme: Black Tile Text.
� T�tulo: Imagens Clic�veis.
Iremos agora inserir os componentes do nosso projeto na seguinte ordem:
� 1 Legenda.
� 1 Layout Organiza��oEmTabela.
� 8 Imagens.
� 1 Legenda.
Agora vamos alterar algumas propriedades dos componentes:
Alterando as propriedades da primeira Legenda:
� Nome: legMensagem.
� CorDeFundo: Azul.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 20.
� Texto: Clique na Bandeira para saber o nome do Estado.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades do Layout Organiza��oEmTabela:
� Colunas: 2.
� Largura: selecione a op��o percentagem e digite: 90.
� Linhas: 4.
Alterando as propriedades da primeira Imagem:
� Nome: imgAC.
� Clickable: marque o checkbox para tornar a imagem clic�vel.
� Imagem: clique na caixa de texto para selecionar a imagem para ser carregada no componente: Acre.png.
Utilize o mesmo procedimento para alterar as propriedades dos outros componentes Imagem de acordo com a Tabela a seguir:
Tabela 1
Alterando as propriedades da segunda Legenda:
� Nome: legNomeBandeira.
� CorDeFundo: Vermelho.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 20.
� Largura: selecione a op��o percentagem e digite:90.
� Texto: Nome do Estado.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Feito isso, o seu projeto dever� ficar igual ao da Figura 16.1:
Figura 16.1 � Projeto com os componentes
inseridos e configurados.
Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional executando a tarefa para o qual foi designado.
Dos componentes utilizados no projeto somente os componentes Imagem receber�o c�digos, os outros s�o apenas informativos,
n�o necessitando de nenhum c�digo.
Ent�o vejamos:
� Na tela Blocos, clique no componente imgAC e arraste o primeiro bloco para a �rea em branco.
� Clique no componente legNomeBandeira, arraste o segundo bloco e encaixe na lacuna �fazer� do bloco marrom.
� Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco colocado.
� Na lacuna entre aspas desse bloco digite: Acre.
Feito isso, seu projeto dever� ficar igual ao da Figura 16.2:
Figura 16.2 � C�digo finalizado da primeira Imagem.
Esse bloco nos diz o seguinte:
Quando a imagem com a Bandeira do Acre for clicada, ser� mostrado na legenda legNomeBandeira o nome do Estado: Acre. Da mesma
forma, os outros componentes Imagem mostrar�o o nome do seu respectivo Estado quando forem clicados.
Utilize o mesmo procedimento para criar os c�digos dos outros componentes Imagem. Depois de terminado todo o c�digo, teste o
seu projeto em um dispositivo e confira o resultado.
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:
ImagensClicaveis.aia
ImagensClicaveis.apk
|
