Best way to auto arrange grid style elements on rotation? - ios

Question

I have a grid of items in my application like so:
http://cl.ly/1m243117220B060Z0M26/Screen%20Shot%202012-07-09%20at%2011.34.22%20AM.png
These are just custom UIButtons at the moment. What might be the best way to go about making these grid items rearrange automatically to fit the width of landscape mode?
http://cl.ly/1d0x431P1n211W1H2n3B/Screen%20Shot%202012-07-09%20at%2011.35.42%20AM.png
Obviously this is done commonly in apps but I searched a bit and couldn't find exactly what I was looking for.
Added bonus if someone knows of something like Isotope for iOS (http://isotope.metafizzy.co/)

Answer 1

You probably want a routine that adjusts your scrollview and the images (or in my case, buttons with images) based upon the size of the scrollview (and make sure you set the scrollview's autoSizingMask so it stretches as the orientation changes).
So, for example, I have a routine that does the following (it assumes you have a scrollview created with UIButton's already added for each of your icons ... this basic idea would work if you're using UIImageViews, too, though):
- (void)rearrangeImages
{
if (!_listOfImages)
{
[self loadImages];
return;
}
// a few varibles to keep track of where I am
int const imageWidth = [self thumbnailSize];
int const imagesPerRow = self.view.frame.size.width / (imageWidth + 2);
int const imageHeight = imageWidth;
int const imagePadding = (self.view.frame.size.width - imageWidth*imagesPerRow) / (imagesPerRow + 1);
int const cellWidth = imageWidth + imagePadding;
int const cellHeight = imageHeight + imagePadding;
NSInteger row;
NSInteger column;
NSInteger index;
CGRect newFrame;
// iterate through the buttons
for (UIView *button in [_scrollView subviews])
{
index = [button tag];
if ([button isKindOfClass:[UIButton class]] && index < [_listOfImages count])
{
// figure out where the button should go
row = floor(index / imagesPerRow);
column = index % imagesPerRow;
newFrame = CGRectMake(column * cellWidth + imagePadding,
row * cellHeight,
imageWidth,
imageHeight);
if (button.frame.origin.x != newFrame.origin.x || button.frame.origin.y != newFrame.origin.y)
[button setFrame:newFrame];
}
}
NSInteger numberOfRows = floor(([_listOfImages count] - 1) / imagesPerRow) + 1;
[_scrollView setContentSize:CGSizeMake(self.view.frame.size.width, numberOfRows * cellHeight)];
}
I then have my app call this when the screen changes orientation, e.g.,
- (void)viewWillLayoutSubviews
{
[self rearrangeImages];
}
If you're supporting pre iOS 5, you might also need something like:
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
float iOSversion = [[[UIDevice currentDevice] systemVersion] floatValue];
// we don't need to do this in iOS 5, because viewWillLayoutSubviews is automatically called
if (iOSversion < 5.0)
[self viewWillLayoutSubviews];
}