Encapsulated iOS Style Tab Bar

Solar2D General Questions/Discussion
#1

This is really just ripped straight from the WidgetDemo in the SampleCode directory, but I thought it might be useful.

The WidgetDemo has a tab bar at the bottom but is pretty easy to customise. The code below makes customising it a single line of code.

Add your tabbar (after creating a parent display group for it) like this:

[lua]newTabBar( tabBarGroup, { {text=“Products”, func=showMenu}, {text=“Near Me”, func=showMap}, {text=“Dates”, func=showCalendar}, } )[/lua]

The text values are simply the labels to show under each tab and the func values are callback functions for you to define your own actions. Typically, these would simply hide and show display groups for the content of the application.

And the function to be called is this:

[lua]function newTabBar( parent, items )
– create buttons table for the tab bar
local tabButtons = {}
for i=1, #items do
tabButtons[#tabButtons+1] =
{
label=items[i].text,
up=“assets/tabIcon.png”,
down=“assets/tabIcon-down.png”,
width=32, height=32,
onPress=items[i].func,
selected=(i == 1)
}
end

– create a tab-bar and place it at the bottom of the screen
local demoTabs = widget.newTabBar{
top=display.contentHeight-50,
buttons=tabButtons
}

– insert tab bar into display group
parent:insert( demoTabs.view )
end[/lua]

Obviously, this uses the same icon for each tab, but as the input to the function is just a table of values that is simple to change. [import]uid: 8271 topic_id: 27236 reply_id: 327236[/import]

#2

Keep these up horace and also post to codebase, great work :slight_smile: [import]uid: 84637 topic_id: 27236 reply_id: 110709[/import]

#3

Can you add a transition to different views on selecting a Tab? [import]uid: 131058 topic_id: 27236 reply_id: 112211[/import]

#4

Good idea! I’ll take a look later… [import]uid: 8271 topic_id: 27236 reply_id: 112271[/import]

#5

Having just looked back at the tab bar code (have been very heavily focussed on the menu code recently) I can say confidently that you can define your own transitions - or any effect - because the ‘items’ argument to the ‘newTabBar( parent, items )’ function defines your button press event callback and it is this function callback which actually switches the display, not the tab bar.

For example, the WidgetDemo I’ve provided has this code to show the tabbar:

[lua]newTabBar( tabBarGroup, { {text=“Products”, func=showMenu}, {text=“Near Me”, func=showScrollView}, {text=“Dates”, func=showButtons}, } )[/lua]

To have transitions, I would simply add them into the code of the functions called ‘showMenu’, ‘showScrollView’ and ‘showButtons’. The tabbar code never knows - or needs to know - anything about it. [import]uid: 8271 topic_id: 27236 reply_id: 112319[/import]

#6

This is wonderful @horacebury
[import]uid: 19626 topic_id: 27236 reply_id: 112323[/import]

#7

Thank you, but I have to give credit to Corona for it - I only wrapped their code in a simple function. [import]uid: 8271 topic_id: 27236 reply_id: 112327[/import]