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

Answer 1

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 2

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.