spacing between shapes

Solar2D General Questions/Discussion
#1

Hello,

I am trying to make spacing between rectangles equal in my app. The height of the rectangles depends on the content, which changes, so I don’t know the exact height
here is what I have so far:

[lua]–titles and paragraphs are tables with entries - each one has 15 entries
local y = 100
for i=1,#photos do
local r = display.newRect(0,0,0,0)
local t = display.newRetinaText(titles[i],0,0,280,0,native.systemFontBold,15)
local p = display.newRetinaText(paragraph[i],0,0,280,0,native.systemFont,15)
local w = display.newImage(“photo” … i … “.png”, system.TemporaryDirectory)

if w.width > 300 then
w.xScale = 0.4
w.yScale = 0.4
if w.width > 300 then
w.xScale = 0.4
w.yScale = 0.4
end
end
t:setTextColor(0,0,0)
p:setTextColor(0,0,0)
w.x=display.contentWidth*0.5
r.width=300
r.height=t.height + p.height + w.contentHeight + 50
r.x=display.contentWidth*0.5
r.y=y
t.x=display.contentWidth*0.5
t.y=(r.y - r.contentHeight*0.5) + t.contentHeight*0.5 + 10
p.x=display.contentWidth*0.5
w.y=(r.y - r.contentHeight*0.5) + t.contentHeight + w.contentHeight*0.5 + 20
p.y = r.y + w.contentHeight*0.5 + 40
scrollView:insert®
scrollView:insert(t)
scrollView:insert§
scrollView:insert(w)
y = y + (r.y + r.contentHeight*0.5 ) + 50 – here i try to find the bottom part of the rectangle and go down 20 pixels, but this just isn’t happening

end[/lua]

any help with this would be greatly appreciated!

Thanks [import]uid: 24641 topic_id: 21981 reply_id: 321981[/import]

#2

anyone at all? [import]uid: 24641 topic_id: 21981 reply_id: 87857[/import]

#3

Lets say that the first rect is centred on 100, 100, and is 72 tall.

The bottom of the first rectangle is 100 + r.height/2 = 136
Lets say the gap is 20 pixels.
Lets say the next rect is 100 tall.
The y of the next rect should be 136 + 20 + newrect.height/2

[import]uid: 108660 topic_id: 21981 reply_id: 87868[/import]

#4

Is there a simple way of putting that into my code or will I have to rewrite it? [import]uid: 24641 topic_id: 21981 reply_id: 87870[/import]

#5

thanks for the help btw [import]uid: 24641 topic_id: 21981 reply_id: 87871[/import]

#6 
local y = 0   
  
for i=1,#photos do  
 local r = display.newRect(0,0,0,0)  
 local t = display.newRetinaText(titles[i],0,0,280,0,native.systemFontBold,15)  
 local p = display.newRetinaText(paragraph[i],0,0,280,0,native.systemFont,15)  
 local w = display.newImage("photo" .. i .. ".png", system.TemporaryDirectory)  
   
 if w.width \> 300 then  
 w.xScale = 0.4  
 w.yScale = 0.4  
 if w.width \> 300 then  
 w.xScale = 0.4  
 w.yScale = 0.4  
 end  
 end  
 t:setTextColor(0,0,0)  
 p:setTextColor(0,0,0)  
 w.x=display.contentWidth\*0.5  
 r.width=300  
 r.height=t.height + p.height + w.contentHeight + 50  
 r.x=display.contentWidth\*0.5  
  
--now we know how big r is, lets place it  
 y = y + r.height / 2  
  
 r.y=y   
 t.x=display.contentWidth\*0.5  
 t.y=(r.y - r.contentHeight\*0.5) + t.contentHeight\*0.5 + 10  
 p.x=display.contentWidth\*0.5  
 w.y=(r.y - r.contentHeight\*0.5) + t.contentHeight + w.contentHeight\*0.5 + 20  
 p.y = r.y + w.contentHeight\*0.5 + 40  
 scrollView:insert(r)  
 scrollView:insert(t)  
 scrollView:insert(p)  
 scrollView:insert(w)  
  
 y = y + r.height / 2 --now we are at the bottom of the rect  
 y = y + 50 -- now we added a gap of 50  
  
   
end

…off the top of my head [import]uid: 108660 topic_id: 21981 reply_id: 87873[/import]

#7

thankyou very much!! that fixed my problem completely! [import]uid: 24641 topic_id: 21981 reply_id: 87875[/import]