Version13.4.1

Titanium.UI.Tab

viewAndroidiPhoneiPadmacOSsince 0.8

A tab instance for a TabGroup.

A TabGroup tab instance. Each tab includes a button and one or more windows, which holds the "contents" of the tab. Users can select a tab by clicking on the tab button.

Use the Titanium.UI.createTab method or <Tab> Alloy element to create a tab.

Use TabGroup.setActiveTab to switch between tabs in a tab group.

The behavior of tabs and tab groups follows the platform's native navigation style, which varies significantly between platforms.

iOS Platform Implementation Notes

On iOS, the tab maintains a stack of windows. Windows on top of the stack can partially or totally obscure windows lower in the stack. Calling open opens a new window on top of the window stack. When a window is closed, either by the user or by code, the window is removed from the stack, making the previous window visible. The root tab window cannot be removed.

On iOS the tab controls are generally kept on screen to allow a user to navigate inside the app. Tab controls are hidden when the user is performing a modal task (for example, composing a message). In this case, the app should provide a button in the navigation bar to return to the previous screen. On iOS, the window should also be opened as modal. On iOS, The tab controls can also be hidden by opening the new window with tabBarHidden set to true.

When closing a tab window in iOS, you should always use the Tab.close method to ensure that the tab group maintains its navigation state.

Android Platform Implementation Notes

On Android, the tab does not maintain a stack of windows. Calling open opens a new, heavyweight window, which by default covers the tab group entirely. This seems quite different from the iOS model, but it is the standard model for Android applications. Users can use the Back button to close the window and return to the tab group.

On Android, tab windows can be closed using either Tab.close or Window.close. Since no window stack is maintained, only a single window opened using Tab.open can be closed using Tab.close.

As on iOS, the root tab window cannot be closed.

Examples

Simple Tab Example

In this example, we create a simple tab and add it to a tab group.

var window = Ti.UI.createWindow({
    title: 'My Tab'
});

var tab = Ti.UI.createTab({
    window: window,
    title: 'My Tab',
    icon: 'myicon.png'
});

tabGroup.addTab(tab);

Alloy XML Markup

Previous example an an Alloy view.

<Alloy>
    <TabGroup id="tabGroup">
        <Tab id="tab" title="My Tab" icon="myicon.png">
            <Window id="window" title="My Tab" />
        </Tab>
      </TabGroup>
</Alloy>

Properties 57

accessibilityDisableLongPress

BooleanAndroidsince 12.4.0

Parameters	Type	Description
name	String	Name of the event.
callback	Callback<Titanium.Event>	Callback function to invoke when the event is fired. 4 fields bubbles Boolean True if the event will try to bubble up if possible. cancelBubble Boolean Set to true to stop the event from bubbling. source Object Source object that fired the event. type String Name of the event fired.

Parameters	Type	Description
window	Titanium.UI.Window	Window to close. This parameter must be omitted on Android.
options?	Object	Dictionary of display and animation settings to use when closing the window. Identical to the `options` parameter to Window.close. iOS only supports the animated parameter.

Parameters	Type	Description
point	Point	A point in this view's coordinate system. If this argument is missing an `x` or `y` property, or the properties can not be converted into numbers, an exception will be raised.
destinationView	Titanium.UI.View	View that specifies the destination coordinate system to convert to. If this argument is not a view, an exception will be raised.

Parameters	Type	Description
window	Titanium.UI.Window	Window to open.
options?	openWindowParams	Dictionary of display and animation settings to use when opening the window. Identical to the `options` parameter to Window.open. iOS only supports the animated parameter.

Parameters	Type	Description
callback?	Callback<Titanium.Blob>	Function to be invoked upon completion. If non-null, this method will be performed asynchronously. If null, it will be performed immediately.
honorScaleFactor?	Boolean	Determines whether the image is scaled based on scale factor of main screen. (iOS only) When set to true, image is scale factor is honored. When set to false, the image in the blob has the same dimensions for retina and non-retina devices.

Event properties	Type	Description
x	Number	X coordinate of the event from the `source` view's coordinate system.
y	Number	Y coordinate of the event from the `source` view's coordinate system.
obscured	Boolean	Returns `true` if the double click passed through an overlapping window belonging to another app. This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Event properties	Type	Description
index	Number	Index of the current active tab.
previousIndex	Number	Index of the previous active tab.
tab	Titanium.UI.Tab	Current active tab object.
previousTab	Titanium.UI.Tab	Previous active tab object.

Event properties	Type	Description
direction	String	Direction of the swipe--either 'left', 'right', 'up', or 'down'.
x	Number	X coordinate of the event's endpoint from the `source` view's coordinate system.
y	Number	Y coordinate of the event's endpoint from the `source` view's coordinate system.
obscured	Boolean	Returns `true` if the swipe passed through an overlapping window belonging to another app. This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Examples

Simple Tab Example

Alloy XML Markup

Properties 57

iOS Tab Icons

Android Tab Icons

Methods 14

Events 15