FMX.TabSliding Sample

This sample demonstrates how to use TabControl to create applications with multiple tabs for iOS and Android.

Location

You can find the TabSliding sample project at:

• Start | Programs | Embarcadero RAD Studio Alexandria | Samples and then navigate to:
  • Object Pascal\Mobile Snippets\TabSliding
  • CPP\Mobile Snippets\TabSliding
• 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.

Description

The TabSliding sample demonstrates how to create applications with multiple tabs for iOS and Android. The sample uses TabControl with TabPosition set to Dots in order to enable scrolling of tab items. The sample has 2 tab items, each one containing a different image.

How to Use the Sample

1. Navigate to one of the locations given above and open:
   • Delphi: TabSliding.dproj.
   • C++: TabSliding.cbproj.
2. Select the target platform, iOS and Android supported.
3. Press F9 or choose Run > Run.
4. The sample shows an image. Slide the image in order to change between tabs. Each tab contains a different image.

Files

File in Delphi	File in C++	Contains
TabSliding.dproj	TabSliding.cbproj	The project itself.
uMain.fmx	uMain.fmx	The main form where the components are located.
uMain.pas	TabSlidingPCH.h, TabSliding.cpp	Used to define and implement the sample.
Information.txt	Information.txt	Further information about the sample.

Classes

TTabSlidingForm is the main form that represents the main window of the sample. It contains the following components:

• A TActionList object.
  • Two TChangeTabAction objects.
• A TGestureManager object.
• A ToolBar object with a TLabel object.
• A TTabControl object with two TTabItem objects.
  • The first tab item contains:
    • A TImage object.
  • The second tab item contains:
    • A TImage object.

Implementation

• The sample uses TImage to display and define 2D image components.
• The sample uses TGestureManager class to manage all the touch and gesturing functionalities of the application.
• The sample uses TChangeTabAction to implement tab change actions.

When you run the application, the sample shows the first TTabItem. The sample has 2 tab items, each one containing its own image. The first TTabItem displays its image. When the user slides the image, a TChangeTabAction is invoked to change to the other TTabItem, which displays its image.

Uses

• FMX.Objects.TImage
• FMX.Gestures.TGestureManager
• TChangeTabAction
• TTabControl

See Also

• Tab Controls
• Mobile Tutorial: Using Tab Components to Display Pages (iOS and Android)

Samples

• FMX.TabSlideTransition_Sample
• TabVisible_(Delphi)
• TabVisible_(C++)
• TabControlChange_(Delphi)
• TabControlChange_(C++)