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

  Agora vamos alterar algumas propriedades da tela principal:

  � Clique em Screen1 na se��o Componentes.
  � AlinhamentoHorizontal: Centro: 3.
  � CorDeFundo: Amarelo.
  � Theme: Dark.
  � T�tulo: Dimensionar Imagem-Deslizador.

  Feito isso, insira os componentes do nosso projeto na seguinte ordem:

  � 1 Deslizador.
  � 1 Legenda.
  � 1 Imagem.

  Agora vamos alterar algumas propriedades dos componentes:

  Alterando as propriedades do Deslizador:

  � Nome: desValor.
  � Cor�Esquerda: Vermelho.
  � Cor�Direita: Azul.
  � Largura: selecione a op��o percentagem e digite: 90.
  � ValorM�ximo: 100.
  � ValorM�nimo: 0.
  � Posi��oDoIndicador: 50.

  Alterando as propriedades da Legenda:

  � Nome: legPercentual.
  � CorDeFundo: Azul.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 20.
  � Largura: selecione a op��o percentagem e digite: 10.
  � Texto: 0.
  � 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 14.1:

Figura 14.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:

  Inicializa��o das vari�veis:

  Utilize o mesmo procedimento do projeto anterior para a cria��o das duas vari�veis (altura e largura), inclusive com os mesmos valores.

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

Figura 14.2 � Vari�veis inicializadas.

  Esse bloco nos diz o seguinte:

  Quando o projeto for inicializado ser�o criadas duas vari�veis globais, uma para a altura e outra para a largura, ambas com o valor 50.

  Agora vamos criar os c�digos dos componentes:

  Somente a tela principal (Screen1) e o Deslizador receber�o c�digos.

  Ent�o vejamos:

  C�digo para a tela principal (Screen1):

  Utilize o mesmo procedimento do projeto anterior para dimensionar a imagem quando o projeto for executado, entretanto, adicione o seguinte c�digo:

  � Na tela Blocos, clique no componente legPercentual e arraste o segundo bloco e en-caixe logo abaixo do bloco verde.
  � Clique na pequena seta e altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe no final do bloco verde. Altere o valor para: 50.

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

Figura 14.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, e mostre na legenda legPercentual o valor 50.

  Criando o C�digo do Deslizador:

  � Na tela Blocos, clique no componente desValor e arraste o primeiro bloco para a �rea em branco.
  � Clique no componente legPercentual, arraste o segundo bloco e encaixe na primeira lacuna do bloco marrom.
  � Clique na pequena seta e altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Matem�tica, arraste o bloco �arredondar� e encaixe no final do �ltimo bloco colocado.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco azul.
  � Clique na pequena seta e altere a op��o para: posi��oDoIndicador.
  � Clique no componente imgFoto, arraste o primeiro bloco verde e encaixe logo abaixo do bloco verde.
  � Clique na segunda seta e selecione a op��o para: PercentualDeAltura.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde.
  � Clique na pequena seta e altere a op��o para: posi��oDoIndicador.
  � Clique novamente no componente imgFoto, arraste o primeiro bloco verde e encaixe logo abaixo do �ltimo bloco.
  � Clique na segunda seta e selecione a op��o para: PercentualDeLargura.
  � Clique novamente na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde.
  � Clique na pequena seta e altere a op��o para: posi��oDoIndicador.

  Feito isso, o c�digo do Deslizador dever� ficar igual ao da Figura 14.4:

Figura 14.4 � C�digo do Deslizador finalizado.

  Esse bloco diz o seguinte:

  Quando a posi��o do Deslizador for alterada, para mais ou para menos, o valor atual do Deslizador ser� mostrado na legenda legPercentual, e a foto ser� aumentada ou reduzida para o percentual indicado no Deslizador.

  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:

  DimensionaImagemDeslizador.aia

  DimensionaImagemDeslizador.apk