How to create a gridview with ‘UICollectionView’ in iOS6 & above

How to create a gridview with ‘UICollectionView’ in iOS6 & above

What is ‘UICollectionView’?

‘UICollectionView’ is a class introduced in iOS 6 SDK. It helps developers in creating grid view to handle ordered collection of data items using customizable layouts. ‘Collection view’, available in this class is like ‘UItableview’ which supports multiple column layouts.

Getting Started:

Create new ‘.h‘ and ‘.m‘ files to display the images.

In ‘ShowImagesViewController.h

#import <UIKit/UIKit.h>
@interface ShowImagesViewController :UICollectionViewController
{
NSArray *allImages;
}
@property (nonatomic, retain) NSArray *allImages;
@end

In ‘ShowImagesViewController.m

#import "ShowImagesViewController.h"
@implementation ShowImagesViewController
@synthesize allImages;
- (void)viewDidLoad
{
[superviewDidLoad];
allImages = [NSArrayarrayWithObjects:@"pizza.jpeg",
@"sides_img.png", @"sandwich_img.png", @"pizza_img.png",
@"pasta_img.png", @"drinks_img.png", @"pizza.jpeg",
@"sides_img.png", @"sandwich_img.png", @"pizza_img.png",
@"pasta_img.png", @"drinks_img.png", nil];
}
 
- (void)didReceiveMemoryWarning
{
[superdidReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
- (NSInteger)collectionView:(UICollectionView *)collectionViewnumberOfItemsInSection:(NSInteger)section
{
returnrecipeImages.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionViewcellForItemAtIndexPath:(NSIndexPath *)indexPath
{
staticNSString *identifier = @"Cell";
UICollectionViewCell *cell = [collectionView
dequeueReusableCellWithReuseIdentifier:identifier
forIndexPath:indexPath];
 
UIImageView *allImageView = (UIImageView *)[cell viewWithTag:100];
allImageView.image = [UIImageimageNamed:[allImagesobjectAtIndex:indexPath.row]];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionViewdidSelectItemAtIndexPath:(NSIndexPath *)indexPath{
}
@end

Example of Grid layout using ‘UICollectionViewController

uicollectionview

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Conclusion:

‘UICollectionViewController’ creates ‘Grid’/’Tile’ layout much faster and offers intuitive user interface in iOS 6 devices.

Avatar
Meera M. Monalisa
meera.monalisa@andolasoft.co.in