Reader Level:

Grid View in iPhone

By Sachin Bhardwaj on Mar 15, 2013
In this article I will explain how to show image in grid form in iPhone.


In this article I will create a Single View application. I will use a table view from xib for it. When we click on a table cell in this application we show images in a grid form.

To understand it we use the following.

Step 1

Open XCode by double-clicking on it.

Step 2

Create a New XCode Project by clicking on it.

Step 3

Now select Single View Application and click on Next.

Step 4

Now provide your Product Name and Company Identifier.

Step 5

Select the location where you want to save your project and click on Create.

Step 6

Now we write the code.


#import <UIKit/UIKit.h>
#import "QuartzViewController.h"
@interface ViewController : UIViewController
QuartzViewController *controller;


#import "ViewController.h"
@interface ViewController ()
#import "QuartzViewController.h"
#import "QuartzImages.h"
static NSString *kCellIdentifier = @"kCellIdentifier";
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
NSLog(@"View Controller ");
controller = [[QuartzViewController alloc] initWithNibName:@"DemoView" viewClass:[QuartzImageView class]];
controller.title = @"Images & Tiling";
controller.demoInfo = @"QuartzImageView";
- (void)dealloc {
[super dealloc];
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
QuartzViewController *targetViewController = controller;
[[self navigationController] pushViewController:targetViewController animated:YES];
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
return 1;
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
return 1;
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellIdentifier];
if (cell == nil)
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:kCellIdentifier] autorelease];
QuartzViewController *vc = controller;
cell.textLabel.text = vc.title;
cell.detailTextLabel.text = vc.demoInfo;
cell.detailTextLabel.adjustsFontSizeToFitWidth = YES;
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
return cell;

Step 7

Finally we click on the Run button to show the output.

Step 8

Output1 in iPhone:


Output2 in iPhone:


Output3 in iPhone:


Sachin Bhardwaj
Sachin Bhardwaj

Sachin Bhardwaj is a software developer working with Apple technologies including Xcode, iOS, iPhone, iPad, iPod and Mobile app store.