I’m trying to position small images ( resourceImage ) and text ( buildingPrice ) in a tableView but I can’t get it to work properly. However, it works fine for my other elements in the tableView ( buildingImage , buildingName , buildingDescription ).
It’s probably something wrong with the parent or the way I loop through the different elements (in for key,value in pairs(row.params.costResource) do) but I can’t figure where the mistake it.
I have tried two different alternatives (see row:insert ). My code and a video recording of the result can be found below.
Aternative 1 (elements are displayed below my table and shift position after scrolling down)
Alternative 2 (elements have the right position but do not seem added to the Table and do not follow the scrolling)
local function onRowRender( event ) -- When rendering a row of the tableView -- Get reference to the row group local row = event.row --Set up the localized variables to be passed via the event table local spacingBetweenimageAndText = 20 -- Defines the spacing between the thumbnails and the text next to it (when showing resource and its bonus/quantity) local buildingBlock = display.newGroup() -- Creates a new display group for each element displayed in the screen buildingBlock.x = 100 -- Block is aligned 0 px from left edge (will be included in preUpgradeElements as a reference later on) buildingBlock.y = 0 -- globalData.bonusesTable.y + globalData.bonusesTable.height/2 + spacingBetweenBlocks -- Block is positioned below the bonus table with some margin buildingBlock.width = display.contentWidth - 100 -- buildingInfoOverlayMargin\*2 -- THe full screen width minus the side margins -- buildingBlock.anchorChildren=false -- Overlay background (grey) row.bg = display.newRect( buildingBlock, 0, 0, display.contentWidth - 100, 300 ) row.bg.anchorX = 0 row.bg.anchorY = 0 row.bg:setFillColor( 0.3, 0.3, 0.3 ) row:insert( row.bg ) row.buildingImage = display.newImageRect(buildingBlock, "images/"..row.params.buildingType.."0.png", 200 , 200 ) row.buildingImage.x = 0 row.buildingImage.y = 0 --row.height / 2 row.buildingImage.anchorX = 0 row.buildingImage.anchorY = 0 row.buildingName = display.newText( buildingBlock, row.params.buildingName, 0, 0, native.systemFontBold, 80 ) row.buildingName.anchorX = 0 row.buildingName.anchorY = 0 row.buildingName:setFillColor( 0 ) row.buildingName.y = 0 row.buildingName.x = row.buildingImage.width + spacingBetweenimageAndText row.buildingDescription = display.newText( buildingBlock, row.params.buildingDescription, 0, 0, native.systemFont, 50 ) row.buildingDescription.anchorX = 0 row.buildingDescription:setFillColor( 0.5 ) row.buildingDescription.y = row.buildingName.height + spacingBetweenimageAndText row.buildingDescription.x = row.buildingImage.width + spacingBetweenimageAndText local i = 0 local rowId = -1 local baseTopMargin = 200 + row.buildingName.height + row.buildingDescription.height + spacingBetweenimageAndText row:insert( row.buildingName ) row:insert( row.buildingDescription ) row:insert( row.buildingImage ) for key,value in pairs(row.params.costResource) do local offset = 0 if (math.mod(i, 2) == 0) then offset = 0 rowId = rowId + 1 else offset = 500 end local resourceImage = display.newImageRect(buildingBlock, "images/"..value.name..".png", 60 , 60 ) -- Image thumbnail of the resource resourceImage.anchorX = 0 resourceImage.anchorY = 0 resourceImage.x = row.buildingImage.width + spacingBetweenimageAndText + offset resourceImage.y = baseTopMargin + (rowId \* 60) + (row.index-1) \* 300 row.buildingPrice = display.newText( buildingBlock, value.cost, 0, 0, native.systemFont, 50 ) row.buildingPrice:setFillColor( 0.5 ) row.buildingPrice.anchorX = 0 row.buildingPrice.anchorY = 0 row.buildingPrice.x = row.buildingImage.width + resourceImage.width + spacingBetweenimageAndText \* 2 + offset row.buildingPrice.y = baseTopMargin + (rowId \* 60) + (row.index-1) \* 300 i= i+1 -- ALTERNATIVE 1: row:insert( row.buildingPrice ) row:insert( resourceImage ) end -- ALTERNATIVE 2: (note that I used "row.resourceImage" in the loop above instead of the local variable) --row:insert( row.buildingPrice ) -- row:insert( row.resourceImage ) return true end -- onRowRender -- Create the widget globalData.tableView = widget.newTableView( { left = 50, top = 200, height = display.contentHeight-400, width = display.contentWidth-100, onRowRender = onRowRender, onRowTouch = onRowTouch, listener = scrollListener } ) local listOfBuildings = {} -- Table storing all building types --local costResourceTable = {} for row in globalData.db:nrows("SELECT \* FROM buildingsProperties WHERE level = 1") do local costResourceTable = {} for row2 in globalData.db:nrows([[SELECT resourceTable.name, buildingsBonuses.resourceId, buildingsBonuses.costResource FROM .....]]) do costResourceTable[row2.resourceId] = {name = row2.name, cost = row2.costResource} end table.insert( listOfBuildings, row.buildingType ) globalData.tableView:insertRow{ rowHeight = 300, params = {buildingId=row.buildingId, buildingName=row.buildingName, buildingType=row.buildingType, buildingDescription=row.buildingDescription, costResource=costResourceTable} -- Include custom data in the row } end -- for nrows