position items on a window

Started by
5 comments, last by _WeirdCat_ 8 years, 6 months ago

I simply need to position X items in a window but i want a 'space' between them

so actually when window width is 10 and i have 5 items to place i need to find the space width so items wont be touching screen borders and each other)

let __ be a space and [ i ] be item

this is how it should look like

|

|__[ i ]__[ i ]__[ i ]__[ i ]__[ i ]__|

|

problem is i dont know how to find the item and space width (i only know how many items are in one row and window width)

:XXXX

Advertisement
You have many "__" and then one "__" at the end, so for 5 items, you have 5+1 spaces, or

10 = 5 items + 6 spaces

This is however not enough. You have two variables (space width and item width), and only one equation. You need an additional equation to solve it.

It can be a value for either the item width or the space width, or you can have a relation between space width and item width (eg they are equally wide, or item is 2 times as wide as space, or something else).
With the new second equation, you have two variables and two equations, and the problem can be solved.

lets say item width is smaller than window_width / item_count

thing is the window can be any size and i need to place 4 items every row

That seems like a useful condition to have smile.png

# So the spaces use everything that is not an item.
total_space_width = window_width - (item_width * item_count)

# The width of one space is thus
space_width = total_space_width / space_count = total_space_width / (item_count + 1)

# (Since you had one more space than items)

Does that solve your problem?

well actually no i was trying to find dynamic item widtg and space width, so resulting image would look reasonable, but it seems i need to use one const like space_width = ((total_width / item_count)*0.1) / (item_count+1) which is not exactly what i wanted but seems i wont be able to do that w/o this...

i wish that 0.1 would be dynamic according to the width of the screen

Finding dynamic width isn't hard, but as previously mentioned you need a ratio. The rest is grade-school level algebra.

For instance, say that your items must be 2x the size of the space.

You start with:

item_width = 2*space_width
screen_width = item_count*item_width + (item_count-1)*space_width
Now you substitute in item_width for space_width:

screen_width = item_count*2*space_width + (item_count-1)*space_width
Simplify and solve for space_width:

space_width = screen_width/((3*item_count)-1)
Substitute back in for item_width:

item_width = 2*screen_width/((3*item_count)-1)

Now, if you don't just want items to be twice as wide as spaces, you need to iteratively solve a slightly more complex equation. In this situation, you need to know the minimum width of your items (how small can they be and still be drawable) and the maximum size or ratio you want.

Then you solve the above equation as written. Clamp the item_width to the minimum and maximum sizes. Then resolve for space_width using item_width:

space_width = (screen_width - (item_count*item_width)/(item_count-1)
And there you have a flexible system that will arrange item_count items in a row with variable width and spacing while maintaining some pleasant ratios and minimum dimensions. The harder problem then is to arrange some N items into multiple rows with a variable number per row. It's all just more algebra, though. You end up with more equations and more variables (your item_count becomes a variable instead of a constant, and you'll need minimum values and ratios for both item_width and space_width, and then solve for item_count after finding those). But it's just basic algebra.

Sean Middleditch – Game Systems Engineer – Join my team!

the primary idea was to not use any constant numbers :)

This topic is closed to new replies.

Advertisement