O Android está disponível em telefones e tablets. WINDEV Mobile permite criar interfaces que se adaptam facilmente ao dispositivo utilizado.
Escolher a resolução de acordo com o dispositivo
Ao criar um projeto, você deverá escolher a resolução que será utilizada nas janelas do projeto. Dois casos podem ocorrer:
Você está usando um único dispositivo de destino : neste caso, tudo o que você precisa fazer é selecionar este dispositivo na lista proposta pelo assistente.
Você está usando vários dispositivos de destino com diferentes resoluções de tela : neste caso, você deve escolher a menor resolução comum a todos os dispositivos. Através da ancoragem de controles na janela, o conteúdo será adaptado à resolução.
Orientação da janela
No Android, uma janela pode ter uma das seguintes orientações:
Livre: a janela segue a orientação do dispositivo,
Bloqueado no modo retrato,
Bloqueado no modo paisagem.
Esta orientação é definida na guia "UI" da descrição da janela ("Descrição" no menu pop-up da janela).
Nos dois últimos casos, nenhuma operação específica é necessária.
Para uma janela livre, a organização dos controles e seu tamanho devem se adaptar à orientação. O mecanismo de ancoragem deve ser usado para obter um resultado adequado.
Exemplo prático
Abra (se necessário) o projeto "My_Android_Project" que foi criado na lição anterior.
Responda
Um projeto corrigido está disponível. Para abrir este projeto, na página inicial do WINDEV Mobile (Ctrl + <), clique em "Tutorial" e selecione "Meu projeto Android (Resposta)".
Em nosso exemplo, o projeto foi criado para um telefone e foi testado no modo retrato no simulador.
We are now going to run its test in landscape mode in the simulator.
Run the project test in simulator mode:
In the quick access button area, expand "GO" if necessary and select " Debug on XXX simulator".
Remark
By default, the project test on a mobile device is proposed among the quick access buttons. After selecting " Debug on simulator" for the first time, the corresponding icon ( ) will be automatically proposed among the quick access buttons.
Validate (if necessary) the window that opens up.
The window is displayed in portrait mode.
The simulator shows an icon-based menu: .
Modify the window orientation with the "Rotation" option.
A orientação da janela muda na tela. Em nosso exemplo, a localização do botão não muda: ele não se adapta à orientação da tela.
Agora vamos modificar nossa janela para que o controle do botão "Exibir" seja centralizado e permaneça centralizado independentemente da orientação do dispositivo.
Pare o teste e volte para o editor.
Para centralizar o controle de botão na janela:
Selecione o controle (clique no controle Botão).
No painel "Alinhamento", no grupo "Centralização e distribuição", clique em "Centralizar no pai (Horz.)".
Para que o controle Button permaneça centralizado na janela, usaremos a ancoragem de controle:
Selecione o controle, se necessário.
Abra o menu pop-up (clique com o botão direito).
Selecione "Âncora": a janela para definir as âncoras é exibida:
Select "Horizontally centered" and validate ("OK" button).
Remark
In the window displayed in the editor, you will notice the little red arrows in the control. These arrows indicate that the control is anchored.
Run the project test on simulator ( among the quick access buttons):
The button is centered in portrait mode.
Change the orientation of simulator.
The button remains centered in landscape mode.
Touchscreen management
One of the most important aspects of the interface for a mobile application is the touchscreen management.
A "multi-touch" feature is a technique allowing the user to interact with a device via several contact points.
Handling images is one of the most common multi-touch features. The display size on a phone being reduced, it is often necessary to zoom an image and/or to move inside an image.
This allows you to perform a zoom on an image via the contact of 2 fingers moving apart.
To manage the "multi-touch", WINDEV Mobile proposes:
Open (if necessary) the "My_Android_Project" project that was created in the previous lesson.
Answer
A corrected project is available. To open this project, in the WINDEV Mobile home page (Ctrl + <), click "Tutorial" and select "My Android project (Answer)".
Na janela "WIN_Welcome", crie um controle de imagem:
No painel "Criação", no grupo "Controles usuais", clique em "Imagem".
O controle de imagem aparece no modo de criação sob o cursor.
Mova o mouse na janela em direção à posição onde o controle será criado. Para soltar o controle na janela, basta clicar novamente.
Clique duas vezes no controle Imagem: a janela de descrição do controle é exibida.
Na guia "Geral", selecione uma imagem do seu disco no controle de edição "Imagem" (via "Navegar").
Se a imagem estiver localizada em um diretório diferente do diretório do projeto, o WINDEV Mobile propõe a cópia do arquivo de imagem para o diretório do projeto. Aceite clicando em "Copiar arquivo para o diretório sugerido".
Display the "Details" tab: the options for multi-touch management are displayed:
Select "Automatic scroll and zoom".
Validate the control description window.
Save the window (click among the quick access buttons).
A UI error appears in the error pane: the automatic window scrollbars are in conflict with the scrolling features of Image control.
To avoid this UI error, disable the window scrollbars:
Open the window description ("Description" in the popup menu).
In the "UI" tab, uncheck "Automatic Scrollbars".
Validate the description window.
Save the window (click among the quick access buttons). The UI error disappears.
Remark
O gerenciamento multi-touch não pode ser verificado no simulador. Para verificar esse recurso, o aplicativo deve ser testado (ou implantado) no dispositivo móvel.
Feche o projeto.
Os diferentes tipos de controles
WINDEV Mobile propõe vários controles. Esses controles são usados para exibir ou inserir dados. Alguns controles são projetados especificamente para uma interface móvel.
Para desenvolver seus aplicativos, você pode usar os controles padrão (controles de edição, imagens, botões de opção e caixas de seleção), mas também controles mais específicos, como:
o controle Multiline Zone para criar interfaces (UI) semelhantes às janelas nativas do Android,
o controle de mapa para visualizar uma posição em um mapa ou itinerário,
o controle de anúncio para exibir um banner de publicidade,
Debug on XXX simulator".
.
among the quick access buttons).