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

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

< 1 Minute Read

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
No Comments

Post A Comment

Exit pop up

Sad to see you leaving early...

From "Aha" to "Oh shit" we are sharing everything on our journey.
Enter your email address to stay up to date with the latest news.
Holler Box