As I start off every post here, “I am a noob”.
But I have an app where there is a tableView on the first screen. I do have the director class involved, but nothings really happening with it. This tableView is on screen1.
When I tap one of the rows of the table, the back button hides behind that top bar. I have moved things around in the code to get it “on top” but then I end up with the whole “you tapped Data 1” screen covering everything including the back button and the top bar. (screenshot: http://d.pr/i/KsWd)
I’m sure I’m just doing something wrong with the groups or something, but I just can’t figure it out. All help is appreciated. I got to where I am with the tableView working with director via this thread: http://developer.coronalabs.com/forum/2012/03/10/tableview-class-and-director-class
If this is director issue, this post can be moved to the director forum… but I think it’s just something I’m doing wrong.
Code is below. Thanks!
[lua]module(…, package.seeall)
display.setStatusBar( display.DarkStatusBar )
function new()
local localGroup = display.newGroup()
g = display.newGroup ()
backGroup = display.newGroup()
localGroup:insert(g)
localGroup:insert(backGroup)
–import the table view library
local tableView = require(“tableView”)
–import the button events library
local ui = require(“ui”)
–initial values
local screenOffsetW, screenOffsetH = display.contentWidth - display.viewableContentWidth, display.contentHeight - display.viewableContentHeight
local myList, detailScreenText
local background = display.newImage(“bg.jpg”, true)
backGroup:insert(background)
–setup the table
local data = {} --note: the declaration of this variable was moved up higher to broaden its scope
local detailScreen = display.newGroup()
detailScreen = display.newGroup()
localGroup:insert(detailScreen)
local navHeader = display.newText(“My Sample App”, 0, 0, “Helvetica-Bold”, 20)
local navBar = ui.newButton{ default = “navBar.png”, onRelease = scrollToTop }
local bottomBar = display.newImage(“bottomBar.png”, 0, 0, true)
local backBtn
–setup functions to execute on touch of the list view items
function listButtonRelease( event )
self = event.target
local id = self.id
print(self.id)
detailScreenText.text = "You tapped "… data[id].title --added this line to make the right side of the screen more interesting
–check for screen width of the iPad
if system.getInfo(“model”) == “iPad” then
selected.width, selected.height = self.width, self.height --iPad: set the color fill width and height
selected.y = self.y + self.height*0.5 --iPad: move the color fill to wherever the user tapped
selected.isVisible = true --iPad: show the fill color
else
transition.to(myList, {time=400, x=display.contentWidth*-1, transition=easing.outExpo })
transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
transition.to(backBtn, {time=400, alpha=1 })
delta, velocity = 0, 0
end
end
function backBtnRelease( event )
print(“back button released”)
transition.to(myList, {time=400, x=0, transition=easing.outExpo })
transition.to(detailScreen, {time=400, x=display.contentWidth, transition=easing.outExpo })
transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2)+backBtn.width, transition=easing.outExpo })
transition.to(backBtn, {time=400, alpha=0 })
delta, velocity = 0, 0
end
local detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY)
detailBg:setFillColor(255,255,255)
detailScreen:insert(detailBg)
detailScreenText = display.newText(“You tapped item”, 0, 0, native.systemFontBold, 14)
detailScreenText:setTextColor(0, 0, 0)
detailScreen:insert(detailScreenText)
detailScreenText.x = math.floor(display.contentWidth/2)
detailScreenText.y = math.floor(display.contentHeight/2)
detailScreen.x = display.contentWidth
–iPad: setup a color fill for selected items
local selected = display.newRect(0, 0, 50, 50) --add acolor fill to show the selected item
selected:setFillColor(67,141,241,180) --set the color fill to light blue
selected.isVisible = false --hide color fill until needed
–setup the data
data[1] = {}
data[1].title = “Data 1”
data[2] = {}
data[2].title = “Data 2”
data[3] = {}
data[3].title = “Data 3”
data[4] = {}
data[4].title = “Data 4”
data[5] = {}
data[5].title = “Data 5”
data[6] = {}
data[6].title = “Data 6”
data[7] = {}
data[7].title = “Data 7”
data[8] = {}
data[8].title = “Data 8”
data[9] = {}
data[9].title = “Data 9”
data[10] = {}
data[10].title = “Data 10”
data[11] = {}
data[11].title = “Data 11”
data[12] = {}
data[12].title = “Data 12”
data[13] = {}
data[13].title = “Data 13”
data[14] = {}
data[14].title = “Data 14”
data[15] = {}
data[15].title = “Data 15”
–iPad: duplicate some of the sample data to make the list longer
for i=1, 0 do
table.insert(data, data[i])
end
local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0
– create the list of items
myList = tableView.newList{
data=data,
default=“listItemBg.png”,
over=“listItemBg_over.png”,
onRelease=listButtonRelease,
height = 260,
top=display.screenOriginY + 200,
bottom=40,
maskFile = “mask-320x260.png”,
–backgroundColor={ 255, 255, 255 }, --commented this out because we’re going to add it down below
callback = function( row )
local g = display.newGroup()
local title = display.newText( row.title, 0, 0, “Helvetica-Light”, 17 )
title:setTextColor(0, 0, 0)
–title:setTextColor(255, 255, 255)
g:insert(title)
title.x = title.width*0.5 + 6
title.y = 20
return g
end
}
local function scrollToTop()
myList:scrollTo(topBoundary-1)
end
–Setup the nav bar
navBar.x = 190 --display.contentWidth*.5
navBar.y = 40 --math.floor(display.screenOriginY + navBar.height*0.5)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = 39
–Setup the bottom bar
bottomBar.x = display.contentWidth*.5
bottomBar.y = 460 – math.floor(display.screenOriginY + navBar.height*0.5)
–Setup the back button
backBtn = ui.newButton{ default = “backButton.png”, over = “backButton_over.png”, onRelease = backBtnRelease }
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y
backBtn.alpha = 0
–Add a white background to the list.
–It didn’t move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)
–*** iPad: The lines below are some layout tweaks for the larger display size ***
if system.getInfo(“model”) == “iPad” then
–Rather than creating a new graphic, let’s just stretch the black bar at the top of the screen
navBar.xScale = 6
–Set new default text since the list is now on the left
detailScreenText.text = “Tap an item on the left”
–Change the width and x position of the detail screen
detailBg.width = display.contentWidth - myList.width
detailScreen.x = myList.x + myList.width*0.5 + 1
–Insert the selected color fill one level before the last item (which was the background inserted above)
myList:insert(2,selected)
–Adjust the x position of the selected color fill
selected.x = myList.x + myList.width*0.5
end
return localGroup
end[/lua] [import]uid: 101670 topic_id: 29726 reply_id: 329726[/import]