FMX.ScrollableForm Sample

This sample shows how to correctly reposition or scroll panels when the virtual keyboard is invoked in mobile applications, using FireMonkey.

Location

You can find the FireMonkeyMobile ScrollableForm sample project at:

• Start | Programs | Embarcadero RAD Studio Berlin | Samples and navigate to:
  • Object Pascal\Multi-Device Samples\User Interface\ScrollableForm
  • CPP\Multi-Device Samples\User Interface\ScrollableForm
• Subversion Repository:
  • http://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Berlin/Object%20Pascal/Multi-Device%20Samples/User%20Interface/ScrollableForm
  • http://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Berlin/CPP/Multi-Device%20Samples/User%20Interface/ScrollableForm

Description

This application shows how to scroll or situate the entry field just above the Virtual Keyboard, so that the entry field is not obscured by the keyboard.

How to Use the Sample

1. Navigate to the one of the locations given above, and open:
   • Delphi: ScrollableForm.dproj
   • C++: ScrollableForm.cbproj
2. Press F9 or choose Run > Run.
3. Observe that for each control, when the Virtual Keyboard is displayed, the application moves the entry field to a position above the keyboard.

Classes

When user selects an entry field, the form scrolls so that the keyboard is below the entry field

VertScrollBox1 occupies the display area on the form and contains the main layout control and all the edit fields in the app:

• MainLayout1
  • TMemo occupies the upper portion of the form. You can click on the TMemo and add or edit content using the virtual keyboard (its KeyboardType is Default).
  • TEdit controls: TEdit1 - TEdit5 are various types of edit fields.
    • TEdit1 has the Align property set to Bottom and it is associated with the number pad (that is, its KeyboardType is NumberPad).

      TEDit1 also has a clear button set (FMX.Edit.TClearEditButton).

    • TEdit2 uses the Default keyboard type (full QWERTY) for text entry.
    • TEdit3 uses the number pad (KeyboardType is NumberPad).
    • TEdit4 is read-only (the ReadOnly property is set to True).
    • TEdit5 is also read-only and its Enabled property is set to False.
  • TButton ("No edit control") is used to remove focus from a selected edit control. This is useful on some hardware such as the iPad, on which the focus must change to a different control before the keyboard redisplays after being dismissed.

Implementation

• The event handlers for the OnVirtualKeyboardShown and OnVirtualKeyboardHidden events of the TForm object are used to reposition the TVertScrollBox so that the entry field is not obscured by the Virtual Keyboard.

• The procedure TFormMain.UpdateKBBounds retrieves the coordinates of the control having the focus. If the images of the control and the virtual keyboard overlap, then UpdateKBBounds shifts the visible region of the VertScrollBox1. OnCalcContentBounds is used to increase the size of the working region.
• The global variable VKAutoShowMode is set to Always in the .dpr file:

  VKAutoShowMode := TVKAutoShowMode.Always;

This means that the virtual (onscreen) keyboard appears automatically for Windows and mobile applications even if a device has a physical keyboard.

Uses

• FMX.Controls.TControl.SetBounds
• FMX.Layouts.TCustomScrollBox.ViewportPosition
• FMX.Types.TVirtualKeyboardType

See Also

• FMX.KeyboardTypes Sample
• FMX.KeyboardToolbar Sample

• FireMonkey Application Design
• FireMonkey
• iOS Mobile Application Development
• Troubleshooting: Cannot Deploy to the iOS Simulator
• Troubleshooting: Cannot Deploy to the iOS Device
• http://stackoverflow.com/questions/1126726/how-to-make-a-uitextfield-move-up-when-keyboard-is-present