Need help with setLayoutParameters and setLayoutConstraints

Nanocore

As the title says I am trying to find an example or a more full fledged description of the parameters for these two methods. I read the Java reference that the documentation has, but it only talks about the constraints.

I would create a Pixel and center that on the screen and then fill that container with a set of 8 x8 images. I am sure this is probably simple but Im missing something.

To start off, I am just putting two squares on the screen just to try to understand this. The part of the code I am starting with (this is going on an empty Sprite background).

local bkGround = Pixel.new(0xEEEEEE, 1, width, height*.60)
bkGround:setPosition(0, height*.20)
bkGround:setLayoutParameters({
--columnWeights = {1,0,0},
--rowWeights = {0,0,1},
columnWidths={10, 10, 10, 10, 10},
rowHeights={10,10,10, 10, 10, 10},
})

self:addChild(bkGround)


redDot = Pixel.new(0xff0000,1)
redDot:setLayoutConstraints({
--gridwidth = 1,
--gridheight = 1,
gridx = 1,
gridy = 2,
fill=Sprite.LAYOUT_FILL_BOTH
})
bkGround:addChild(redDot)

cyanDot = Pixel.new(0x00ffff,1)
cyanDot:setLayoutConstraints({
--gridwidth = 1,
--gridheight = 1,
gridx = 0,
gridy = 0,
fill=Sprite.LAYOUT_FILL_BOTH
})
bkGround:addChild(cyanDot)

hgy29

setLayerParameters() allows to explicitly specify the minimum width/height or each column/row of the grid used to layout children, and the eventual weight of row/columns, that is how much of the extra space should be allocated to this row/column, if any remaining after checking the size constraints of the children.

In your exemple, you create a 5x5 grid with each cell having a minimum 10x10 size. Your children have no size constraints (no minimum) so the grid will stay at its minimum size of 50x50 pixels, that is 5x5 cells of 10x10 each. That grid is centered in the parent sprite.

Nanocore

So, if I want an 8x8 grid with each cell being the size of an image I should not set the widths and heights in the parameters? And then on the constraints, create a Pixel with a texture image, and give it a constraint of what row and column to place it in, and then add it to the bkGround pixel?

Nanocore

ok, modified a bit and tried different variations and am still missing something. The modified code:
bkGroundHeight = devHeight*.65
local cellWidth = devWidth/8
local cellHeight = bkGroundHeight/8
local bkGround = Pixel.new(0xEEEEEE, 1, devWidth, bkGroundHeight)
bkGround:setPosition(0, height*.20)
bkGround:setLayoutParameters({
columnWidths={cellWidth, cellWidth, cellWidth, cellWidth, cellWidth, cellWidth, cellWidth, cellWidth},
rowHeights={cellHeight,cellHeight,cellHeight, cellHeight, cellHeight, cellHeight, cellHeight, cellHeight, cellHeight},
})

self:addChild(bkGround)


for col = 0, (side - 1) do
for row = 0, (side -1) do
local emptyDot = Pixel.new(emptyImage)
--local imageWidth, imageHeight = redDot:getDimensions()
emptyDot:setLayoutConstraints({
--minWidth = imageWidth,
--minHeight = imageHeight,
gridWidth = 1,
gridHeight = 1,
gridx = col,
gridy = row,
anchor = Sprite.LAYOUT_ANCHOR_CENTER,
fill=Sprite.LAYOUT_FILL_BOTH
})
bkGround:addChild(emptyDot)
end
end

Nanocore

When I use the Layout.lua code I am able to get close to what I want, but the limitations of Layout precludes me from going any further using it. The code for it is:

side = 8
emptyDot = Texture.new("gfx/empty.png")
grid = Layout.new{
bgrC = 0xEEEEEE, bgrA = 0.25,
cellRelW = 1/side, cellRelH = 1/side,
--relH = 0.8,
}

for col = 0, side do
for row = 0, side do
grid:addChild(Layout.new{
col = col, row = row,
texA = 0.5, texS = 0.5,
texture = Texture.new("gfx/empty.png"),
})
end
end

gameScreen = Layout.new({
cols = 1, rows = 6,
--cellBrdW = 5, cellBrdH = 5,
cellRelH = 1/6,
--Layout.new{col = 0, row = 1, sprM = Layout.CROP, cellW = 3},
Layout.new{col = 0, row = 0, bgrC = 0xff0000, bgrA = 1},
Layout.new{grid, col = 0, row = 1, cellH = 4},
Layout.new{rotateGrid, col = 0, row = 1, cellH = 4},
Layout.new{col = 0, row = 5, bgrC = 0x0000ff, bgrA = 1},
})
stage:addChild(gameScreen)

The screen shot shows proper scale and resizes appropriately. I would think I would be able to do something similar with a Pixel box for that middle portion and then layout the dots in an 8x8 grid that will scale and resize for the device (in portrait mode)

MoKaLux

I do not understand what you are trying to do!? You want to put 8 * 8 images inside a container and align them? Are your images the same size?

oleg

@Nanocore You don't need Layout
Just set the 'scale mode' you want
Additionally, you can bind the elements to the edges of the screen using application:getLogicalBounds

minX,minY,maxX,maxY=application:getLogicalBounds()

MoKaLux

I found this piece of code (warning not using layout parameters nor constraints) for drawing a grid (you can copy paste to see it works)

-- DRAW A GRID <a href="https://forum.giderosmobile.com/profile/aditya" rel="nofollow">@aditya</a> function drawRect(left, top, width, height) local shape = Shape.new() shape:setFillStyle(Shape.SOLID, 0xff0000, 0.8) shape:beginPath() shape:moveTo(left,top) shape:lineTo(left + width, top) shape:lineTo(left + width, top+height) shape:lineTo(left, top+height)   shape:closePath() shape:endPath() return shape end   function changeColor(event) local t = event:getTarget() if(t:hitTestPoint(event.x, event.y)) then t:setColorTransform(0, 1, 0) end end   local tx = 0 local ty = 0 local s = 50 local temp   local gap = 5 --Change the gap between the nodes local cols = 4 --Number of columns in the grid --local totalNodes = 25 --Total number of nodes in the grid local totalNodes = cols * cols --Total number of nodes in the grid   for i = 1, totalNodes do temp = drawRect(tx, ty, s, s) stage:addChild(temp) tx = tx + s + gap temp:addEventListener(Event.MOUSE_DOWN, changeColor)   if(i % cols == 0) then ty = ty + s + gap tx = 0 end end

Hope that helps?!

hgy29

Your issue here is that your images (Pixels) are created at full size of the texture, and thus exceed your layout available space at first sight, and it looks like gideros doesn't deal with that case very well. It tries to though, but there is probably a bug somewhere prventing the job to be done correctly.

First change: create your images with a 0x0 size:

local emptyDot = Pixel.new(0,0,emptyImage)

Second thing is that you are computing the expected sizes yourself, which leads to problem due to rounding issues. You should leave the grid system compute the sizes itself based on weight. Second change:

bkGround:setLayoutParameters({ columnWeights={1,1,1,1,1,1,1,1}, rowWeights={1,1,1,1,1,1,1,1}, })

Nanocore

@MoKaLux thanks for the extra effort, I will certainly give that a try and that is all very basic so I am confident that I can make that work. @hgy29 hmm, interesting. Not quite what I would have thought, but I will make the changes and see.

Nanocore

@hgy29 ok, I tried it with the parameters all set to 1 and all I got was one tiny black square in the middle of the screen (I did make the change for the initial size of 0,0). I then changed back to what I had calculated for the width and height and got the resulting output which is WAY closer.

hgy29

@Nanocore, be careful, the parameters set 1 aren't the same as you used, they are columnWeights and rowWeights, not columnWidths and rowHeights

Nanocore

ah, my bad, and YES, that makes it work like what I was looking for. Thank you!