Titanium.UI.PickerColumn

A picker column, representing a selectable group of items in a Titanium.UI.Picker.

Use the Titanium.UI.createPickerColumn method to create a picker column control. In an Alloy application, you can use a <PickerColumn> element inside a <Picker> element. You can also use <Column> as a shorthand for <PickerColumn> (see Examples).

On Android, the useSpinner property must be enabled to support multiple columns.

See Titanium.UI.Picker for further examples of usage.

Extends: Titanium.UI.View · Since: 0.9 · Platforms: android, iphone, ipad, macos

Properties #

accessibilityDisableLongPress#

extendedcreation only

Type: Boolean

Boolean value to remove the long press notification for the device's accessibility service.

Will disable the "double tap and hold for long press" message when selecting an item.

apiName#

extended

Type: String

The name of the API that this proxy corresponds to.

The value of this property is the fully qualified name of the API. For example, Button
returns Ti.UI.Button.

bubbleParent#

extended

Type: Boolean

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

Some proxies (most commonly views) have a relationship to other proxies, often
established by the add() method. For example, for a button added to a window, a
click event on the button would bubble up to the window. Other common parents are
table sections to their rows, table views to their sections, and scrollable views
to their views. Set this property to false to disable the bubbling to the proxy's parent.

filterTouchesWhenObscured#

extended

Type: Boolean

Discards touch related events if another app's system overlay covers the view.

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.

Setting this property to true causes touch related events (including "click") to not be fired
if a system overlay overlaps the view.

font#

Type: Font

Font to use for text.

id#

extended

Type: String

View's identifier.

The id property of the Ti.UI.View represents the view's identifier. The identifier string does
not have to be unique. You can use this property with Titanium.UI.View.getViewById method.

keepHardwareMode#

extended

Type: Boolean

A value indicating the render mode of the View

Set to true to keep hardware mode when using a border and transparent backgrounds.

lifecycleContainer#

extended

Type: Titanium.UI.Window, Titanium.UI.TabGroup

The Window or TabGroup whose Activity lifecycle should be triggered on the proxy.

If this property is set to a Window or TabGroup, then the corresponding Activity lifecycle event callbacks
will also be called on the proxy. Proxies that require the activity lifecycle will need this property set
to the appropriate containing Window or TabGroup.

rowCount#

Type: Number

Number of rows in this column.

rows#

Type: Array<Titanium.UI.PickerRow>

Rows of this column.

While this property is currently writable on Android, changing its value is strongly
discouraged.

extended

Type: String

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

Assigning a value to this property causes the tool tip to be displayed for the view.
Setting the property to null cancels the display of the tool tip for the view.
Note: This property is only used for apps targeting macOS Catalyst.

Methods #

addEventListener #

extended

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

Parameters:

Name	Type	Summary	Optional
`name`	`String`	Name of the event.	No
`callback`	`Callback<Titanium.Event>`	Callback function to invoke when the event is fired.	No

addRow #

Adds a row to this column.

In an Alloy application you can use one or more <PickerRow> (or <Row>) elements inside
a <PickerColumn> (or <Column>) element.

<Alloy>
    <PickerColumn id="hour">
        <PickerRow title="10"/>
        <PickerRow title="11"/>
        <PickerRow title="12"/>
    </PickerColumn>
    <!-- Picker shorthand notation -->
    <Column id="minutes">
        <Row title="15"/>
        <Row title="30"/>
        <Row title="45"/>
        <Row title="00"/>
    </Column>
</Alloy>

Parameters:

Name	Type	Summary	Optional
`row`	`Titanium.UI.PickerRow`	A row to add.	No

applyProperties #

extended

Applies the properties to the proxy.

Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that
myproxy[key] = value.

Parameters:

Name	Type	Summary	Optional
`props`	`Dictionary`	A dictionary of properties to apply.	No

fireEvent #

extended

Fires a synthesized event to any registered listeners.

Parameters:

Name	Type	Summary	Optional
`name`	`String`	Name of the event.	No
`event`	`Dictionary`	A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.	Yes

removeEventListener #

extended

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

Multiple listeners can be registered for the same event, so the
callback parameter is used to determine which listener to remove.

When adding a listener, you must save a reference to the callback function
in order to remove the listener later:

var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);

To remove the listener, pass in a reference to the callback function:

window.removeEventListener('click', listener);

Parameters:

Name	Type	Summary	Optional
`name`	`String`	Name of the event.	No
`callback`	`Callback<Titanium.Event>`	Callback function to remove. Must be the same function passed to `addEventListener`.	No

removeRow #

Removes a row from this column.

Parameters:

Name	Type	Summary	Optional
`row`	`Titanium.UI.PickerRow`	A row to remove.	No

stopAnimation #

extended

Stops a running animation.

Stops a running view Animation.

Events #

focus #

extended

Fired when the view element gains focus.

This event only fires when using the trackball to navigate.

longclick #

extended

Fired when the device detects a long click.

A long click is generated by touching and holding on the touchscreen or holding down the
trackball button.

The event occurs before the finger/button is lifted.

A longpress and a longclick can occur together.

As the trackball can fire this event, it is not intended to return the x and y
coordinates of the touch, even when it is generated by the touchscreen.

A longclick blocks a click, meaning that a click event will not fire when a
longclick listener exists.

postlayout #

extended

Fired when a layout cycle is finished.

This event is fired when the view and its ancestors have been laid out.
The rect and size values
should be usable when this event is fired.

This event is typically triggered by either changing layout
properties or by changing the orientation of the device. Note that changing the
layout of child views or ancestors can also trigger a relayout of this view.

Note that altering any properties that affect layout from the postlayout callback
may result in an endless loop.

rotate #

extended

Fired when the device detects a two finger rotation.

This event is fired when doing a two finger rotation and returning the angle.
The event occurs continuously until a finger is lifted again.

Event Properties:

Name	Type	Summary
`rotate`	`Number`	Rotation in degrees.

Examples #

Multi-Column Picker

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

var win = Ti.UI.createWindow({
  backgroundColor: 'white',
  exitOnClose: true,
  fullscreen: false,
  title: 'Use picker to make selection'
});

var fruit = [ 'Bananas', 'Grapes', 'Blueberries', 'Strawberries' ];
var color = [ 'blue', 'red', 'yellow', 'white' ];

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);
}

var picker = Ti.UI.createPicker({
  columns: [column1, column2],
  selectionIndicator: true,
  useSpinner: true, // required in order to use multi-column pickers with Android
  top:50
});

function pickerDefaults(obj){
  // on iOS, must be after picker has been rendered
  picker.setSelectedRow(0, 2, false);
  picker.setSelectedRow(1, 3, false);
}

win.add(picker);

var isAndroid = Ti.Platform.osname === 'android';

if(isAndroid){
  pickerDefaults(picker);
}

win.open();

if(!isAndroid){
  setTimeout(function(){
    pickerDefaults(picker);
  }, 1500);
}

Alloy XML Markup

Previous example as an Alloy view. multicolumnpicker.xml

<Alloy>
    <Window id="win" backgroundColor="white" exitOnClose="true" fullscreen="false"
        title="Use picker to make selection">

        <Picker id="picker" top="50" selectionIndicator="true" useSpinner="true">
            <PickerColumn id="column1">
                <PickerRow title="Bananas"/>
                <PickerRow title="Grapes"/>
                <PickerRow title="Blueberries"/>
                <PickerRow title="Strawberries"/>
            </PickerColumn>
            <!-- Picker shorthand notation -->
            <Column id="column2">
                <Row title="blue"/>
                <Row title="red"/>
                <Row title="yellow"/>
                <Row title="white"/>
            </Column>
        </Picker>
    </Window>
</Alloy>

$.picker.setSelectedRow(0, 2, false);
$.picker.setSelectedRow(1, 3, false);

Notificationchannels

Launchoptionstype

Notificationparams

Usernotificationattachment

Usernotificationsettings

Mediascannerresponse

Clipboarditemstype

Systemimageparameters

Titanium.UI.PickerColumn ​

Properties #

accessibilityDisableLongPress#

apiName#

bubbleParent#

filterTouchesWhenObscured#

font#

id#

keepHardwareMode#

lifecycleContainer#

rowCount#

rows#

tooltip#

Methods #

addEventListener #

addRow #

applyProperties #

fireEvent #

removeEventListener #

removeRow #

stopAnimation #

Events #

focus #

longclick #

postlayout #

rotate #

Examples #

Multi-Column Picker

Alloy XML Markup

Titanium.UI.PickerColumn