The pickerWheel widget supports custom columns and the ability to extract values from column rows that are within the “selection area”. As of version 0.2 (beta) of the widget library, there are no more presets (may be added in future versions). Additionally, it is a known issue that rows do not ‘snap’ or ‘soft-land’ into the selection area. There is also no longer an option for ‘infinite’ columns. We are working on bringing an update that will restore these behaviors.

It is currently a known issue that you cannot move the pickerWheel widget to a different location, or the getValues() function will cease to work. We are working on fixing this in a future update. Many people like to “slide-up” their pickerWheels, so instead, we suggest you make it “fade-in” for the time being if you want some kind of animation when the pickerWheel is shown.

Syntax:

Example:

 

Parameters:

widget.newPickerWheel() takes a single argument, options, which is a Lua table that accepts quite a few parameters. It is recommended you choose a supporting theme and let the them file handle most of the custom graphics parameters for you, but the options are there for you to change if you want to create your own picker theme.

id string. Can be set to anything you want, for easier identification of your widget. Default is “”.

width, height numbers. These correspond to the actual picker widget (not the background that can be stretched). The default values are 296 (width) and 222 (height). If you encounter unusual behavior when changing these from their defaults, please try to stick with the default values.

left, top numbers. These numbers correspond to the location at with the top, left corner of the widget will be placed upon creation.

totalWidth number. This corresponds to the width you want the entire background to be stretched to. In most instances, this will be the default, which is display.contentWidth.

selectionHeight number. This is the height of your “selection area” graphic. If you experience unusual behavior, please stick with the default value, which is 46.

font string. This is the font that will be used when rendering column rows. Default is native.systemFontBold.

fontSize number. This is the size (in pixels) of the text for the pickerWheel’s columns. Default is 22.

fontColor table. This is a table that will hold the red, green, blue, and alpha channels for the text for each column. The default is black:
{ 0, 0, 0, 255 }

columnColor table. This is a table that will hold the red, green, blue, and alpha channels for the column background color. The default is white:
{ 255, 255, 255, 255 }

background string. If you choose to customize on your own (without using theme defaults), this will be the filename for your pickerWheel’s background (it will be stretched to totalWidth, so we recommend using some kind of vertical gradient that’s 2px or less in width).

backgroundWidth, backgroundHeight numbers. If you specified a background parameter, set this to the width and height of your background image.

glassFile string. If you choose to customize on your own (without using theme defaults), this will be the filename for your pickerWheel’s selection area graphic (it appears as a glass strip in iOS).

glassWidth, glassHeight numbers. If you specified a glassFile parameter, these should correspond to that image’s width and height.

separator string. If you choose to customize on your own (without using theme defaults), this will be the filename for the separator graphic that is used between each column. It will be stretched vertically, so we recommend using a graphic with a 1-2 pixel height.

separatorWidth, separatorHeight numbers. If you specified a separator parameter, these should correspond to that image’s width and height.

maskFile string. This is the maskFile used to crop columns properly. We recommend going with theme defaults with this one, but once again, the parameter is there for you to use if ever the need arises.

baseDir system directory. This is the base directory at which all of the above graphics resources are located, if you specified any, and if you’re using a different base directory than system.ResourceDirectory (default).

columns table. This is a table that should have sub-tables representing the individual columns in your picker wheel. The numerical keys in each column table will represent the individual rows (see Example section above). Additionally, each column table can have the following properties:

Column Properties

width number. By default, columns are split evenly between the pickerWheel’s viewable area, but there are some cases where you want some columns to be wider than the others. Use the width property to set a custom width on a per-column basis.

startIndex number. If you want a column to start at a specific row, specify the index number of that row here (much requested feature!).

alignment string. This can either be set to “right” or “center”. If this property is not set, text will be left-aligned for that column by default.

Properties and Methods

View:
If you need to do something with the widget’s display object (such as place the button into a display group), you need to do so using the object’s .view property.

Example:

id string. Use this to access your picker’s id property.

x, y Numbers. Normally, to access display object properties of the widget, you’d do so by using the .view property of the widget. However, you can optionally use the x/y property shortcut to change the on-screen location of the widget. Example:

 

 

picker:getValues() function that returns a table holding the value/index of the rows that are currently in the selection area. Example (for a picker with 3 columns):

 

 

Removing the widget:

This widget can be removed in the same manner as any other display object, by using display.remove() or the removeSelf() method. Example:

 

 

Returns:

Corona widget object.

 

Incoming search terms:

  • corona drop picker wheel size
  • corona sdk picker wheel size

Tagged with:

Filed under: Corona

Like this post? Subscribe to my RSS feed and get loads more!