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

Before You Go...!

Subscribe to Andolasoft Blog

Stay up to date with the latest techniques of web & mobile app development service tips and our SaaS and open source product news.
Holler Box