Creating TabBar buttons from image sheet

Getting Started Newbie Questions
#1

The buttons on my tabBar are from individual image files and work fine (part 1) but I would prefer to work off an image sheet (part 2)

*****PART 1*****

width = 90,

height = 90,    

defaultFile = “images/buttonUp.png”,

overFile = “images/buttonDown.png”,

onPress = function()…etc

*****PART 2*****

local tabSpriteSheet = graphics.newImageSheet( “images/tabIconsSS.png”, { width = 32, height = 32, numFrames = 10, sheetContentWidth = 160, sheetContentHeight = 64} );

and then later within the button table I have…

sheet = tabSpriteSheet,

defaultFrame = 1,

overFrame = 2,

onPress = function()…etc

            

But it’s not working and possibly to do with where I should put “sheet = tabSpriteSheet” as I’m not sure as the API only mentions default frame and overFrame as requirements.

But when I use the same spritesheet to display images outside tabBar it works fine.  

My tabBar height is 100 and width is _W-50 (i.e. 768-50)

J.

#2

I’ve not tried this, but it looks like to me sheet would be defined in the widget.newTabBar() function and not in the individual buttons array.  They would get the frame ID’s, but the sheet itself would be defined in the newTabBar() call along with the background, and three selected slices also coming from the image sheet.

#3

Yeah you’re right that makes much more sense !  Will try it…

#4

I’ve not tried this, but it looks like to me sheet would be defined in the widget.newTabBar() function and not in the individual buttons array.  They would get the frame ID’s, but the sheet itself would be defined in the newTabBar() call along with the background, and three selected slices also coming from the image sheet.

#5

Yeah you’re right that makes much more sense !  Will try it…

#6

What was the answer?  I looked in the api sdk docs, the only example is for image files and no frames.

Is this posible to create a tab bar using frames?

#7

tab create code inside main.lua:

local tabButtonSheetOptions = {

    width = 32,

    height = 32,

    numFrames = 20,

    sheetContentWidth = 160,

    sheetContentHeight = 128,

}

local tabButtonSheet = graphics.newImageSheet( “tab-buttons.png”, tabButtonSheetOptions )

local tabButtons = 

{

    {

        sheet = tabButtonSheet,

        defaultFrame = 1,

        overFrame = 11,

        label = “NEWS”,

        onPress = function() storyboard.gotoScene( “scnNews1” ); end,

    },

    { 

        sheet = tabButtonSheet,

        defaultFrame = 2,

        overFrame = 12,

        label = “SHOP”,

        onPress = function() storyboard.gotoScene( “scnShop1” ); end,

    },

    { 

        sheet = tabButtonSheet,

        defaultFrame = 3,

        overFrame = 13,

        label = “MUSIC”,

        onPress = function() storyboard.gotoScene( “scnShop1” ); end,

    },

    { 

        sheet = tabButtonSheet,

        defaultFrame = 4,

        overFrame = 14,

        label = “HAPPENING”,

        onPress = function() storyboard.gotoScene( “scnCOE1” ); end,

    },

    { 

        sheet = tabButtonSheet,

        defaultFrame = 5,

        overFrame = 15,

        label = “ABOUT”,

        onPress = function() storyboard.gotoScene( “scnAbout1” ); end,

    },

}

– create the actual tabBar widget

local tabBar = widget.newTabBar

{

    sheet = tabButtonSheet,

    buttons = tabButtons

    top = 0,

    width = display.contentWidth,

    backgroundFile = “tabbar.png”,

    tabSelectedLeftFile = “tabBar_tabSelectedLeft.png”,

    tabSelectedMiddleFile = “tabBar_tabSelectedMiddle.png”,

    tabSelectedRightFile = “tabBar_tabSelectedRight.png”,

    tabSelectedFrameWidth = 20,

    tabSelectedFrameHeight = 52,

}

I get an error widget.newTabBar: defaultFile expected.  Seems like it is looking for imageFiles and not frames.  Is frames supported fro tabbar.  I have looked and see the question asked many times, but so far haven’t found an answer.  Perhaps everyone just went to use image files?

#8

Try leaving out the backgroundFile.  You will need to have the background file as part of your image sheet.

Rob

#9

What was the answer?  I looked in the api sdk docs, the only example is for image files and no frames.

Is this posible to create a tab bar using frames?

#10

tab create code inside main.lua:

local tabButtonSheetOptions = {

    width = 32,

    height = 32,

    numFrames = 20,

    sheetContentWidth = 160,

    sheetContentHeight = 128,

}

local tabButtonSheet = graphics.newImageSheet( “tab-buttons.png”, tabButtonSheetOptions )

local tabButtons = 

{

    {

        sheet = tabButtonSheet,

        defaultFrame = 1,

        overFrame = 11,

        label = “NEWS”,

        onPress = function() storyboard.gotoScene( “scnNews1” ); end,

    },

    { 

        sheet = tabButtonSheet,

        defaultFrame = 2,

        overFrame = 12,

        label = “SHOP”,

        onPress = function() storyboard.gotoScene( “scnShop1” ); end,

    },

    { 

        sheet = tabButtonSheet,

        defaultFrame = 3,

        overFrame = 13,

        label = “MUSIC”,

        onPress = function() storyboard.gotoScene( “scnShop1” ); end,

    },

    { 

        sheet = tabButtonSheet,

        defaultFrame = 4,

        overFrame = 14,

        label = “HAPPENING”,

        onPress = function() storyboard.gotoScene( “scnCOE1” ); end,

    },

    { 

        sheet = tabButtonSheet,

        defaultFrame = 5,

        overFrame = 15,

        label = “ABOUT”,

        onPress = function() storyboard.gotoScene( “scnAbout1” ); end,

    },

}

– create the actual tabBar widget

local tabBar = widget.newTabBar

{

    sheet = tabButtonSheet,

    buttons = tabButtons

    top = 0,

    width = display.contentWidth,

    backgroundFile = “tabbar.png”,

    tabSelectedLeftFile = “tabBar_tabSelectedLeft.png”,

    tabSelectedMiddleFile = “tabBar_tabSelectedMiddle.png”,

    tabSelectedRightFile = “tabBar_tabSelectedRight.png”,

    tabSelectedFrameWidth = 20,

    tabSelectedFrameHeight = 52,

}

I get an error widget.newTabBar: defaultFile expected.  Seems like it is looking for imageFiles and not frames.  Is frames supported fro tabbar.  I have looked and see the question asked many times, but so far haven’t found an answer.  Perhaps everyone just went to use image files?

#11

Try leaving out the backgroundFile.  You will need to have the background file as part of your image sheet.

Rob