How can I display my images in my viewController the same as the below screen shot?

Question

In my iPad program I have an array which holds images. How can I display my all images (from an image array) in my viewController the same as the below screen shot? Is there a good way to do it, any sample application paths to refer or sample code?

I need the following functionality.

1. Tapping an image will show it full screen
2. A close button to close this view as the same as the screen shot.
3. Two buttons to display the remaining and previous images.

A sample screen shot is attached below. We can see that the below application is showing all images at the right side of the screen.

Answer 1

Alright, this should be easy, though a bit of coding is needed. Start out with a simple view based app template.

I don't know where the images come from so I just put all the images to be shown in the resources folder.

The view controller PictureViewController will accept an array of UIImages and should be presented modally. I'll post the code below.

The code to show the PictureViewController is placed in the view controller created by the template. I just added a simple UIButton to the view to trigger an action which looks something like this:

- (IBAction)onShowPictures
{
    // Load all images from the bundle, I added 14 images, named 01.jpg ... 14.jpg
    NSMutableArray *images = [NSMutableArray array];
    for (int i = 1; i <= 14; i++) {
        [images addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%02d.jpg", i]]];
    }

    PictureViewController *picViewController = [[PictureViewController alloc] initWithImages:images];

    [self presentModalViewController:picViewController animated:YES];

    [picViewController release];
}

The view controller's view was created with interface builder, looking like this:

PictureViewController.xib

View Hierarchy

The fullscreen image is linked to an outlet fullScreenImage seen in the following header file. Actions are connected as well.

I've set the fullscreen imageView's content mode to Aspect Fit.

The Thumbnails will be added dynamically with code. Here's the view controller's code

PictureViewController.h

@interface PictureViewController : UIViewController 
{
    NSMutableArray *imageViews;

    NSArray *images;

    UIImageView *fullScreenImage;

    int currentPage;
}

@property (nonatomic, retain) NSMutableArray *imageViews;
@property (nonatomic, retain) NSArray *images;
@property (nonatomic, retain) IBOutlet UIImageView *fullScreenImage;

- (id)initWithImages:(NSArray *)images;

- (IBAction)onClose;
- (IBAction)onNextThumbnails;
- (IBAction)onPreviousThumbnails;

@end

PictureViewController.m

The define MAX_THUMBNAILS on top defines the maximum of thumbnails seen. A UITapGestureRecognizer will take care of the tap events for the thumbnails. Adjust the CGRectMake in setupThumbnailImageViews to position the thumbnails as you wish. This controller is just a basic approach without orientation support.

#import "PictureViewController.h"

#define MAX_THUMBNAILS 6

@interface PictureViewController ()

- (void)showSelectedImageFullscreen:(UITapGestureRecognizer *)gestureRecognizer;
- (void)setupThumbnailImageViews;
- (void)setThumbnailsForPage:(int)aPage;
- (UIImage *)imageForIndex:(int)anIndex;

@end


@implementation PictureViewController

@synthesize imageViews, images, fullScreenImage;


- (id)initWithImages:(NSArray *)someImages
{
    self = [super init];
    if (self) {
        self.images = someImages;
        self.imageViews = [NSMutableArray array];
        currentPage = 0;
    }
    return self;
}

- (void)viewDidLoad
{
    self.fullScreenImage.image = [images objectAtIndex:0];
    [self setupThumbnailImageViews];
    [self setThumbnailsForPage:0];
}

- (void)showSelectedImageFullscreen:(UITapGestureRecognizer *)gestureRecognizer
{
    UIImageView *tappedImageView = (UIImageView *)[gestureRecognizer view];

    fullScreenImage.image = tappedImageView.image;
}

- (void)setupThumbnailImageViews
{
    for (int i = 0; i < MAX_THUMBNAILS; i++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20.0, 
                                                                               166.0 + (130.0 * i), 
                                                                               130.0, 
                                                                               90.0)];

        UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self 
                                                                                               action:@selector(showSelectedImageFullscreen:)];
        tapGestureRecognizer.numberOfTapsRequired = 1;
        tapGestureRecognizer.numberOfTouchesRequired = 1;
        [imageView addGestureRecognizer:tapGestureRecognizer];
        [tapGestureRecognizer release];

        imageView.userInteractionEnabled = YES;

        [imageViews addObject:imageView];
        [self.view addSubview:imageView];
    }
}

- (void)setThumbnailsForPage:(int)aPage
{
    for (int i = 0; i < MAX_THUMBNAILS; i++) {
        UIImageView *imageView = (UIImageView *)[imageViews objectAtIndex:i];
        UIImage *image = [self imageForIndex:aPage * MAX_THUMBNAILS + i];

        if (image) {
            imageView.image = image;
            imageView.hidden = NO;          
        } else {
            imageView.hidden = YES;
        }
    }
}

- (UIImage *)imageForIndex:(int)anIndex
{
    if (anIndex < [images count]) {
        return [images objectAtIndex:anIndex];
    } else {
        return nil;
    }
}


#pragma mark -
#pragma mark user interface interaction

- (IBAction)onClose
{
    [self dismissModalViewControllerAnimated:YES];
}

- (IBAction)onNextThumbnails
{
    if (currentPage + 1 <= [images count] / MAX_THUMBNAILS) {
        currentPage++;
        [self setThumbnailsForPage:currentPage];
    }
}

- (IBAction)onPreviousThumbnails
{
    if (currentPage - 1 >= 0) {
        currentPage--;  
        [self setThumbnailsForPage:currentPage];    
    }
}


#pragma mark -
#pragma mark memory management

- (void)didReceiveMemoryWarning 
{
    [super didReceiveMemoryWarning];

    [images release];   
}

- (void)viewDidUnload 
{
    [super viewDidUnload];

    [imageViews release];   
    [fullScreenImage release];
}

- (void)dealloc 
{
    [images release];
    [imageViews release];   
    [fullScreenImage release];

    [super dealloc];
}

@end

The result: