Hi corona community,
I am having a hard time getting the tab bar widget to work properly. It appears that no matter what I do I can not get an onPress = code to do anything like load a different background image, and a file(s) to work with the tab bar widget settings at all, i.e. no background, tab button logo, etc. Does anyone know how to properly add functionality to the tabs and use files with a tab bar?
Hi @pritt.jordan,
Can you please post your code here? The community/staff will need to see it to help you. Remember to please surround the code with “lua” tags for clarity in the forum display:
[lua] -- code [/lua]
Best regards,
Brent
Here is what I have so far:
local widget = require( “widget” )
display.setStatusBar( display.HiddenStatusBar )
display.newImage(“bg1.jpg”, 158, 200, 255)
local function cafe (event)
display.remove(“meetup.jpg”)
display.newImage(“menu.jpg”, 158, 215, 255)
end
local function meetup (event)
display.remove(“menu.jpg”)
display.newImage(“meetup.png”, 158, 215, 255)
end
local function clear (event)
display.remove(“menu.jpg”,“den.jpg”)
end
– Configure tab buttons
local tabButtons = {
{
label = “Cafe”,
id = “tab1”,
selected = true,
font = dutch,
size = 25,
labelYOffset = -10,
onPress = cafe
},
{
label = “Meet-Up”,
id = “tab2”,
font = dutch,
size = 25,
labelYOffset = -10,
onPress = meetup
},
}
– Create widget
local tabBar = widget.newTabBar(
{
top = display.contentHeight -50,
width = display.contentWidth,
backgroundfile = “bar.png”,
tabSelectedLeftFile = “barLeft.png”,
tabSelectedMiddleFile = “barMiddle.png”,
tabSelectedRightFile = “barRight.png”,
tabSelectedFrameWidth = 20,
tabSelectedFrameHeight = 52,
buttons = tabButtons
}
)
I tried basing it off the example code but I just cant get the files to upload onto the tab bar, or be visual, or however you might wish to describe it. Thanks for any help.
Are the files you specify (“bar.png”, “barLeft.png” etc.) in the same folder as your main.lua file?
Brent
They sure are. Everything is in the same folder.
Are you getting any errors reported in the Simulator? I notice you’re using “display.remove()” incorrectly… you should be referencing a Lua object which points to the image you loaded, not the actual file name.
Brent
No it didn’t, but it obviously has a logic error because it doesn’t work. Do you know a good way to remove the cafe image with the meetup button and the other way around? And thanks a lot for your help btw.
Hi again,
Could you zip up and attach your basic project here so I can inspect? Usually with things like this, it’s like one tiny aspect which is easily solved, but I need to see the entire project code.
To attach a file, click on the “More Reply Options” buttons (not “Post”) then, on the next page, you’ll see an option to upload/attach a file.
Thanks,
Brent
This should be it. cafeapp.zip
Hi @pritt.jordan,
Thanks for the example. I diagnosed what was occurring. Basically, with many widgets, visual customization is an “all or nothing” approach: i.e. visually customize the entire thing, or fall back to default. In your sample, you were missing 4 parameters within the individual button definitions, so I added them (you can change the image file and size if you want, obviously):
[lua]
local tabButtons = {
{
label = “Cafe”,
id = “tab1”,
selected = true,
font = dutch,
size = 25,
labelYOffset = -10,
defaultFile = “tab.png”, – tab button default file
overFile = “tab.png”, – tab button over file
width = 40, – image width
height = 40, – image height
onPress = cafe
},
[/lua]
And then, lower down, you didn’t type a parameter case-sensitve as required. You had:
[lua]
backgroundfile = “bar.png”,
[/lua]
But it should be this (capital “F”):
[lua]
backgroundFile = “bar.png”,
[/lua]
Hope this helps,
Brent
Hi @pritt.jordan,
Can you please post your code here? The community/staff will need to see it to help you. Remember to please surround the code with “lua” tags for clarity in the forum display:
[lua] -- code [/lua]
Best regards,
Brent
Here is what I have so far:
local widget = require( “widget” )
display.setStatusBar( display.HiddenStatusBar )
display.newImage(“bg1.jpg”, 158, 200, 255)
local function cafe (event)
display.remove(“meetup.jpg”)
display.newImage(“menu.jpg”, 158, 215, 255)
end
local function meetup (event)
display.remove(“menu.jpg”)
display.newImage(“meetup.png”, 158, 215, 255)
end
local function clear (event)
display.remove(“menu.jpg”,“den.jpg”)
end
– Configure tab buttons
local tabButtons = {
{
label = “Cafe”,
id = “tab1”,
selected = true,
font = dutch,
size = 25,
labelYOffset = -10,
onPress = cafe
},
{
label = “Meet-Up”,
id = “tab2”,
font = dutch,
size = 25,
labelYOffset = -10,
onPress = meetup
},
}
– Create widget
local tabBar = widget.newTabBar(
{
top = display.contentHeight -50,
width = display.contentWidth,
backgroundfile = “bar.png”,
tabSelectedLeftFile = “barLeft.png”,
tabSelectedMiddleFile = “barMiddle.png”,
tabSelectedRightFile = “barRight.png”,
tabSelectedFrameWidth = 20,
tabSelectedFrameHeight = 52,
buttons = tabButtons
}
)
I tried basing it off the example code but I just cant get the files to upload onto the tab bar, or be visual, or however you might wish to describe it. Thanks for any help.
Are the files you specify (“bar.png”, “barLeft.png” etc.) in the same folder as your main.lua file?
Brent
They sure are. Everything is in the same folder.
Are you getting any errors reported in the Simulator? I notice you’re using “display.remove()” incorrectly… you should be referencing a Lua object which points to the image you loaded, not the actual file name.
Brent
No it didn’t, but it obviously has a logic error because it doesn’t work. Do you know a good way to remove the cafe image with the meetup button and the other way around? And thanks a lot for your help btw.
Hi again,
Could you zip up and attach your basic project here so I can inspect? Usually with things like this, it’s like one tiny aspect which is easily solved, but I need to see the entire project code.
To attach a file, click on the “More Reply Options” buttons (not “Post”) then, on the next page, you’ll see an option to upload/attach a file.
Thanks,
Brent
This should be it. cafeapp.zip