Ícone do site Embarcadero RAD Studio, Delphi, & C++Builder Blogs

Controlando o Teclado no Mobile com Firemonkey

Image from Wikimedia

TL;DR – Se estiver sem muito tempo… siga direto para o link do GitHub ao final do artigo 😉

Existem várias abordagens possíveis para o controle do teclado em aplicações mobile, mas na prática, podemos considerar duas principais linhas de pensamento:

  1. Aplicar um padrão de interface de usuário onde apenas a parte superior da área útil da tela é utilizada para entrada de dados, de maneira que o teclado nunca se apresente por sobre campos de entrada de dados ou informações importantes. Particularmente (quando possível) parece-me a abordagem mais confortável para o usuário final
  2. Utilizar toda a área útil da tela para a entrada de dados, e neste caso, manter o controle sobre a exibição dos campos e do teclado em sincronia, tornando a experiência do usuário tão confortável quanto possível

Caso você opte pela opção #2, trago aqui algumas possibilidades para facilitar o seu desenvolvimento.

A primeira delas, a qual já utilizei em alguns vídeos do Delphi Academy, é uma unit/classe, a qual adicionada ao seu projeto, assume o controle do posicionamento visual dos controles de entrada de dados, efetuando seu deslocamento em função da posição do teclado. A versão mais atualizada deste código pode ser encontrada no GitHub, como parte de um projeto Open Source maior:

https://github.com/qdac/QDAC3/blob/master/Source/qdac_fmx_vkhelper.pas

Outra implementação interessante pode ser encontrada na excelente Kastri library de Dave Notagge, aqui:

https://github.com/DelphiWorlds/Kastri

E finalmente, estou compartilhando neste post uma abordagem (a qual não depende de units ou classes externas) baseada em um dos exemplos que acompanham o Delphi e o RAD Studio. Esta abordagem utiliza na base de sua implementação o TVertScrollBox, e encontra-se documentada abaixo:

http://docwiki.embarcadero.com/Libraries/Rio/en/FMX.Layouts.TVertScrollBox
http://docwiki.embarcadero.com/CodeExamples/Rio/en/FMX.ScrollableForm_Sample

Com o objetivo de tornar a técnica utilizada acima algo simples de se aplicar em um projeto real, estou compartilhando abaixo em meu GitHub dois casos de uso distintos.

O primeiro deles faz uso do conceito de herança visual, sendo que todo o código relacionado ao controle do teclado passa a residir na classe/form base, e suas heranças naturalmente passaram a assumir este comportamento de maneira automática. Isso permite até que você o aplique em um projeto pré-existente sem uma grande quantidade de refactorings.

O segundo exemplo utiliza a mesma técnica, porém apenas no formulário principal, e considera que todos as demais interfaces visuais da app (forms) serão na verdade layouts renderizados em um container da interface principal.

Deixo aqui o código de ambos para que possam explorar e eventualmente adotar/expandir o conceito:

https://github.com/flrizzato/coding/tree/master/ScrollableForm

 

 

 

 

Sair da versão mobile