CODEWITHSUNDEEP
objective-ciosipaduser-interfaceios5
Tilo Mitra
Tilo Mitra

Reputation: 2793

How could I create a tiled photo gallery of different widths and heights?

I've been looking to create a photo gallery for an iPad app, where the images are of varying widths and heights. Rather than cropping them to fit in a grid-view, I'd like to create a "mosaic" effect as seen in the Pinterest and Jetsetter app (see links for reference images)

Any idea where I could start to create an effect like this?

Upvotes: 2

Views: 755

Answers (1)

Morrowless
Morrowless

Reputation: 6958

For variable height a la Pinterest, the easiest way to go about this is to use a UITableView for each column, as it already provides the mechanism to insert/delete images using UITableViewRowAnimations. It's easier if the height of the image is known, because UITableView asks for it before loading cells. But if it isn't, what you can do is insert each cell sequentially (head or tail) to the shortest UITableView. Load the image, resize if necessary. Disk-cache the heights so you don't have to load the image for every cell. I've successfully implemented it this way.

Addendum: part of the trick in using 3 (or more) UITableViews is to manually sync the scrolling. Otherwise they would scroll on its own:

#pragma mark - UIScrollView stuff
- (void)scrollViewDidScroll:(UIScrollView *)inScrollView {
    // Sync the scrolling of all table views
    CGPoint offset = inScrollView.contentOffset;

    for (NSInteger i = 0; i < self.tableViews.count; i++) {
        PLAlbumTableView *tableView = [self.tableViews objectAtIndex:i];
        if (tableView != inScrollView)
            tableView.contentOffset = offset;

    }
}

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)inScrollView {
    // Sync the scrolling of all table views
    for (NSInteger i = 0; i < self.tableViews.count; i++) {
        PLAlbumTableView *tableView = [self.tableViews objectAtIndex:i];
        if (tableView != inScrollView)
            [tableView setContentOffset:tableView.contentOffset animated:NO];
    }
}

Upvotes: 1

Related Questions