Browse the API284 types

Version12.6.2

You are reading 12.6.2. See this page in 13.4.1.

Titanium.UI.Picker

viewAndroidiPhoneiPadmacOSsince 0.8

A control used to select one or more fixed values.

Android	iOS

Use the Titanium.UI.createPicker method or Alloy <Picker> element to create a picker control.

On Android, the useSpinner property must be enabled to support multiple columns. By default, the spinner is automatically sized to fit its content and can overflow to additional spinner rows. The size of the picker can be adjusted with the width and height properties, but may omit picker columns or cut off picker rows if the size is set too small. This property is deprecated. Please use the default Android native "dropdown" style by not setting useSpinner to true.

On iOS, the height property is only available in iOS 9 and later. By default, the size of the picker, including its background, is fixed at the same height as the iPhone keyboard to respect the iOS Human Interface Guidelines. The default width on iOS is 320px and the height is 228px. The contents of the picker are sized to fit the picker, which may cut off text in the picker rows. Adding views to picker rows is also supported on iOS.

On iPad, Apple recommends using a picker only in a popover. Since the size of the picker cannot be adjusted, it is not suitable for the main screen.

Note: you can only set the columns property for the plain picker. If you set the type property to anything else except Titanium.UI.PICKER_TYPE_PLAIN, you cannot modify the picker's columns.

Examples

Multi-Column Picker using Alloy XML Markup

Creates a picker with two columns. You can optionally use Column and Row as shorthand notation for PickerColumn and PickerRow, respectively.

app/views/index.xml:

<Alloy>
    <Window id="win" backgroundColor="white" layout="vertical" exitOnClose="true">
        <Picker id="picker" top="50" selectionIndicator="true" useSpinner="true">
            <PickerColumn id="column1">
                <PickerRow title="Bananas"/>
                <PickerRow title="Strawberries"/>
                <PickerRow title="Mangos"/>
                <PickerRow title="Grapes"/>
            </PickerColumn>
            <!-- Picker shorthand notation -->
            <Column id="column2">
                <Row title="red"/>
                <Row title="green"/>
                <Row title="blue"/>
                <Row title="orange"/>
            </Column>
        </Picker>
    </Window>
</Alloy>

app/controllers/index.js:

$.win.open();

Date Picker using Alloy XML Markup

Creates a date picker, then monitors the change event to see when the user updates the picker.

For the date string, use string values accepted by the moment.js constructor in the XML and TSS files. If you are defining dates in the controller code, use a JavaScript Date object.

app/views/index.xml:

<Alloy>
    <Window backgroundColor="blue">
        <Picker id="picker"
          onChange="report"
          type="Ti.UI.PICKER_TYPE_DATE"
          minDate="2014,4,1"
          maxDate="May 1, 2014 12:00:00"
          value="2014-04-15T12:00:00">
        </Picker>
    </Window>
</Alloy>

app/controllers/index.js:

function report(e) {
    Ti.API.info('User selected: ' + e.value);
}

$.index.open();

Basic Single Column Picker

Create a one-column, platform-specific style, picker and automatically select a row.

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});

var picker = Ti.UI.createPicker({
  top:50
});

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

picker.add(data);
picker.selectionIndicator = true;

win.add(picker);
win.open();

// must be after picker has been displayed
picker.setSelectedRow(0, 2, false); // select Mangos

Multi-Column Picker

Create a two-column, platform-specific style, picker and automatically select a row in each column.

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});

var picker = Ti.UI.createPicker({
  top:50,
  useSpinner: true
});
picker.selectionIndicator = true;

var fruit = [ 'Bananas', 'Strawberries', 'Mangos', 'Grapes' ];
var color = [ 'red', 'green', 'blue', 'orange' ];

var column1 = Ti.UI.createPickerColumn();

for(var i=0, ilen=fruit.length; i<ilen; i++){
  var row = Ti.UI.createPickerRow({
    title: fruit[i]
  });
  column1.addRow(row);
}

var column2 = Ti.UI.createPickerColumn();

for(var i=0, ilen=color.length; i<ilen; i++){
  var row = Ti.UI.createPickerRow({ title: color[i] });
  column2.addRow(row);
}

picker.add([column1,column2]);

win.add(picker);

win.open();

// must be after picker has been displayed
picker.setSelectedRow(0, 2, false); // select Mangos
picker.setSelectedRow(1, 3, false); // select Orange

Date Picker

Create a date picker and handle the subsequent user action.

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});

var picker = Ti.UI.createPicker({
  type:Ti.UI.PICKER_TYPE_DATE,
  minDate:new Date(2009,0,1),
  maxDate:new Date(2014,11,31),
  value:new Date(2014,3,12),
  top:50
});

win.add(picker);
win.open();

picker.addEventListener('change',function(e){
  Ti.API.info("User selected date: " + e.value.toLocaleString());
});

Date Picker using showDatePickerDialog() (Android only)

Create a date picker that is automatically displayed as a modal dialog and handle the subsequent user action.

Ti.UI.backgroundColor = 'white';

var picker = Ti.UI.createPicker({
  type:Ti.UI.PICKER_TYPE_DATE,
  minDate:new Date(2009,0,1),
  maxDate:new Date(2014,11,31),
  value:new Date(2014,3,12)
});

picker.showDatePickerDialog({
  value: new Date(2010,8,1),
  callback: function(e) {
    if (e.cancel) {
      Ti.API.info('User canceled dialog');
    } else {
      Ti.API.info('User selected date: ' + e.value);
    }
  }
});

Properties 77

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
animation	Titanium.UI.Animation \| Dictionary<Titanium.UI.Animation>	Either a dictionary of animation properties or an Animation object.
callback?	Callback<Object>	Function to be invoked upon completion of the animation.

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
column	Number	A column index.
row	Number	A row index.
animated?	Boolean	Determines whether the selection should be animated. (iPhone, iPad-only)

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
columnIndex	Number	Selected column index. On iOS, only applicable to Titanium.UI.PICKER_TYPE_PLAIN picker types.
rowIndex	Number	Selected row index. On iOS, only applicable to Titanium.UI.PICKER_TYPE_PLAIN picker types.
column	Titanium.UI.PickerColumn	The column object. On iOS, only applicable to Titanium.UI.PICKER_TYPE_PLAIN picker types.
countDownDuration	Number	The selected duration in milliseconds. Applicable to Titanium.UI.PICKER_TYPE_COUNT_DOWN_TIMER picker types.
value	String	The selected value. Applicable to date/time pickers only. This property is read-only on Android.
row	Titanium.UI.PickerRow	The row object. On iOS, only applicable to Titanium.UI.PICKER_TYPE_PLAIN picker types.
selectedValue	Array<String>	Array of selected values, one element per column in the picker. Applicable to Titanium.UI.PICKER_TYPE_PLAIN picker types.

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.

Event properties	Type	Description
scale	Number	The scale factor relative to the points of the two touches in screen coordinates.
velocity	Number	The velocity of the pinch in scale factor per second.
time	Number	The event time of the current event being processed.
timeDelta	Number	The time difference in milliseconds between the previous accepted scaling event and the current scaling event.
currentSpan	Number	The average distance between each of the pointers forming the gesture in progress through the focal point.
currentSpanX	Number	The average X distance between each of the pointers forming the gesture in progress through the focal point.
currentSpanY	Number	The average Y distance between each of the pointers forming the gesture in progress through the focal point.
previousSpan	Number	The previous average distance between each of the pointers forming the gesture in progress through the focal point.
previousSpanX	Number	The previous average X distance between each of the pointers forming the gesture in progress through the focal point.
previousSpanY	Number	The previous average Y distance between each of the pointers forming the gesture in progress through the focal point.
focusX	Number	The X coordinate of the current gesture's focal point.
focusY	Number	The Y coordinate of the current gesture's focal point.
inProgress	Boolean	Returns `true` if a scale gesture is in progress, `false` otherwise.

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.