I Think I Broke Scrolling Tab Bars (Or It Was Already Broken)

I was trying to add a scroll view window and then add a tab bar inside it…

problems:

  it does not report events properly to the listener function.

  either I am building the scroll view window wrong, or it does not like not having the whole screen scrolling.

I have copied the example code that makes it fail. The background is off-white and that shows the scroll window at the bottom of the display. The scroll windows is blank but accepts clicks to the listener, but the events are screwed up and often come up nil. Has anyone done this before? I want to have more buttons in the tab bar than will fit the screen, and allow the user to scroll them left or right.

Thanks!
Stu

<lua>


– main.lua



local widget = require “widget”

local appMode = " device : "

if ( “simulator” == system.getInfo(“environment”) ) then

    appMode = " simulating a "

end

print(“we are” … appMode ,system.getInfo(“model”))

print(“usable screen is this pixels wide”,display.contentWidth)

print(“usable display is this pixels tall”, display.contentHeight)

print("StatusBar height is pixels tall ",display.statusBarHeight)

print("Usable height is pixels tall ",display.contentHeight-display.statusBarHeight)

print ("actual screen dimensions are: (H/W) ",display.pixelHeight, display.pixelWidth)

display.setDefault( “background”, 245, 245, 245 )

local function doNothing()

    print(“here is where I am doing nothing”)

end

– function to listen to scrollView events

local function scrollViewListener( event )

    local s = event.target    – reference to scrollView object

    

    print ("Event: ", event.type, event.x, event.y)     – note what is happenings

    

    if event.type == “beganScroll” then

        print( “beganScroll event type” )

        

    elseif event.type == “endedScroll” then

        print( “endedScroll event type” )

        

    elseif event.type == “movingToTopLimit” then

        print( “movingToTopLimit event type” )

        

    elseif event.type == “movingToBottomLimit” then

        print( “movingToBottomLimit event type” )

        

    elseif event.type == “movingToLeftLimit” then

        print( “movingToLeftLimit event type” )

        

    elseif event.type == “movingToRightLimit” then

        print( “movingToRightLimit event type” )

    end

end

local scroller = widget.newScrollView{

    left = 0,

    top = display.contentHeight - 52,

    width = display.contentWidth,

    --height = display.contentHeight,

    height = 52,

    scrollWidth = 1000,

    scrollHeight = 100,

    listener = scrollViewListener

}

– Create buttons table for the tab bar

local tabButtons = {

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 1”,

        onPress = function() doNothing(); end,

        selected = true

    },

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 2”,

        

        onPress = function() doNothing(); end,

    },    

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 3”,

        onPress = function() doNothing(); end,

    },

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 4”,

        onPress = function() doNothing(); end,

    },    

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 5”,

        onPress = function() doNothing(); end,

    },    

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 6”,

        onPress = function() doNothing(); end,

    },    

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 7”,

        onPress = function() doNothing(); end,

    },    

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 8”,

        onPress = function() doNothing(); end,

    },        

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 8”,

        onPress = function() doNothing(); end,

    },        

    {

        width = 32, height = 32,

        defaultFile = “assets/tabIcon.png”,

        overFile = “assets/tabIcon-down.png”,

        label = “Screen 10”,

        onPress = function() doNothing(); end,

    }

}

–Create a tab-bar and place it at the bottom of the screen

local demoTabs = widget.newTabBar

{

    top = display.contentHeight - 100,

    width = 1000,

    backgroundFile = “assets/tabbar.png”,

    tabSelectedLeftFile = “assets/tabBar_tabSelectedLeft.png”,

    tabSelectedMiddleFile = “assets/tabBar_tabSelectedMiddle.png”,

    tabSelectedRightFile = “assets/tabBar_tabSelectedRight.png”,

    tabSelectedFrameWidth = 32,

    tabSelectedFrameHeight = 52,

    buttons = tabButtons

}

scroller:insert(demoTabs)

</lua>

Three days and no views or ANYTHING…

Beware using scrolling tab bars…

TabBars seems to be a subject no one wants to talk about… I have had similar reponse to my own difficulties with it!

Three days and no views or ANYTHING…

Beware using scrolling tab bars…

TabBars seems to be a subject no one wants to talk about… I have had similar reponse to my own difficulties with it!