Skip to content
Titanium SDK

Version13.2.0

You are reading 13.2.0. See this page in 13.4.1.

Titanium.UI.OptionBar

viewAndroidiPhoneiPadmacOSsince 10.0.0

Extends Titanium.UI.ViewTitanium.Proxy

A bar of selectable buttons where only 1 can be selected at a time.

Android iOS
Android

This is a view which shows a list of options where only 1 option is selectable by the user.

On iOS, this displays a segmented control.

On Android, this displays a toggle button group.

Use the Titanium.UI.createOptionBar method to create a Option Bar.

Examples

Text-Only Buttons

Creates an option bar of text buttons.

const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [ 'Option 1', 'Option 2', 'Option 3' ]
});
const btn = Ti.UI.createButton({
  title:"reset", bottom: 10
})
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
btn.addEventListener('click', (e) => {
  optionBar.index = -1;
});
win.add([optionBar,btn]);

win.open();

Image-Only Buttons

Creates an option bar of image-only buttons.

const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [
    { image: '/Option1.png' },
    { image: '/Option2.png' },
    { image: '/Option3.png' },
  ]
});
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
win.add(optionBar);
win.open();

Buttons with Text and Images

Creates an option bar where each button shows an image to the left of its text. This is only supported on Android. On iOS, if you set the image property, then the title property is ignored.

const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [
    { image: '/Option1.png', title: 'Option 1' },
    { image: '/Option2.png', title: 'Option 2' },
    { image: '/Option3.png', title: 'Option 3' },
  ]
});
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
win.add(optionBar);
win.open();

Properties 77

apiName

Stringsince Android 3.2.0, iPhone 3.2.0, iPad 3.2.0, macOS 9.2.0read-only

Inherited from Titanium.Proxy

The name of the API that this proxy corresponds to.

backgroundGradient

Gradient

Inherited from Titanium.UI.View

A background gradient for the view.

Linear and Radial Gradients

The following code excerpt creates two views, one with a linear gradient and one with a radial gradient.

var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff',
    layout: 'vertical'
});

var radialGradient = Ti.UI.createView({
    top: 10,
    width: 100,
    height: 100,
    backgroundGradient: {
        type: 'radial',
        startPoint: { x: 50, y: 50 },
        endPoint: { x: 50, y: 50 },
        colors: [ 'red', 'blue'],
        startRadius: 50,
        endRadius: 0,
        backfillStart: true
    }
});
var linearGradient = Ti.UI.createView({
    top: 10,
    width: 100,
    height: 100,
    backgroundGradient: {
        type: 'linear',
        startPoint: { x: '0%', y: '50%' },
        endPoint: { x: '100%', y: '50%' },
        colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.25 }, { color: 'red', offset: 1.0 } ],
    }
});
win1.add(radialGradient);
win1.add(linearGradient);
win1.open();

borderRadius

Number | String | Array<Number> | Array<String>

Inherited from Titanium.UI.View

Radius for the rounded corners of the view's border.

Default: 0

bubbleParent

Booleansince Android 3.0.0, iPhone 3.0.0, iPad 3.0.0, macOS 9.2.0

Inherited from Titanium.Proxy

Indicates if the proxy will bubble an event to its parent.

Default: true

elevation

NumberAndroidsince 5.0.0Android 5+

Inherited from Titanium.UI.View

Base elevation of the view relative to its parent in pixels.

focusable

BooleanAndroid

Inherited from Titanium.UI.View

Whether view should be focusable while navigating with the trackball.

Default: false

index

Number

Index of the currently selected option.

Index of the currently selected option. Setting this to -1 will deselect all options.

labels

Array<String> | Array<BarItemType>

Array of labels for the option bar.

Setting this to an array of strings specifies the title of each option in the bar.

Alternatively, this can be set to an array of dictionary objects of type BarItemType which allows you to specify a title and/or image for each option in the bar. Only Android supports setting both title and image properties on the same item. On iOS, if you set the image property, then the title property is ignored.

layout

String

Specifies the layout direction such as 'horizontal' or 'vertical'.

This property is only supported on Android and allows you to display its toggle buttons in ther 'vertical' direction.

Default: horizontal

left

Number | String

Inherited from Titanium.UI.View

View's left position, in platform-specific units.

opacity

Number

Inherited from Titanium.UI.View

Opacity of this view, from 0.0 (transparent) to 1.0 (opaque). Defaults to 1.0 (opaque).

rect

DimensionWithAbsolutessince 2.0.0read-only

Inherited from Titanium.UI.View

The bounding box of the view relative to its parent, in system units.

rotation

NumberAndroidiPhoneiPadsince Android 5.4.0, iPhone 12.3.0, iPad 12.3.0

Inherited from Titanium.UI.View

Clockwise 2D rotation of the view in degrees.

tooltip

Stringsince 12.1.0iOS 15.0+

Inherited from Titanium.UI.View

The default text to display in the control's tooltip.

touchFeedback

BooleanAndroidsince 6.1.0

Inherited from Titanium.UI.View

A material design visual construct that provides an instantaneous visual confirmation of touch point.

Default: false

translationX

NumberAndroidsince 5.0.0

Inherited from Titanium.UI.View

Horizontal location of the view relative to its left position in pixels.

Methods 13

addEventListener

Inherited from Titanium.Proxy

Adds the specified callback as an event listener for the named event.

Parameters
ParametersTypeDescription
nameString

Name of the event.

callbackCallback<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.

convertPointToView

since Android 1.8, iPhone 1.8, iPad 1.8, macOS 9.2.0

Inherited from Titanium.UI.View

Translates a point from this view's coordinate system to another view's coordinate system.

Parameters
ParametersTypeDescription
pointPoint

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.

destinationViewTitanium.UI.View

View that specifies the destination coordinate system to convert to. If this argument is not a view, an exception will be raised.

Returns Point

fireEvent

Inherited from Titanium.Proxy

Fires a synthesized event to any registered listeners.

Parameters
ParametersTypeDescription
nameString

Name of the event.

event?Dictionary

A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.

getViewById

since 6.1.0

Inherited from Titanium.UI.View

Returns the matching view of a given view ID.

Parameters
ParametersTypeDescription
idString

The ID of the view that should be returned. Use the id property in your views to enable it for indexing in this method.

Returns Titanium.UI.View

hide

Inherited from Titanium.UI.View

Hides this view.

Parameters
ParametersTypeDescription
options?AnimatedOptions

Animation options for Android only. Since SDK 5.1.0 and used only on Android 5.0+

Determines whether to enable a circular reveal animation. Note that the default here is equivalent to passing in { animated: false }

insertAt

since 3.3.0

Inherited from Titanium.UI.View

Inserts a view at the specified position in the children array.

Parameters
ParametersTypeDescription
paramsViewPositionOptions

Pass an object that specifies the view to insert and optionally at which position (defaults to end)

2 fields
position? Number

Position in the children array of the view element to replace.

view Titanium.UI.View

View to insert. Required.

removeEventListener

Inherited from Titanium.Proxy

Removes the specified callback as an event listener for the named event.

Parameters
ParametersTypeDescription
nameString

Name of the event.

callbackCallback<Titanium.Event>

Callback function to remove. Must be the same function passed to addEventListener.

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.

show

Inherited from Titanium.UI.View

Makes this view visible.

Parameters
ParametersTypeDescription
options?AnimatedOptions

Animation options for Android only. Since SDK 5.1.0 and only used on Android 5.0+

Determines whether to enable a circular reveal animation. Note that the default here is equivalent to passing in { animated: false }

toImage

Inherited from Titanium.UI.View

Returns an image of the rendered view, as a Blob.

Parameters
ParametersTypeDescription
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.

Returns Titanium.Blob

Events 7

click

Fired when an option has been selected.

Event properties
Event propertiesTypeDescription
indexNumber

Index of the option clicked on.

keypressed

since Android 3.1.0, iPhone 5.4.0, iPad 5.4.0, macOS 9.2.0

Inherited from Titanium.UI.View

Fired when a hardware key is pressed in the view.

Event properties
Event propertiesTypeDescription
keyCodeNumber

The code for the physical key that was pressed. For more details, see KeyEvent. This API is experimental and subject to change.

longpress

Inherited from Titanium.UI.View

Fired when the device detects a long press.

Event properties
Event propertiesTypeDescription
xNumber

X coordinate of the event from the source view's coordinate system.

yNumber

Y coordinate of the event from the source view's coordinate system.

obscuredBoolean

Returns true if the long press 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.

pinch

since 1.8.0

Inherited from Titanium.UI.View

Fired when the device detects a pinch gesture.

Event properties
Event propertiesTypeDescription
scaleNumber

The scale factor relative to the points of the two touches in screen coordinates.

velocityNumber

The velocity of the pinch in scale factor per second.

timeNumber

The event time of the current event being processed.

timeDeltaNumber

The time difference in milliseconds between the previous accepted scaling event and the current scaling event.

currentSpanNumber

The average distance between each of the pointers forming the gesture in progress through the focal point.

currentSpanXNumber

The average X distance between each of the pointers forming the gesture in progress through the focal point.

currentSpanYNumber

The average Y distance between each of the pointers forming the gesture in progress through the focal point.

previousSpanNumber

The previous average distance between each of the pointers forming the gesture in progress through the focal point.

previousSpanXNumber

The previous average X distance between each of the pointers forming the gesture in progress through the focal point.

previousSpanYNumber

The previous average Y distance between each of the pointers forming the gesture in progress through the focal point.

focusXNumber

The X coordinate of the current gesture's focal point.

focusYNumber

The Y coordinate of the current gesture's focal point.

inProgressBoolean

Returns true if a scale gesture is in progress, false otherwise.

rotate

since 12.7.0

Inherited from Titanium.UI.View

Fired when the device detects a two finger rotation.

Event properties
Event propertiesTypeDescription
rotateNumber

Rotation in degrees.