CODEWITHSUNDEEP
apache-flexlayoutuser-interfaceactionscript
Code Robot
Code Robot

Reputation: 21

User Interface Layout Algorithms

I am developing a UI container to hold UI components that can be dragged and dropped on to the container and also move components around within the container. The components are of various sizes. I'm doing this in flex/actionscript but I guess this problem applies to any user interface. Are there any resources (books, etc) that have layout algorithms. Any pointers on this will be a great help.

The user can drag/drop items. But the items should rearrange themselves so that there is no overlap. E.g. if a there are two items right next to each other and the user drops a third item on top of them (in the middle) the first two items should move aside to make room for the third item. (Similar to examples.adobe.com/flex3/devnet/dashboard/main.html except the item size vary).

The source code for the dashboard layout works with the assumptions all the components are the same dimensions. What I'm looking for is a way to layout components of different sizes.

Thanks

Upvotes: 1

Views: 1207

Answers (1)

flexicious.com
flexicious.com

Reputation: 1671

We've done some work like this in the past for a customer. What you need is an implementation of collision detection algorithm. See this http://code.google.com/p/collisiondetectionkit/ Also here is an article on code project that has some layout utilities in C# that implements this which you could probably port : http://www.codeproject.com/Articles/23871/WPF-Diagram-Designer-Part-3. Also

Upvotes: 0

Related Questions