|
Nesse projeto vamos utilizar um componente Imagem com uma imagem qualquer, de forma que, quando o dispositivo for girado
para qualquer posição, retrato ou paisagem, a imagem também gire na mesma posição. Para isso, vamos utilizar a propriedade da tela
principal chamada OrientaçãoDaTela.
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: OrientacaoImagem.
Agora vamos alterar algumas propriedades da tela principal (Screen1).
Alterando as propriedades da Tela Principal:
• Clique em Screen1 na seção Componentes.
• AlinhamentoHorizontal: Centro: 3.
• CorDeFundo: utilize qualquer cor de sua preferência.
• PrimaryColor: Preto.
• OrientaçãoDaTela: selecione a opção: Sensor.
• Theme: Device Default.
• Título: Orientação de uma Imagem.
Iremos agora inserir os componentes do nosso projeto na seguinte ordem:
• 1 Legenda.
• 1 Imagem.
Agora vamos alterar algumas propriedades dos componentes:
Alterando as propriedades da Legenda:
• Nome: legMensagem.
• FonteNegrito: marque o checkbox para alterar o texto para negrito.
• TamanhDaFonte: 20.
• Texto: Gire o Dispositivo.
• AlinhamentoDoTexto: Centro: 1.
• CorDeTexto: Preto.
Alterando as propriedades da Imagem:
• Nome: imgFoto. Clique no componente e utilize o botão Renomear na seção Componentes.
• Altura: selecione a opção percentagem e digite: 80.
• Largura: selecione a opção percentagem e digite: 90.
• Imagem: clique na caixa de texto para selecionar a imagem para ser carregada no componente. Insira qualquer imagem de
sua preferência.
Feito isso, o seu projeto deverá ficar igual ao da Figura 18.1:
Figura 18.1– Projeto com os componentes
inseridos e configurados.
Códigos:
Nenhum componente desse projeto receberá código, tendo em vista que a finalidade desse projeto foi mostrar como utilizar o
sensor do dispositivo para girar uma imagem (ou outros componentes) juntamente com o giro do dispositivo.
Agora teste seu projeto em um dispositivo real e confira o resultado com as Figuras 18.2 e 18.3.
Figura 18.2 – Projeto com a posição Retrato.
Figura 18.3 – Projeto com a posição Paisagem.
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:
OrientacaoImagem.aia
OrientacaoImagem.apk
|
