Grid View in iPhone

In this article I will explain how to show image in grid form in iPhone.

Introduction

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.

ViewController.h

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

ViewController.m

#import "ViewController.h"
@interface ViewController ()
@end
#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;
}
@end

Step 7

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

Step 8

Output1 in iPhone:

Output2 in iPhone:

Output3 in iPhone: