RAD Studio, Delphi, and C++Builder offer many controls to help create native mobile apps with consistent appearances that behave naturally for each platform. Today we’re going to look at the TabControl on iOS.
When we develop for specific platforms like iOS and the iPhone, it’s important to adhere to that platform’s guidelines to improve the user experience, satisfaction, and adoption rates. For iPhone, those guidelines are captured in the Human Interface Guidelines, and we will specifically look at the requirements for Tab Bars. Adhering to the platform guidelines also helps ensure that your application is accepted into the app store.
What are Tab Bars?
On the iPhone, Tab Bars appear at the bottom of the app screen and allow users to quickly switch between different sections of an app. According to the Human Interface Guidelines, developers should keep in mind that as you add additional tabs, they may not be visible on all devices and screen orientations. In our development tools, tab bars are part of TTabControl.
Here are the key takeaways from the Human Interface Guidelines on Tab Bars:
- Navigation Only. Do not use tab bar buttons for actions.
- Avoid having too many tabs. Too many tabs reduce the available area for users to tap on that tab, or tabs may not be visible at all on certain device sizes.
- Tabs are “always on”. Don’t disable tabs, if the information isn’t available, explain why.
- Visually consistent icons. RAD Studio has a selection of consistent icons, or you can customize your own. There are many great icon libraries available online – some for free and some for purchase that include multi-resolution icons, optimized for mobile devices.
Example App: Creating Tab Bars with TTabControl
For this example, we’re going to create a new C++ project using TabControls and Gestures.
1. Create a new multi-device Tabbed Application:
2. From the Master view, add a TActionList and GestureManager to the app. You can find these quickly by using the search bar at the top right of the IDE.
3. Add a Left and Right action to ActionList1 using the Action List Editor and selecting new ChangeTabAction (one of the standard, built-in actions), then setting their names in Properties and add the code that moves tabs either left (unless it is all the way left) or right (unless it is already at the last tab).
Here is the code for the two TabActions:
void __fastcall TTabbedForm::ChangeTabActionLeftUpdate(TObject *Sender)
{
// Left Gesture - Tab Slide Left unless at the first tab
if (TabControl1->TabIndex > 0){
ChangeTabActionLeft->Tab = TabControl1->Tabs[TabControl1->TabIndex-1];
}
else{
ChangeTabActionLeft->Tab = NULL;
}
void __fastcall TTabbedForm::ChangeTabActionRightUpdate(TObject *Sender)
{
//Right Gesture - Tab Slide Right unless at last tab
if (TabControl1->TabIndex < TabControl1->TabCount-1) {
ChangeTabActionRight->Tab = TabControl1->Tabs[TabControl1->TabIndex+1];
}
else {
ChangeTabActionRight->Tab = NULL;
}
4. Now, click on each tab (in the Master View) and assign GestureManager to GestureManager1, and under Gestures->Standard-> select Left and select “ChangeTabActionLeft” from the drop-down menu, and then select Right and choose “ChangeTabActionRight” from the drop-down menu. Repeat for each tab. This allows you to swipe using your finger to navigate back and forth between the tabs.
5. Now, if you want to customize the tab icons, go into your device view (I’m using one of the iPhone views), select the tab you want to change, and then select a new icon from the StyleLookup property.
6. While you’re on each tab, go ahead and add a label to each tab’s screen. This will help to test that tabs are actually changing. If you want the same UI across all supported platforms, then you should make those changes on the Master instead of the device specific view.
At this point, you can compile and test your app on your iPhone, and switch between the tabs.
More Information on Setting up your Dev Environment to test iOS: http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Mobile_Tutorial:_Set_Up_Your_Development_Environment_on_Windows_PC_(iOS)
Using FireMonkey Views
http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Using_FireMonkey_Views
Adding Views to Your Multi-Device Project
http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Adding_Views_to_Your_Multi-Device_Project