What is the best way to display images/slides/containers on the iPad?

Question

For an app that I am writing I need to display several views (in my case images, yet I guess that should not matter all that much) in a style similar to the way images are displayed in the Fotos app for the iPad. Consider this graphic:

Obviously on portrait view fewer slides can fit in per row than on Landscape view. What I have/want to do now:

• Animate the addition of each slide by using a sliding animation
• I already have a UIView subclass that represents a slide and that responds to touches the way I need it.

Where I am unsure is as to what is the best way of actually putting the slides onto the screen. I was originally just going to loop through them and place them onto the viewControllers view using the Frame of each slide (then I can do a count and increase the y-value after every 5 slides or so). Yet if I do it like that, I fear that my View will basically only support one screen orientation as I would need to relayout all the slides if the orientation changes, which seems rather a waste of resources to me (?).

How would you solve this problem? Is there maybe any "linebreak on overflow" ability such as with CSS (where a container automatically drops onto the next line if the float property is set and the parent container does not provide enough space)?

I am surely not the first person to think about this :)

Thanks for your answers!

Answer 1

There's no "linebreak on overflow" setting in Cocoa. If you want to make something that does that, you'll need to write code that lays out the slides. Here's a sample of the code I use to do it:

CGRect frame = CGRectMake(margins.left, margins.top, cellSize.width, cellSize.height);
for (UIButton *button in self.buttons) {
    button.frame = frame;

    // Move frame to next position
    frame.origin.x += cellSize.width + cellSpacing;
    if (frame.origin.x + frame.size.width > margins.left + contentWidth) {
        frame.origin.x = leftMargin;
        frame.origin.y += cellSize.height + cellSpacing;
    }
}

I'm using UIButtons for each image, hence the self.buttons ivar.

Yes, you will need to relayout when the screen orientation changes. To do that, have a method like this:

- (void)layoutSubviews {
    [super layoutSubviews];
    [self layoutButtons];
}

Which calls your layout code. In my case, it's layoutButtons. This is in a subclass of UIScrollView, so when the view is autoresized after an autorotation, the layoutSubviews method gets called.

If you're using a UIScrollView, make sure you update the self.contentSize ivar too.