FMX.TabSlideTransition Sample
This is a sample that illustrates how to add dynamism to use tab sliding effects in mobile applications, using FireMonkey.
Location
You can find the TabSlideTransition sample project at:
- Start | Programs | Embarcadero RAD Studio Alexandria | Samples and navigate to:
Object Pascal\Multi-Device Samples\User Interface\TabSlideTransition
CPP\Multi-Device Samples\User Interface\TabSlideTransition
- Subversion Repository:
- You can find Delphi and C++ code samples in GitHub Repositories. Search by name into the samples repositories according to your RAD Studio version.
How to Use the Sample
- Navigate to the one of the locations given above, and open:
- Delphi: TabSlidingProject.dproj
- C++: TabSlidingProject.cbproj
- Press F9 or choose Run > Run.
Classes
TabSlideTransitionFrmBase represents the main window of the sample. It contains the following components:
- A ActionList1 object containing:
- PreviousTabAction and NextTabAction objects.
- A GestureManager1 object.
- A TabControl1 object with five TabItem objects:
- The first
TabItem1
tab item contains:
- A NameList list box containing
FirstName
andLastName
list box items containing edit controls providing input fields.
- A NameList list box containing
- Other four
TabItem2
,TabItem3
,TabItem4
, andTabItem5
tab items contain:
- List boxes containing three
PersonalInfoList
,EducationList
, andWorkList
list box items and the memo control containing edit and combo box controls providing input controls.
- List boxes containing three
- The first
- A ToolBar1 toolbar containing:
- The
Back
andNext
buttons.
- The
Implementation
- When you run the application, the first TabItem1 is displayed. Before going to any of the next tab items, all fields on the tab must be completed. Otherwise, the Next button is not Enabled.
- On pressing the Next or Back buttons on the toolbar tab control, the NextTabAction or
PreviousTabAction tab switching actions are invoked.
- To assign these actions to toolbar buttons, in the Structure view select a button, for example Next ({Code|Button1}}). In the Object Inspector, select the Action node, click the down arrow on the right, and assign New Standard Action > Tab > TNextTabAction to the Action property. To set the TabControl tab control in which to make switching of active tabs, in the Object Inspector, expand the Action node, select the TabControl item, and click the down arrow on the right. From the list, select the
TabControl1
tab control.
- To assign these actions to toolbar buttons, in the Structure view select a button, for example Next ({Code|Button1}}). In the Object Inspector, select the Action node, click the down arrow on the right, and assign New Standard Action > Tab > TNextTabAction to the Action property. To set the TabControl tab control in which to make switching of active tabs, in the Object Inspector, expand the Action node, select the TabControl item, and click the down arrow on the right. From the list, select the
- To enable or disable the Keyboard Toolbar, the SetToolbarEnabled method is used.
- The Keyboard Toolbar is implicitly hidden, appearing only when completing information in TEdit objects. Setting the visibility is achieved using the following method: SetHideKeyboardButtonVisibility.
Uses
- FMX.VirtualKeyboard.IFMXVirtualKeyboardToolbarService.SetToolbarEnabled
- FMX.VirtualKeyboard.IFMXVirtualKeyboardToolbarService.SetHideKeyboardButtonVisibility