How To Create A Gallery on iOS

Question

I'm starting to develop a simple application for iOS, and this application is a simple gallery of some photo (taken from a website). The first problem I encountered is how to create the view for the gallery.

The view should be something like this (or the Photo App):

however doing a view this way is problematic, first because it uses fixed dimension, and I think is a bit difficult to implement (for me).

The other way is to use a custom cell within a tableview, like this:

but it is still using fixed dimension.

What's the best way to create a gallery, without using any third part lib (like Three20)?

Thanks for any reply :)

PS. I think that using fixed dimension is bad because of the new iphone 4 (with a different resolution), am I right?

Answer 1

You should check out AQGridView which does exactly what you are trying to achieve. Even if you want to write your own custom code, have a look at the AQGridView source as more than likely you will need to use a UIScrollView as a base.

Answer 2

In case that you want to use third party classes, the next tutorials can be mixed, they worked for me. Here's a good grid view:
custom image picker like uiimagepicker

And if you want to load them asynchronously, use this: image lazy loading

Both tutorials are very well described and have source code.

Answer 3

The difference in resolution shouldn't be an issue since iOS, if I recall correctly, scales up UI components and images to the right resolution if it detects that it has a retina display. An aside; remember to start making hi/lo-res versions of your graphics if you intend to support both screen sizes without degradation of quality.

As long as you design things in terms of points instead of pixels (which is the way it's done in XCode 4), iOS will be able to handle scaling for you transparently. On a small screen one point will be one pixel, whereas it will be two pixels on a retina display. This allows it to render things with a crisper look on retina displays. Source

I know this question is old, but I didn't see anyone addressing the issue of fixed widths, so I thought I'd contribute for once.

Answer 4

Um, since ios6 came out, the right way to do this is with Collection Views:

Apple Docs on CollectionViews

Also, see the two WWDC 2012 sessions on them:

Introduction to Collection Views
Advanced Collection Views

Sadly, Apple did not include a simple gallery or coverflow layout, but it's pretty easy to make one.

Answer 5

I wrote a tutorial on building a media gallery using a UICollectionView. It populates from the user's photo library. I think it will work perfectly for what you are trying to do.

iPhone Programming Tutorial: Creating An Image Gallery Like Over – Part 1

Hope that helps. Cheers!

Answer 6

I did something very similar to this in a project of my own. I just show some parts of the code here, but if you want to view the full code you can view it on GitHub GitHub Repo

First I made a custom Collection View cell with an ImageView

in CustomCollectionCell.h

#import <UIKit/UIKit.h>

@interface CustomCollectionCell : UICollectionViewCell

@property (nonatomic , retain) UIImageView *imageView;
@end

in CustomCollectionCell.m

#import "CustomCollectionCell.h"

@implementation CustomCollectionCell
- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self setupImageView];
    }
    return self;
}

#pragma mark - Create Subviews

- (void)setupImageView {
    self.imageView = [[UIImageView alloc] initWithFrame:self.bounds];
    self.imageView.autoresizingMask = UIViewAutoresizingNone;//UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    [self addSubview:self.imageView];
}

@end

Then in the view where you want to have the thumbnails you set up the CollectionView

in ThumbNailViewController.m (snippet)

UICollectionView *collectionViewThumbnails;

in ThumbNailViewController.m (snippet)

UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
collectionViewThumbnails=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height - 50) collectionViewLayout:layout];
if (collectionViewThumbnails && layout)
{
    [collectionViewThumbnails setDataSource:self];
    [collectionViewThumbnails setDelegate:self];
    [collectionViewThumbnails registerClass:[CustomCollectionCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [collectionViewThumbnails setBackgroundColor:[UIColor blackColor]];

    [self.view addSubview:collectionViewThumbnails];
}

Then you have the required methods for the collection views. Here you can set up what you

//Number of items in the collectionview
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return [galleryData count];
}

//Set up what each cell in the collectionview will look like
//Here is where you add the thumbnails and the on define what happens when the cell is clicked 
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //initialize custom cell for the collectionview
    CustomCollectionCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    [cell.imageView setClipsToBounds:YES];

    cell.imageView.contentMode = UIViewContentModeScaleAspectFill;

    //format url to load image from
    NSString *url = [NSString stringWithFormat:@"http://andrecphoto.weebly.com/uploads/6/5/5/1/6551078/%@",galleryData[indexPath.item]];

    //load thumbnail
    [cell.imageView setImageWithURL:[NSURL URLWithString:url]
                   placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

    //Sets up taprecognizer for each cell. (onlcick)
    UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
    [cell addGestureRecognizer:tap];

    //sets cell's background color to black
    cell.backgroundColor=[UIColor blackColor];
    return cell;
}

//Sets size of cells in the collectionview
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(100, 100);
}

//Sets what happens when a cell in the collectionview is selected (onlclicklistener)
- (void)handleTap:(UITapGestureRecognizer *)recognizer  {
    //gets the cell thats was clicked
    CustomCollectionCell *cell_test = (CustomCollectionCell *)recognizer.view;

    //gets indexpath of the cell
    NSIndexPath *indexPath = [collectionViewThumbnails indexPathForCell:cell_test];

    if (isConnectedGal)
    {
        //sets the image that will be displayed in the photo browser
        [photoGallery setInitialPageIndex:indexPath.row];

        //pushed photobrowser
        [self.navigationController pushViewController:photoGallery animated:YES];
    }
}

Hopefully that answers your question.

Answer 7

If you don't want to use a third party library, you should do this in UITableView rows. Because of the way UITableView caches cells, it's relatively lightweight in memory. Certainly more so than a possibly very large UIView inside a UIScrollView. I've done it both ways, and I was much happier with the UITableView.

That said, next time I need to do this? I plan to use AQGridView.

Answer 8

Here is a very good library called FGallery for iOS

-Supports auto-rotation

-thumbnail View

-zoom

-delete