tab bar

charlesleo1993 · March 19, 2016, 5:44am

hi there…

i wanna askin, how can i make tab bar scrollable… many people ask about dis… but still couldnt find the right answer… already used scroll view but its still not working good… because i wanna put 10 tabbar, n hope it can scroll to right n left… thank you.

rik.veldhuizen · March 19, 2016, 8:35am

Hi,

Perhaps you find code below useful. Please note that this is a piece from a large chunk of code I use in my app, so it will have references to other functions/variables. Just use it for inspiration :). It is a horizontal scrollable tab bar with icons on top.

 local function moveListener( event ) idnr = event.target.id if ( event.phase == "moved" ) then local dx = math.abs( event.x - event.xStart ) if ( dx \> 5 ) then scrollView:takeFocus( event ) end elseif ( event.phase == "ended" ) then --take action if an object was touched audio.play(storyboard.state.buttonSound, {channel=30}) for i=1,mItemsNr do sMenu.icons[i].alpha = sMenu.alphaOff end sMenu.icons[idnr].alpha = sMenu.alphaOn scrollView:scrollToPosition({x=xBoundary/2-sMenu.icons[idnr].x, time=100}) eventIdNr = event.id if not sMenu.shown then sMenu.shown = true doSubMenuBG() end doSubMenu() end return true end scrollView = widget.newScrollView { width = xBoundary, height = tDim.smH, scrollWidth = tDim.smW, scrollHeight = tDim.smH, friction = 0.98, maxVelocity = 2.5, verticalScrollDisabled = true, hideBackground = false, leftPadding = -0.8\*iconOffset, rightPadding = -0.0\*iconOffset } scrollView.x = tDim.smX scrollView.y = tDim.smY local scrollLine = display.newLine(0,tDim.smH,tDim.smW,tDim.smH) scrollLine.strokeWidth = 2 scrollLine:setStrokeColor(unpack(cGreen)) --generate icons for i = 1, mItemsNr do sMenu.bgrects[i] = display.newRect(iconOffset+(i-1)\*xBoundary/5,tDim.smH/2, tDim.smH, tDim.smH) sMenu.bgrects[i].alpha = 0 sMenu.bgrects[i].isHitTestable = true sMenu.bgrects[i].id = i sMenu.icons[i] = display.newImageRect( "images/mg"..tostring(i)..".png", 0.8\*tDim.smH, 0.8\*tDim.smH ) sMenu.icons[i].x = iconOffset+(i-1)\*xBoundary/5 sMenu.icons[i].y = tDim.smH/2 sMenu.icons[i].isHitTestable = false sMenu.icons[i].alpha = sMenu.alphaOff mGroup:insert(sMenu.bgrects[i]) mGroup:insert(sMenu.icons[i]) scrollView:insert( sMenu.bgrects[i] ) scrollView:insert( sMenu.icons[i] ) sMenu.icons[i].id = i sMenu.bgrects[i]:addEventListener( "touch", moveListener ) end mGroup:insert(scrollView) scrollView:insert(scrollLine) scrollView:scrollToPosition({x=-0.8\*iconOffset, time=200})

rob · March 19, 2016, 8:46pm

On iOS where the idea of tabBar’s originated, the design pattern does not permit scrolling tabBars. Instead, when you get too many you provide a “More” or “…” button as the most far right and tapping on it brings up an overlay of more buttons. Since we try to emulate native behavior, our widget.newTabBar() won’t support scrolling.

However if you go to our Github repository at https://github.com/coronalabs/framework-widget

You can download the source for the widget framework and change the tabBar to your own liking.

Rob

rik.veldhuizen · March 19, 2016, 8:35am

Hi,

Perhaps you find code below useful. Please note that this is a piece from a large chunk of code I use in my app, so it will have references to other functions/variables. Just use it for inspiration :). It is a horizontal scrollable tab bar with icons on top.

 local function moveListener( event ) idnr = event.target.id if ( event.phase == "moved" ) then local dx = math.abs( event.x - event.xStart ) if ( dx \> 5 ) then scrollView:takeFocus( event ) end elseif ( event.phase == "ended" ) then --take action if an object was touched audio.play(storyboard.state.buttonSound, {channel=30}) for i=1,mItemsNr do sMenu.icons[i].alpha = sMenu.alphaOff end sMenu.icons[idnr].alpha = sMenu.alphaOn scrollView:scrollToPosition({x=xBoundary/2-sMenu.icons[idnr].x, time=100}) eventIdNr = event.id if not sMenu.shown then sMenu.shown = true doSubMenuBG() end doSubMenu() end return true end scrollView = widget.newScrollView { width = xBoundary, height = tDim.smH, scrollWidth = tDim.smW, scrollHeight = tDim.smH, friction = 0.98, maxVelocity = 2.5, verticalScrollDisabled = true, hideBackground = false, leftPadding = -0.8\*iconOffset, rightPadding = -0.0\*iconOffset } scrollView.x = tDim.smX scrollView.y = tDim.smY local scrollLine = display.newLine(0,tDim.smH,tDim.smW,tDim.smH) scrollLine.strokeWidth = 2 scrollLine:setStrokeColor(unpack(cGreen)) --generate icons for i = 1, mItemsNr do sMenu.bgrects[i] = display.newRect(iconOffset+(i-1)\*xBoundary/5,tDim.smH/2, tDim.smH, tDim.smH) sMenu.bgrects[i].alpha = 0 sMenu.bgrects[i].isHitTestable = true sMenu.bgrects[i].id = i sMenu.icons[i] = display.newImageRect( "images/mg"..tostring(i)..".png", 0.8\*tDim.smH, 0.8\*tDim.smH ) sMenu.icons[i].x = iconOffset+(i-1)\*xBoundary/5 sMenu.icons[i].y = tDim.smH/2 sMenu.icons[i].isHitTestable = false sMenu.icons[i].alpha = sMenu.alphaOff mGroup:insert(sMenu.bgrects[i]) mGroup:insert(sMenu.icons[i]) scrollView:insert( sMenu.bgrects[i] ) scrollView:insert( sMenu.icons[i] ) sMenu.icons[i].id = i sMenu.bgrects[i]:addEventListener( "touch", moveListener ) end mGroup:insert(scrollView) scrollView:insert(scrollLine) scrollView:scrollToPosition({x=-0.8\*iconOffset, time=200})

rob · March 19, 2016, 8:46pm

On iOS where the idea of tabBar’s originated, the design pattern does not permit scrolling tabBars. Instead, when you get too many you provide a “More” or “…” button as the most far right and tapping on it brings up an overlay of more buttons. Since we try to emulate native behavior, our widget.newTabBar() won’t support scrolling.

However if you go to our Github repository at https://github.com/coronalabs/framework-widget

You can download the source for the widget framework and change the tabBar to your own liking.

Rob