Titanium.UI.Picker

Object of Titanium.UI.
Platform Since
Android 0.8
iPhone 0.8
iPad 0.8
Mobile Web 0.8

Summary

A Picker is created by the method Titanium.UI.createPicker. A Picker can be used to select one or more fixed values.

Description

For Android, note the useSpinner property above. By default, when you create a picker you will get Android's native picker control, which looks more like the classic "dropdown" widget. If you'd prefer to use something that looks more like iOS's picker -- which looks like one or more spinning wheels --, you can set useSpinner: true.

Titanium's Android picker control (both the native and the useSpinner variety) does not support/display views that are added to picker rows. Only the title of the row will be displayed within the control. Titanium for Android does not support the DateTime or Count Down Timer picker type.

Code Examples

Basic Single Column Picker

In this basic picker example, we create a one column picker with 4 rows.

var picker = Titanium.UI.createPicker();
var data = [];
data[0]=Titanium.UI.createPickerRow({title:'Bananas'});
data[1]=Titanium.UI.createPickerRow({title:'Strawberries'});
data[2]=Titanium.UI.createPickerRow({title:'Mangos'});
data[3]=Titanium.UI.createPickerRow({title:'Grapes'});
picker.add(data);

Custom View for Row

In this example, we use a custom label for each row in a column.

var picker = Titanium.UI.createPicker();
var row = Titanium.UI.createPickerRow();
var label = Titanium.UI.createLabel({
    text:text,
    font:{fontSize:24,fontWeight:'bold'},
    color:text,
    width:'auto',
    height:'auto'
});
row.add(label);
picker.add(row);

Methods

Name Summary
add

add an array of rows, a single row or a column to the picker

addEventListener

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

fireEvent

Fires a synthesized event to any registered listeners.

getSelectedRow

get the selected row object for column

reloadColumn

causes the picker to reload the values from the new column. (Android, iPhone, iPad only.)

removeEventListener

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

setSelectedRow

set the column's row to the selected state

Properties

Name Type Summary
columns Array<Object>

array of column values

countDownDuration Number

the duration value in milliseconds for count down timer pickers. (Note that Titanium's Android implementation does not support the countdown timer.)

format24 Boolean

(applicable only to the Titanium.UI.PICKER_TYPE_TIME picker.) If true, a 24-hour cloc will be used, with hours 0 through 23. If false, a 12-hour clock will be used, with hours 1 through 12 and am/pm controls. For reasons of backward compatibility, the default value depends on the type of time picker being used. For the native time picker (when "useSpinner" is either un-set or false), the default is false. For the spinner-style time picker, the default is true. (Android only.)

locale String

the locale used for displaying Date/Time pickers values

minDate Date

the minimum Date/Time for value for date pickers

minuteInterval Number

property to set the interval displayed by the minutes wheel (for example, 15 minutes). The interval value must be evenly divided into 60; if it is not, the default value is used. The default and minimum values are 1; the maximum value is 30. (Not currently supported on Android.)

selectionIndicator Boolean

for basic picker, boolean value to indicate whether the visual selection style is shown. On the iPhone, this is a blue selected bar.

type Number

the type constant for the picker. One of Titanium.UI.PICKER_TYPE_PLAIN (default), Titanium.UI.PICKER_TYPE_DATE_AND_TIME, Titanium.UI.PICKER_TYPE_DATE, Titanium.UI.PICKER_TYPE_TIME or Titanium.UI.PICKER_TYPE_COUNT_DOWN_TIMER. (Note that Titanium's Android implementation does not support the countdown timer or date+time varieties.)

useSpinner Boolean

An indicator that you wish to use a non-native Android control that looks and behaves more like the iOS picker in the sense that the user selects values by spinning a wheel. (The native Android spinner is more like a conventional "dropdown".) Note that this option works both plain pickers, date pickers and time pickers. Set it preferably immediately when creating the picker, i.e., Titanium.UI.createPicker({useSpinner:true});, but definitely before .add()ing the picker to its parent. (Android only.)

value Date

the Date/Time value for date pickers

visibleItems Number

This is relevant only if you set useSpinner to true, and it is relevant only for the plain picker (not date/time). By default, the spinner-style Android picker will show 5 rows: the one in the middle which is selected, and then 2 above and below. You can set this to allow more (use an odd number to be sure the selected row is in the middle.) (Android only.)

Events

Name Summary
change

fired when the value of a picker row and/or column changes