PickerWheel positioning

Solar2D Widgets
#1

Hi Everyone

I am fairly new to corona labs, and I don’t understand how pickerwheel are supposed to be used

Does pickerwheel must be using 3 columns?

And must it occupy the whole width of the display screen?

Have a look at the following sample code:

display.setDefault(“background”, 255, 255, 255)

local widget = require(“widget”)

local pw, col

col =

{

    {

        align = “center”,

        width = 100,

        startIndex = 1,

        labels = {

            “No Pain”, “1”, “2”, “3”, “4”

        },

    }

}

pw = widget.newPickerWheel{

    top = display.contentHeight - 300,

    left = 20,

    columns = col,

    font = native.systemFontBold,

    backgroundWidth = 120,

    backgroundHeight = 120,

    overlayFrameWidth = 120,

    overlayFrameHeight = 120,

    separatorWidth = 2,

    separatorHeight = 120

}

It product a pickerwheel alright, but the overlay/background of the wheel is completely out of position, and I did not see any settings to position it.

Please advise what I have done wrong.

I have attached a screenshot to show the problem.

Regards

Jim

#2

Hi there,

Is that a bug in pickerwheel or I am missing something?

Would appreciate some advise on getting this to work.

I actually try to put two independent pickerwheel side by side, and hit this problem.

Thanks

Jim

#3

Hi Jim,

What’s happening here is that you’re specifying certain parameters related to “visual customization” of the PickerWheel, and that presumes that you’re creating an entire custom image sheet setup for the widget (versus the default iOS or Android look). You’re welcome to do that, but unless you do the entire process with all of the necessary aspects, you’ll get weird behavior and rendering of the PickerWheel.

In your code, if you take out those parameters and use the default look, it should work fine:

[lua]

pw = widget.newPickerWheel{

    top = display.contentHeight - 300,

    left = 20,

    columns = col,

    font = native.systemFontBold

}

[/lua]

That being said, the “default” PickerWheel is still a set width, because it uses a mask image to mask the hidden parts of the widget (the bands that slide underneath the frame). That means, if you want to position two of them side-by-side, you might need to change that. It’s something that you can adjust, but you’ll need to follow the visual customization as detailed in the docs… this includes creating a new mask file of the width you need.

http://docs.coronalabs.com/api/library/widget/newPickerWheel.html

Hope this helps,

Brent Sorrentino

#4

Hi there,

Is that a bug in pickerwheel or I am missing something?

Would appreciate some advise on getting this to work.

I actually try to put two independent pickerwheel side by side, and hit this problem.

Thanks

Jim

#5

Hi Jim,

What’s happening here is that you’re specifying certain parameters related to “visual customization” of the PickerWheel, and that presumes that you’re creating an entire custom image sheet setup for the widget (versus the default iOS or Android look). You’re welcome to do that, but unless you do the entire process with all of the necessary aspects, you’ll get weird behavior and rendering of the PickerWheel.

In your code, if you take out those parameters and use the default look, it should work fine:

[lua]

pw = widget.newPickerWheel{

    top = display.contentHeight - 300,

    left = 20,

    columns = col,

    font = native.systemFontBold

}

[/lua]

That being said, the “default” PickerWheel is still a set width, because it uses a mask image to mask the hidden parts of the widget (the bands that slide underneath the frame). That means, if you want to position two of them side-by-side, you might need to change that. It’s something that you can adjust, but you’ll need to follow the visual customization as detailed in the docs… this includes creating a new mask file of the width you need.

http://docs.coronalabs.com/api/library/widget/newPickerWheel.html

Hope this helps,

Brent Sorrentino