tabbar:setSelected not working when index is lower than tab pressed

Solar2D Widgets
#1

I will try to file a bug report for this later, but I wanted to post this just in case anyone has been seeing it - sorry if it’s a repost (it’s really late here and I just want to get finished right now…)

When creating a tab bar widget the tab bar will default it’s touch area to the width of the screen, regardless of the width value passed in. Even though the tab buttons will be properly spaced, the touch zones are not, so they will overlap.

I wanted to have my tab buttons closer together and leave some whitespace either side of the bar, so I have to define a fake button at index 1 and 6 (I have 4 tabs.)

The problem with this is that the tabs at the ends are actual tabs, so I thought I would simply attach a listener to them to set the selected tab as the tab next to them. Fake tab #1 would set #2 and fake tab #6 would set #5. This works fine for fake tab #6 but fake tab #1 does not fire unless the onPress function has a slight delay - implemented with a timer…

 local tabButtons = { { id="one", label="", onPress=function() timer.performWithDelay(10, function() tabbar:setSelected(2) end, 1 ) end, width=80, height=80, selected=false, }, { id="natonal", label="", onPress=listener, width=80, height=80, defaultFile="nationaloff.png", overFile="nationalon.png", selected=false, }, { id="global", label="", onPress=listener, width=80, height=80, defaultFile="globaloff.png", overFile="globalon.png", selected=true, }, { id="nearby", label="", onPress=listener, width=80, height=80, defaultFile="nearbyoff.png", overFile="nearbyon.png", selected=false, }, { id="friends", label="", onPress=listener, width=80, height=80, defaultFile="friendsoff.png", overFile="friendson.png", selected=false, }, { id="two", label="", onPress=function() tabbar:setSelected(5) end, width=80, height=80, selected=false, }, } -- Create tabbar at bottom of the screen tabbar = widget.newTabBar{ top = display.actualContentHeight, width = display.actualContentWidth, buttons = tabButtons }
#2

Hi Matt,

If you want a tab bar that’s not the entire width of the content area, you should set its width in the creator function (but I see you’re creating it as the full width). Also, the buttons don’t support width and height parameters; the tab bar will be equally divided up by the number of buttons you give it.

Are you saying that if you create a less-than-contentWidth wide tab bar, it still recognizes touch outside of its bounds? If so, that’s definitely a bug and needs to be investigated.

Thanks,

Brent

#3

Yes, I’m saying that if you do this:

tabbar = widget.newTabBar{ top = display.actualContentHeight, width = display.actualContentWidth/2, buttons = tabButtons }

the tab bar is created as being half the screen width, but each button’s touch zone overlaps the next. In this case it would appear as though each button activates the one next to it, but it is in fact because half the button is placed over the one to it’s left.

I really will try to post a bug report on this. Promise.

#4

Hi Matt,

If you want a tab bar that’s not the entire width of the content area, you should set its width in the creator function (but I see you’re creating it as the full width). Also, the buttons don’t support width and height parameters; the tab bar will be equally divided up by the number of buttons you give it.

Are you saying that if you create a less-than-contentWidth wide tab bar, it still recognizes touch outside of its bounds? If so, that’s definitely a bug and needs to be investigated.

Thanks,

Brent

#5

Yes, I’m saying that if you do this:

tabbar = widget.newTabBar{ top = display.actualContentHeight, width = display.actualContentWidth/2, buttons = tabButtons }

the tab bar is created as being half the screen width, but each button’s touch zone overlaps the next. In this case it would appear as though each button activates the one next to it, but it is in fact because half the button is placed over the one to it’s left.

I really will try to post a bug report on this. Promise.