Sign in to follow this  

position items on a window

Recommended Posts

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)




Share this post

Link to post
Share on other sites
You have many "__[i]" 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.

Share this post

Link to post
Share on other sites
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?

Share this post

Link to post
Share on other sites

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

Edited by WiredCat

Share this post

Link to post
Share on other sites
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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this