Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Image positioning not as expected in tableView
Started by J@V0 Apr 08 2019 11:33 AM

No replies to this topic
tableview positioning
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

J@V0

[GLOBAL: userInfoPane.html]
J@V0
  • Enthusiast

  • 50 posts
  • Corona SDK

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 (buildingImagebuildingNamebuildingDescription).

 

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




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: tableview, positioning