SEssentialsFlowLayout SEssentialsAlignMiddle Not Working as Anticipated


Hi Shinobi folks,

I finally had a need to set the subview row alignment property to SEssentialsAlignMiddle to align various height views in the row through their middles.

The problem is, when you have different heights of your views, the smallest height view takes presedence and forces the taller views to clip the views above them in the row above. See screenshot below for an example. You can see the top row clipping under the NavigationBar and the third row clipping the second row.

Is there something I’m doing wrong here?



Hi wes,

My suggestion would be to increase the verticalPadding (to increase the space above the top-most image), and the verticalSubviewSpacing (to increase the space between rows) to remove the overlapping images.


Thanks tkelly for the response. I don’t think that’ll work. It’s more like a band-aid rather than a solution. The problem is still present, but now the spacing between all the other images is quite a bit larger than it needs to be resulting in a layout that doesn’t look great. Plus, since the user can move and resize these images (IP Camera video feeds) there’s no gaurentee that the problem area will be at the top.

If I were to take a guess, my guess is that the underlying code is looking at the shortest object in the row and adjusting all the other objects in the row accordingly whereas the code should inverse the process and look at the tallest object in the row and center the rest of the items with regards to the tallest object. That way the tallest item doesn’t get shifted into the row or header space above it.

I’m sure I overly simplified the problem space, but that’s what appears to be happening.



Hi Wes,

I’ve had a quick look and our middle alignment mode seems iterate through the items on that row aligning them all by their average Y value. Considering that, it makes sense that it would cause an issue with largly varying view heights. Tom’s suggestion would solve the issue of overlapping, but I understand that it could also create unwanted space between rows.

I’ve raised this as an issue in our backlog, and we’ll reassess how this layout mode works, and consider what is missing from our API to allow you to get the behaviour you’re after. In the meanwhile, I think I may have an idea for a workaround on your end, although it’s a very high level idea!

Since this problem comes from the way we look at your managed view’s frames. I think you may be able to work around this by cleverly wrapping your IP Camera Video Feed views in another UIView. You’d need to place your IP Camera Video Feeds inside of a wrapper UIView, and make sure that the height of these wrapper UIViews is the same height as your largest Camera feed, and is consistent on each row. Then, when we calculate our average Y value, it should average the Y value of all of the wrapper views on that row. Since all the wrapper views per row are the same height as your largest IP Camera Video feed for that row, you shouldn’t get any overlap when we do our alignment calculations.

I understand that this may be a little complex, unless you know the ordering of your feeds before hand. Hopefully my explanation above will give you some ideas in terms of work-arounds, until we get a chance to assess our API.

I’d be happy to help you with any further problems you might have.



Hi Jan,

Thanks for the reply and detailed explaination as to what’s happening under the hood. Yes, your suggestion is exactly the same as what I came up with as a thought experiment on how to solve it. There are some challenges on my end with doing this, but those are my issues to work through.

Hopefully the API can be updated to support this layout method as having this additional flexability would be a very slick UI feature to add to our apps.

Thanks again Jan for raising the issue and exploring options in a future release of the FlowLayout.



No problem Wes! It would be great if you could share how you implemented this - both because it is interesting and for the benefit of others.  :grin: