Official “Tab Bar” Widget Now Available
There was a pretty major widget update that was recently pushed into the Daily Builds, and today I’d like to go over one of the major new additions to the “widget” lineup: the much-anticipated official “tab bar” widget.
Additionally, as of Daily Build 2011.653, when you select the “App” template for a New Project, you’ll have the source code for a fully functioning tabBar widget generated for you, ready for you to customize to your heart’s desire! (see screenshot on right).
Tab bars are something you commonly see in both iOS and Android apps. By default (if no theme is set, or no options to change the way it looks are passed via parameters), here’s what it looks like:
Of course, you have to supply the up/down states of the individual icons—but that’s it! For your convenience, everything else is taken care of for you, to include the widths of the buttons, which is calculated based on the amount of buttons on the tabBar.
Usage Example
The following example shows you how to create a tabBar with two buttons, both using the same onPress event handler:
local function onBtnPress( event )
print( "You pressed tab button: " .. event.target.id )
end
local tabButtons = {
{
label="First Tab",
up="firstIcon.png",
down="firstIcon-down.png",
width=32, height=32,
onPress=onBtnPress,
selected=true
},
{
label="Second Tab",
up="secondIcon.png",
down="secondIcon-down.png",
width=32, height=32,
onPress=onBtnPress
},
}
local tabs = widget.newTabBar{
top=430,
buttons=tabButtons
}
So to use the widget, you simply create a table that defines your buttons, and then pass that table as the ‘buttons’ parameter when you create the widget, and of course, make sure your ‘onPress’ listener function is defined somewhere, so the buttons actually do something when they are pressed.
Notice how the first button has the ‘selected’ parameter set to true? This will cause the button to start in it’s pressed/down state when it is created, because you rarely.
Customizable
At the moment, the tabBar resembles that of iOS tab bars nearly identically. There is an Android widget theme in the works, but until then, you’re free to come up with your own theme and customize the widget. Take a look at the tabBar widget documentation to see how to customize the widget’s appearance yourself.
When you’re ready to jump in and start using this widget in your projects, subscribe today so you can have access to the Daily Builds, which is currently the only way to use this new widget (and tons of other new features and bug fixes that’s not currently available in the public trial release).
RSS feed
Awesome! You guys keep giving us presents! Appreciate it!!
-Mario
Great stuff. Good to see Ansca expanding the Widget library. Any more goodies on the horizon? Any chance of an editable multi-line edit field?
Jon
I appreciate the efforts, I just wish these were the real native GUI elements instead of good copies. :/
Same applies on buttons, etc.
Great dudes!
Perfect
Is the button text and icon crisp on retina displays? It looks a little blurry in the up close picture. If so, then this is great.
Loving getting these widgets. With a robust library of common widgets, the next public release of the CoronaSDK will really be a step up in helping it to be the mobile development platform of choice for a lot of folks. Two quick questions:
1. When will the next public release be (I have a subscription, but I’m working with folks who don’t, so I hesitate to use the widgets fully).
2. Given the past discussion of module being less efficient for memory, why does the sample code use the module/package paradigm? (just curious)
@Dave: Yes, it looks very, very sharp on retina displays
Try creating a New Project with the App template and build for an iPhone4 or iPod touch 4, it looks great.
Very sharp since it is using @2x images for the icons, loved it and I am already using it!
Thanks!
Shouldn’t we just be providing the image mask for the button? Would make it much simpler for automatically enabling multiple skin support, just an idea
Also, it would be great if we could control the currently active tab. Sometimes one might want to disable a tab or automatically switch to a different one based on some input.
Anyways it’s much more convenient than having to construct these from scratch like before, so thanks very much for this great widget addition.