TabBar Image customization problem

Getting Started Newbie Questions
#1

Hello,

I’m a little new to Corona and need some help with the TabBar. The problem is that when i follow the documentation’s “Image file construction” example it gives me a runtime error. But when I remove the defaultFile and overFile for all but one of the buttons it fixes it and lets me go to my scene. This problem consists when I have a background image and even when the images for the buttons are all the same. I also don’t have tab highlight files, because it says they’re optional. Can someone explain this to me? (The tutorials, videos and documentation sure can’t)

Thank you in advance,

Axel

#2

Hi Axel,

Can you please post your exact code for the TabBar? Please surround it with “lua” tags for clarity in the forums:

[lua] -- your code [/lua]

Thanks,

Brent

#3

It’s almost the same as in the example, except without the highlighter images.

[lua]

local widget = require( “widget” )

– Function to handle button events

local function handleTabBarEvent( event )
print( event.target._id )
end

– Configure the tab buttons to appear within the bar

local tabButtons = {
 

{
width = 72,
height = 120,
defaultFile = “tabBarIconDef.png”,
overFile = “tabBarIconOver.png”,
label = “Tab1”,
id = “tab1”,
selected = true,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
},
 

{
width = 72,
height = 120,
defaultFile = “tabBarIconDef.png”,
overFile = “tabBarIconOver.png”,
label = “Tab2”,
id = “tab2”,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
},
 

{
width = 72,
height = 120,
defaultFile = “tabBarIconDef.png”,
overFile = “tabBarIconOver.png”,
label = “Tab3”,
id = “tab3”,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
}
 

}
 

– Create the widget

local tabBar = widget.newTabBar {

left = 0,
top = display.contentHeight-120,
width = 580,
height = 120,

backgroundFile = “tabBarBack.png”,
buttons = tabButtons
 

}

[/lua]

And here’s the code that works.

[lua]

local widget = require( “widget” )

– Function to handle button events

local function handleTabBarEvent( event )
print( event.target._id )
end
 

– Configure the tab buttons to appear within the bar

local tabButtons = {
 

{
width = 72,
height = 120,
label = “Tab1”,
id = “tab1”,
selected = true,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
},
 

{
width = 72,
height = 120,
label = “Tab2”,
id = “tab2”,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
},
 

{
width = 72,
height = 120,
defaultFile = “tabBarIconDef.png”,
overFile = “tabBarIconOver.png”,
label = “Tab3”,
id = “tab3”,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
}
 

}
 

– Create the widget
 

local tabBar = widget.newTabBar {
left = 0,
top = display.contentHeight-120,
width = 580,
height = 120,
buttons = tabButtons
}

[/lua]

I have no idea how to make this work. I was going to use it for a menu design with the bar on the top and the actual menu on the bottom. But i decided that it would be better to just use regular buttons arranged all over the screen(since i get to put a picture/animation in there to represent the sub-menu).

But still if you could explain it that would be great(It would be useful later).

#4

Hi Axel,

Generally, when you customize a widget, you need to supply ALL of the various image specifications. Meaning, in the documentation, whatever says “required” in the parameters is required, so you must include all of them (or none of them).

Brent

#5

Oh, ok that makes more sense now. Thank you for helping me out,

Axel

#6

Hi Axel,

Can you please post your exact code for the TabBar? Please surround it with “lua” tags for clarity in the forums:

[lua] -- your code [/lua]

Thanks,

Brent

#7

It’s almost the same as in the example, except without the highlighter images.

[lua]

local widget = require( “widget” )

– Function to handle button events

local function handleTabBarEvent( event )
print( event.target._id )
end

– Configure the tab buttons to appear within the bar

local tabButtons = {
 

{
width = 72,
height = 120,
defaultFile = “tabBarIconDef.png”,
overFile = “tabBarIconOver.png”,
label = “Tab1”,
id = “tab1”,
selected = true,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
},
 

{
width = 72,
height = 120,
defaultFile = “tabBarIconDef.png”,
overFile = “tabBarIconOver.png”,
label = “Tab2”,
id = “tab2”,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
},
 

{
width = 72,
height = 120,
defaultFile = “tabBarIconDef.png”,
overFile = “tabBarIconOver.png”,
label = “Tab3”,
id = “tab3”,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
}
 

}
 

– Create the widget

local tabBar = widget.newTabBar {

left = 0,
top = display.contentHeight-120,
width = 580,
height = 120,

backgroundFile = “tabBarBack.png”,
buttons = tabButtons
 

}

[/lua]

And here’s the code that works.

[lua]

local widget = require( “widget” )

– Function to handle button events

local function handleTabBarEvent( event )
print( event.target._id )
end
 

– Configure the tab buttons to appear within the bar

local tabButtons = {
 

{
width = 72,
height = 120,
label = “Tab1”,
id = “tab1”,
selected = true,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
},
 

{
width = 72,
height = 120,
label = “Tab2”,
id = “tab2”,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
},
 

{
width = 72,
height = 120,
defaultFile = “tabBarIconDef.png”,
overFile = “tabBarIconOver.png”,
label = “Tab3”,
id = “tab3”,
size = 16,
labelYOffset = -8,
onPress = handleTabBarEvent
}
 

}
 

– Create the widget
 

local tabBar = widget.newTabBar {
left = 0,
top = display.contentHeight-120,
width = 580,
height = 120,
buttons = tabButtons
}

[/lua]

I have no idea how to make this work. I was going to use it for a menu design with the bar on the top and the actual menu on the bottom. But i decided that it would be better to just use regular buttons arranged all over the screen(since i get to put a picture/animation in there to represent the sub-menu).

But still if you could explain it that would be great(It would be useful later).

#8

Hi Axel,

Generally, when you customize a widget, you need to supply ALL of the various image specifications. Meaning, in the documentation, whatever says “required” in the parameters is required, so you must include all of them (or none of them).

Brent

#9

Oh, ok that makes more sense now. Thank you for helping me out,

Axel