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

  Agora vamos alterar algumas propriedades dos componentes:

  Alterando as propriedades da Tela Principal:

  � Clique em Screen1 na se��o Componentes.
  � AlinhamentoHorizontal: selecione a op��o: Centro: 3.
  � CorDeFundo: selecione Custom para criar uma cor personalizada. Por exemplo: #eb2f0589.
  � Theme: Dark.
  � T�tulo: digite: Dimensionar Imagem, e tecle Enter para confirmar.

  Agora vamos inserir os componentes do nosso projeto (Imagem e Bot�es). Primeiramente precisamos utilizar um layout do tipo Organiza��oHorizontal para colocar os dois bot�es na mesma linha, e logo em seguida a imagem, na seguinte ordem:

  � 1 layout Organiza��oHorizontal.
  � 2 Bot�es (insira os bot�es no layout).
  � 1 Imagem.

  Agora vamos alterar algumas propriedades dos componentes:

  Alterando as propriedades do primeiro Bot�o:

  � Nome: btnZoomIn. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Azul.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � Largura: selecione a op��o percentagem e digite: 20.
  � Forma: arredondado.
  � Texto: Zoom+.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades do segundo Bot�o:

  � Nome: btnZoomOut.
  � CorDeFundo: Azul.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � Largura: selecione a op��o percentagem e digite: 20.
  � Forma: arredondado.
  � Texto: Zoom-.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades da Imagem:

  � Nome: imgFoto.
  � Altura: selecione a op��o percentagem e digite: 50.
  � Largura: selecione a op��o percentagem e digite: 50.
  � Imagem: clique na caixa de texto para escolher uma imagem. Em seguida, clique no bot�o Enviar Arquivo. Na pequena janela mostrada, clique no bot�o Escolher Arquivo. Feito isso, ser� mostrada a janela do Explorador de Arquivos do Windows. Selecione a pasta e o arquivo e retorne ao App Inventor.
  � RotationAngle: �s vezes a imagem n�o � inserida no componente na sua posi��o original. Nesse caso voc� poder� digitar o �ngulo apropriado nessa caixa de texto para que a imagem fique na posi��o correta, ou voc� poder� tentar carregar outra imagem.
  � RedimensionarParaCaber: se por acaso a imagem que voc� inserir no componente n�o preencher totalmente a �rea do ret�ngulo, voc� poder� clicar nessa op��o para resolver esse problema. Mas nesse caso a imagem poder� ficar distorcida.

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

Figura 13.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.

  Mas antes de criarmos os blocos dos componentes, precisamos criar duas vari�veis globais para armazenar a altura e a largura da imagem.

  Vamos l� ent�o:

  C�digos para as vari�veis:

  � Na tela Blocos, clique na categoria Vari�veis.
  � Arraste o primeiro bloco para a �rea em branco. Altere o r�tulo nome para: altura (essa ser� a vari�vel utilizada para armazenar a altura da imagem).
  � Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente. Mantenha o valor 50.
  � Clique novamente na tela Blocos, clique na categoria Vari�veis.
  � Arraste o primeiro bloco para a �rea em branco. Altere o r�tulo nome para: largura (essa ser� a vari�vel utilizada para armazenar a largura da imagem).
  � Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente. Mantenha o valor 50. Isso significa que quando o aplicativo for executado ser�o criadas essas vari�veis com o valor 50.

  Veja na Figura 13.2 como dever� ficar o seu c�digo:

Figura 13.2 � Vari�veis inicializadas.

  Agora vamos criar os c�digos dos componentes:

  Somente a tela principal (Screen1) e os bot�es receber�o c�digos. Nesse projeto n�o ser� necess�rio criar nenhum c�digo para o componente Imagem.

  Ent�o vejamos:

  C�digo para a tela principal (Screen1):

  � Na tela Blocos, clique no componente Screen1 e arraste o terceiro bloco para a �rea em branco.
  � Na tela Blocos, clique no componente imgFoto, arraste o primeiro bloco verde e encaixe na primeira lacuna do �ltimo bloco.
  � Clique na pequena seta e altere a op��o Anima��o para: global PercentualDeAltura.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final desse bloco.
  � Clique na pequena seta e selecione a op��o: global altura.
  � Clique no componente imgFoto novamente, arraste o primeiro bloco verde e encaixe logo abaixo do bloco verde.
  � Clique na pequena seta e altere a op��o Anima��o para: global PercentualDeLargura
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final desse bloco.
  � Clique na pequena seta e seleciona a op��o: global largura

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

Figura 13.3 � C�digo referente � tela principal.

  Esse bloco nos diz o seguinte:

  Quando o projeto for executado, mostre a imagem na tela com 50 por cento de sua altura e de sua largura em rela��o � tela.

  C�digo para o primeiro Bot�o:

  C�digo para a parte da altura:

  � Na tela Blocos, clique no componente btnZoomIn e arraste o primeiro bloco para a �rea em branco.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe na lacuna �fazer� do bloco marrom. Clique na pequena seta e selecione a op��o: global altura.
  � Clique na categoria Matem�tica, arraste o quarto bloco e encaixe no final do �ltimo bloco colocado.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul. Clique na pequena seta e selecione a op��o: global altura.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na segunda lacuna do bloco azul.
  � Altere o valor 0 por: 1.
  � Clique no componente imgFoto, arraste o primeiro bloco verde e encaixe logo abaixo do bloco vermelho.
  � Altere a op��o Anima��o para: PercentualDeAltura.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde. Clique na pequena seta e selecione a op��o: global altura.

  C�digo para a parte da largura:

  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe logo abaixo do bloco verde.
  � Clique na pequena seta e selecione a op��o: global largura.
  � Clique na categoria Matem�tica, arraste o quarto bloco e encaixe no final do �ltimo bloco colocado.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul.
  � Clique na pequena seta e selecione a op��o: global largura.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na segunda lacuna do bloco azul. Altere o valor 0 por: 1.
  � Clique no componente imgFoto, arraste o primeiro bloco verde e encaixe logo abaixo do bloco vermelho.
  � Altere a op��o Anima��o para: PercentualDeLargura.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde. Clique na pequena seta e selecione a op��o: global largura.

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

Figura 13.4 � C�digo final do primeiro Bot�o.

  Esse bloco nos diz o seguinte:

  Quanto o bot�o Zoom+ (btnZoomIn) for clicado, a altura e a largura da imagem ser�o aumentadas proporcionalmente em uma unidade a partir dos seus valores atualizados.

  C�digo para o segundo Bot�o:

  Utilize o mesmo procedimento do c�digo do primeiro bot�o.

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

Figura 13.5 � C�digo final do segundo Bot�o.

  Esse bloco nos diz o seguinte:

  Quanto o bot�o Zoom- (btnZoomOut) for clicado, a altura e a largura da imagem ser�o reduzidas proporcionalmente em uma unidade a partir dos seus valores atualizados.

  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:

  DimensionaImagem.aia

  DimensionaImagem.apk