Flow Layout Control - How to do Tight Layouts?


Hi all,

Hopfeully someone has run into this design problem before and can provide some helpful insight. Here’s what I’m trying to do. I’m using the Flow Layout control to draw several images that are all different shapes and sizes. I’m looking for a way to lay these out tightly, meaning, layout so that two smaller images may stack vertically next to a larger, taller image.

As of now, the flow layout appears to be assuming a single row of images per “row” which causes the layout to spread wide apart with lots of whitespace with these smaller images meged with larger images. What I’m looking for is a way to tightly layout my multiple images so that there could be multiple images per row stacked on top of each other if they fit.

Any suggestions on how to accomplish this? I suspect I’ll need to add multiple flows to the primary view, but that seems like it would introduce a host of other layout issues as well.

Another option may be to subclass the Flow Layout control, however, I’m not sure where to start with that. Maybe someone from Shinobi can chime in and provide some guidance if this is even possible to achieve with this control element.

Anyone run up against this and how did you solve it?



Hi Wes,

I hope your app development is going well!  As you mentioned in your post, our suggestion would be to use flow layouts to hold the smaller images within the main flow layout - essentially creating a composite of flow layouts.  As you correctly identified in your post, this could work, as long as your use case meets the following conditions:

  • You don’t need to edit the layout - i.e. dragging views around or deleting them.

  • You know the layout of your images up front.

Given those conditions, you could put your smaller images into a separate flow layout, then add that as an item in the main flow layout.  This would allow you to do the tighter packing you’re after.

The main constraint on this approach is that you need to know the maximum height of the items in each row before you pack smaller items into the row.  That is one of the reasons why editing wouldn’t work - moving a large item from one row to another could potentially change the maximum height of each row.  It is also why you would need to determine the layout of your images before adding them to the flow layout control.

The other issue with dragging items around is that you would potentially need to be able to drag an item from the main flow layout to a position inside one of the inner flow layouts.  The flow layout doesn’t currently support that kind of operation.  Items can be dragged between different flow layouts, but not from one to another which is inside it.

I hope this post has been of some help, let me know how things go.




Thanks Dan for the response.

This is the same conclusion that I’ve come to as well. I need to allow the user to resize the elements as well as control the position of those elements. As such, I’ve needed to scale back some of the flexability I was origionaly hoping to achieve. What would be great to see in a future update is a flexabile quilt style layout where all the elements attempt to fit as tight as possilbe given their order. There appears to be other projects out there that attempt to do this, but all elements must be fixed. IE the user can’t rearrange or change sizes.

I’m sure a rearranging, flexible control to do what I’m looking for for tight layouts is a tough problem to crack, however, you folks have turned out some impressive, quality controls and if anyone can do it, you could.

Thanks again Dan for the response.