Disable tabbar during transition

Solar2D Composer
#1

Hey all,

I’m working on a project for my internship-company at the moment and I’m struggeling with a problem regarding the tabBar widget. The tabBar works all fine (switching between scenes), so do the transitions (“slideLeft”), but the trouble comes when the tabBar is pressed during a transition. At first the screens would switch amazingly fast after eachother which just looked (and felt) horrible. After switching a boolean during the active transition which stopped the tabbar from triggering another “gotoScene” the fast switching was gone but the problem still occured within the tabBar itself. What is happening? When I tap 2 tabbar-buttons quickly after eachother the screen transitions to the scene of the button pressed first but the button which is pressed second gets selected…

For example:

I’m currently at home (also the selected tabbar-button) and quickly press the project-tabbarbutton and about-tabbarbutton after eachother. The screen goes to the “project” scene but the about-tabbarbutton gets selected.

Is there a possibility to disable the tabbar for a sec or to disable all user touches for some time? I searched all morning to a solution but can’t find any so it would be great if anyone can help me.

With regards,
René “Spanky” [import]uid: 189912 topic_id: 32735 reply_id: 332735[/import]

#2

Hi Rene.

There isn’t a built in way to handle this at present. However this is what i would recommend you do as a workaround until there is a built in mechanism.

I would create an invisible rectangle that completely covers your tab bar, and sits on top of it. Each time you press a tab bar button, move the rectangle from offscreen to ontop of your tab bar.

Then in your enterscene event, move the rectangle back off screen.

The way this works is that the rectangle would swallow touch events, and as a result touches would never register on your tab buttons during scene transitions.

Here is how i would set up the rectangle

local tabBarHeight = 50 -- set this to whatever your tab bar's height is  
  
local overlayRect = display.newRect( 0, 0, display.contentWidth, tabBarHeight )  
overlayRect.x = display.contentCenterX  
overlayRect.y = display.contentHeight + overlayRect.contentHeight  
overlayRect.isVisible = false -- set it to invisible  
overlayRect.isHitTestable = true -- allow hit events to be sent to the object, event though it is invisible  
  
local function swallowTouchEvents( event )  
 return true  
end  
  
-- Add event listeners to the overlay rect so it swallows the touch events  
overlayRect:addEventListener( "touch", swallowTouchEvents )  
overlayRect:addEventListener( "tap", swallowTouchEvents )  
  
-- When you press a tab bar button  
overlayRect.y = tabBar.y -- move the overlayRect to the tabBar's y position so it covers it  
  
-- In your enter scene event  
overlayRect.y = display.contentHeight + overlayRect.contentHeight -- Move the overlay back off screen

Hope this makes sense :slight_smile:
[import]uid: 84637 topic_id: 32735 reply_id: 130208[/import]

#3

Hi Rene.

There isn’t a built in way to handle this at present. However this is what i would recommend you do as a workaround until there is a built in mechanism.

I would create an invisible rectangle that completely covers your tab bar, and sits on top of it. Each time you press a tab bar button, move the rectangle from offscreen to ontop of your tab bar.

Then in your enterscene event, move the rectangle back off screen.

The way this works is that the rectangle would swallow touch events, and as a result touches would never register on your tab buttons during scene transitions.

Here is how i would set up the rectangle

local tabBarHeight = 50 -- set this to whatever your tab bar's height is  
  
local overlayRect = display.newRect( 0, 0, display.contentWidth, tabBarHeight )  
overlayRect.x = display.contentCenterX  
overlayRect.y = display.contentHeight + overlayRect.contentHeight  
overlayRect.isVisible = false -- set it to invisible  
overlayRect.isHitTestable = true -- allow hit events to be sent to the object, event though it is invisible  
  
local function swallowTouchEvents( event )  
 return true  
end  
  
-- Add event listeners to the overlay rect so it swallows the touch events  
overlayRect:addEventListener( "touch", swallowTouchEvents )  
overlayRect:addEventListener( "tap", swallowTouchEvents )  
  
-- When you press a tab bar button  
overlayRect.y = tabBar.y -- move the overlayRect to the tabBar's y position so it covers it  
  
-- In your enter scene event  
overlayRect.y = display.contentHeight + overlayRect.contentHeight -- Move the overlay back off screen

Hope this makes sense :slight_smile:
[import]uid: 84637 topic_id: 32735 reply_id: 130208[/import]

#4

Thanks Danny, will try this out right now! [import]uid: 189912 topic_id: 32735 reply_id: 130265[/import]

#5

Thanks a lot Danny. Had to change some values (developing for tablet and smartphone so working with screenOriginY to position) but for the rest it works like a charm! :slight_smile: [import]uid: 189912 topic_id: 32735 reply_id: 130266[/import]

#6

Thanks Danny, will try this out right now! [import]uid: 189912 topic_id: 32735 reply_id: 130265[/import]

#7

Thanks a lot Danny. Had to change some values (developing for tablet and smartphone so working with screenOriginY to position) but for the rest it works like a charm! :slight_smile: [import]uid: 189912 topic_id: 32735 reply_id: 130266[/import]

#8

Thanx, this has helped me a lot.

#9

Thanx, this has helped me a lot.