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:
- 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
- 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
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
