Titanium Mobile

# Titanium.UI.TabbedBar

A button bar that maintains a selected state.

Availability
8.0.0
0.8
9.2.0
Extends
Titanium.UI.View

# Overview

A tabbed bar is a button bar that maintains a state (visually distinguished as a pressed or selected look). It is closely related to the ButtonBar control. See the description of Titanium.UI.ButtonBar for information on styling tabbed bars and buttons bars.

Use the Titanium.UI.createTabbedBar method to create a Tabbed Bar.

# Examples

# Simple Tabbed Bar with 3 items

var bb1 = Ti.UI.createTabbedBar({
  labels: ['One', 'Two', 'Three'],
  backgroundColor: '#336699',
  style: Ti.UI.iOS.SystemButtonStyle.BAR,
  width: 200,
  height: 25,
  top: 50
});
win.add(bb1);

# TabGroup like behavior for views instead of windows

var win = Ti.UI.createWindow({ layout: 'vertical' });
var tabbedBar = Ti.UI.createTabbedBar({
    labels: ['One', 'Two', 'Three'],
    backgroundColor: '#336699',
    height: '10%',
    width: Ti.UI.FILL
});
var scrollView = Ti.UI.createScrollView({
    scrollingEnabled: false,
    height: '90%',
    scrollType: 'horizontal',
    layout: 'horizontal'
});

for (i = 0; i < tabbedBar.labels.length; i++) {
    scrollView.add( Ti.UI.createView({ backgroundColor: '#'+Math.random().toString(16).substr(-6)}))
}

tabbedBar.addEventListener('click', function(e) {
    scrollView.scrollTo(e.index * win.rect.width, 0, {animated: true});
})

win.add(scrollView);
win.add(tabbedBar);
win.open();

# Properties

# index

Availability
8.0.0
0.8
9.2.0
index :Number

Index of the currently selected button.

# labels

Availability
8.0.0
0.8
9.2.0
labels :Array<String> | Array<BarItemType>

Array of labels for the tabbed bar.

The labels can be specified either using an array of strings, in which case each string defines the title for a button, or using an array of simple dictionary objects, BarItemType, which can specify title, image, width and enabled state for each button.

# style

Availability
8.0.0
0.8
9.2.0
style :Number

Style of the tabbed bar.

Specify one of the constants: For iOS: Titanium.UI.iOS.SystemButtonStyle, either PLAIN, BORDERED, or BAR.

The BAR style specifies a more compact style and allows the bar's background color or gradient to show through. For Android: [Titanium.UI.TABS_STYLE_*] In Android style is only supported in the creation dictionary of the proxy.

Default: Titanium.UI.iOS.SystemButtonStyle.PLAIN for iOS, Ti.UI.TABS_STYLE_DEFAULT for Android

# Events

# click

Availability
8.0.0
0.9
9.2.0

Fired when a button is clicked.

There is a subtle difference between singletap and click events.

A singletap event is generated when the user taps the screen briefly without moving their finger. This gesture will also generate a click event.

However, a click event can also be generated when the user touches, moves their finger, and then removes it from the screen.

On Android, a click event can also be generated by a trackball click.

Properties

Name Type Description
index Number

Index of the clicked button.

source Object

Source object that fired the event.

type String

Name of the event fired.

bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

Contents