I have an app design where I want to have a series of text entry fields. I use a tab bar to select different categories of information.
As a test, I created 4 groups, corresponding to the 4 buttons on my tab bar. Each group has a text label and a text field.
When a tab button is selected, it is supposed to change the group’s alpha property and make it appear.
I have the groups set up so that group 1 is visible when the app starts.
When tab 2 is selected, the label and text box appear as intended, but only the label from group 1 disappears. The text box stays visible. If I then select tab 3, the label and text box from group 3 appears, but only the text field from 2 disappears (text fields from both group 1 and 2 are visible).
I can’t figure out why changing alpha will make the text box appear, but not disappear.
–
– main.lua
– require widget to use tab bar
local widget = require (“widget”)
–Create table of pages. Each page is a display group
local page = {}
page[1]=display.newGroup()
page[2]=display.newGroup()
page[3]=display.newGroup()
page[4]=display.newGroup()
–text box and label for group 1
local datefieldlabel = display.newText (“Date:”, (display.contentWidth*.05), (display.contentHeight*.15), native.systemFont, 20)
local datefield = native.newTextField((display.contentWidth*.05), (display.contentHeight*.2), (display.contentWidth*.3), 30)
datefield.isEditable=true
datefield.inputType = “number”
page[1]:insert (datefieldlabel)
page[1]:insert (datefield)
–text box and label for group 2
local attendancefieldlabel = display.newText (“Attendees:”, (display.contentWidth*.05), (display.contentHeight*.33), native.systemFont, 20)
local attendancefield = native.newTextField((display.contentWidth*.05), (display.contentHeight*.37), (display.contentWidth*.3), 30)
attendancefield.isEditable=true
attendancefield.inputType=“number”
page[2]:insert (attendancefieldlabel)
page[2]:insert (attendancefield)
–text box and label for group 3
local infofieldlabel = display.newText (“Event Information:”, (display.contentWidth*.05), (display.contentHeight*.42), native.systemFont, 20)
local infofield = native.newTextField((display.contentWidth*.05), (display.contentHeight*.45), (display.contentHeight*.5), (display.contentHeight*.45))
infofield.isEditable=true
infofield.inputType=“default”
page[3]:insert (infofieldlabel)
page[3]:insert (infofield)
–text bx and label for group 4
local stufflabel = display.newText( “stuff”, (display.contentWidth*.05), (display.contentHeight*.05), native.systemFont, 20 )
local stufffield = native.newTextField( (display.contentWidth*.05), (display.contentHeight*.50), (display.contentHeight*.5) , (display.contentHeight*.45))
page[4]:insert (stufflabel)
page[4]:insert (stufffield)
–make all pages transparent. Set alpha to 0
page[1].alpha=0
page[2].alpha=0
page[3].alpha=0
page[4].alpha=0
–variable to select page to be shown
local selectedOnLoad = 1
local function onTabSelect( e )
for i=1, #page do
if (i==e.target._id) then
page[i].alpha=1
else
page[i].alpha=0
end
end
print (e.target._id)
end
local tabButtons =
{
{
id=1,
label = “Event Contact”,
width = 32, height = 32,
labelColor = { default = {0,0,0}, over = {255,255,255} },
onPress = onTabSelect,
selected = true,
defaultFile = “assets/tabIcon.png”,
overFile = “assets/tabIcon-down.png”
},
{
id=2,
label = “Event Info”,
width = 32, height = 32,
labelColor = { default = {0,0,0}, over = {255,255,255} },
onPress = onTabSelect,
selected = false,
defaultFile = “assets/tabIcon.png”,
overFile = “assets/tabIcon-down.png”
},
{
id=3,
label = “Resources Used”,
width = 32, height = 32,
labelColor = { default = {0,0,0}, over = {255,255,255} },
onPress = onTabSelect,
selected = false,
defaultFile = “assets/tabIcon.png”,
overFile = “assets/tabIcon-down.png”
},
{
id=4,
label = “Additional Info”,
width = 32, height = 32,
labelColor = { default = {0,0,0}, over = {255,255,255} },
onPress = onTabSelect,
selected = false,
defaultFile = “assets/tabIcon.png”,
overFile = “assets/tabIcon-down.png”
},
}
–set tab to be selected
tabButtons[selectedOnLoad].selected=true
page[selectedOnLoad].alpha=1
local tabBar = widget.newTabBar
{
top = display.contentHeight - 50,
width = display.contentWidth,
backgroundFile = “assets/tabbar.png”,
tabSelectedLeftFile = “assets/tabBar_tabSelectedLeft.png”,
tabSelectedMiddleFile = “assets/tabBar_tabSelectedMiddle.png”,
tabSelectedRightFile = “assets/tabBar_tabSelectedRight.png”,
tabSelectedFrameWidth = 20,
tabSelectedFrameHeight = 52,
buttons = tabButtons
}