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: SelecionaImagem.

  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: Selecionando uma Imagem.

  Agora vamos inserir os componentes do nosso projeto na seguinte ordem:

  � 1 Layout Organiza��oEmTabela.
  � 4 Caixas de Sele��o.
  � 1 Layout Organiza��oHorizontal.
  � 1 Imagem.

  Agora vamos alterar algumas propriedades dos componentes:

  Alterando as propriedades do Layout Organiza��oEmTabela:

  � Largura: selecione a op��o percentagem e digite: 80.

  Alterando as propriedades das Caixas de Sele��o:

  As propriedades das Caixas de Sele��o s�o as mesmas, com exce��o do nome do componente e da propriedade Texto, conforme mostra a Tabela 1:

Tabela 19.1

  As outras propriedades s�o as seguintes:

  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 20.
  � Largura: selecione a op��o percentagem e digite: 40.
  � CorDeTexto: Azul.

  Alterando as propriedades do Layout Organiza��oHorizontal:

  � AlinhamentoHorizontal: Centro: 3.

  Alterando as propriedades da Imagem:

  � Nome: imgFoto.
  � Altura: selecione a op��o percentagem e digite: 80.
  � Largura: selecione a op��o percentagem e digite: 40.
  � Imagem: carregue qualquer imagem de sua prefer�ncia. Essa imagem ser� carregada no componente Imagem quando o projeto for executado. Certifique-se de que as imagens sejam do mesmo tamanho. Por exemplo, 128x128, 256x256, 512x512 pixels etc.

  Feito isso, o seu projeto dever� ficar igual ao da Figura 19.1:

Figura 19.1� Projeto com os componentes
inseridos e configurados.

  Agora precisamos carregar as quatro imagens que dever�o ser carregadas no projeto em tempo de execu��o de acordo com a Caixa de Sele��o. Voc� poder� utilizar quaisquer imagens de sua prefer�ncia, desde que sejam de 128x128 pixels ou proporcionais a esse tamanho para ficarem padronizadas. Vamos utilizar quatro imagens de frutas, que vamos disponibilizar no link no final desse cap�tulo.

  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 19.2:

Figura 19.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 19.3:

Figura 19.3 � Lista das imagen carregadas.

  C�digos:

  Somente as Caixas de Sele��o receber�o c�digos.

  C�digo para a primeira Caixa de Sele��o:

  � Na tela Blocos, clique no componente csAbacaxi e arraste o primeiro bloco para a �rea em branco.
  � Clique na categoria Controle, arraste o primeiro bloco e encaixe na lacuna �fazer� desse bloco.
  � Clique na categoria L�gica, arraste o quarto bloco e encaixe na lacuna �se� do �ltimo bloco colocado.
  � Clique no componente csAbacaxi, arraste o terceiro bloco vede e encaixe na primeira lacuna do bloco l�gico.
  � Clique na categoria L�gica, arraste o segundo bloco e encaixe na segunda lacuna do bloco l�gico. Altere o valor falso para verdadeiro.
  � Clique no componente imgFoto, arraste o primeiro bloco vede e encaixe na lacuna �ent�o� 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: abacaxi.png.
  � Clique no componente csBanana, arraste o quarto bloco vede e encaixe logo abaixo do �ltimo bloco.
  � Clique na categoria L�gica, arraste o segundo bloco e encaixe no final do �ltimo bloco.
  � Clique no componente csLaranja, arraste o quarto bloco vede e encaixe logo abaixo do �ltimo bloco.
  � Clique na categoria L�gica, arraste o segundo bloco e encaixe no final do �ltimo bloco.
  � Clique no componente csUva, arraste o quarto bloco vede e encaixe logo abaixo do �ltimo bloco.
  � Clique na categoria L�gica, arraste o segundo bloco e encaixe no final do �ltimo bloco.

  Feito isso, seu projeto dever� ficar igual ao da Figura 19.4:

Figura 19.4 � C�digo final da Caixa de Sele��o csAbacaxi.

  Esse bloco nos diz o seguinte:

  Quando a Caixa de Sele��o csAbacaxi for alterada e marcada (ou clicada), o seu estado l�gico ficar� como verdadeiro, e a imagem do abacaxi ser� mostrada no componente Imagem, e as outras caixas de sele��o ficar�o automaticamente desmarcadas (estado: falso), ou seja, s� ser� permitido clicar uma caixa de sele��o de cada vez.

  Utilize o mesmo procedimento para criar os c�digos dos outros componentes Caixas de Sele��o, atentando apenas para a imagem que estiver na vez. Para isso, oriente-se pelas figuras a seguir:

Figura 19.5 � C�digo final da Caixa de Sele��o csBanana.

Figura 19.6 � C�digo final da Caixa de Sele��o csLaranja.

Figura 19.7 � C�digo final da Caixa de Sele��o csUva.

  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:

  SelecionaImagem.aia

  SelecionaImagem.apk

  SelecionaImagem-imagens.rar