Images Display in GridView on IPhone

This is the GridView application. In this application we will see how to programatically  images display in Gridview on iPhone .

Step 1: Open a Xcode, Create a View base application. Give the application name “Button_Example”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add one NSObject class in the project. So select the project -> New File -> Cocoa Touch -> Objective-C class and give the class name “Item”.

Step 4: We need to add one image in the project. Give the image name “icon2.png”.

Step 5: Open the “Button_ExampleViewController”file, we need to add UITableViewDelegate  and UITableViewDataSource , define UITableView and NSMutableArray class and one buttonPressed: method and import the Item.h class. So make the following changes.


#import <uikit/UIKit.h>
#import "Item.h"

@interface Button_ExampleViewController : UIViewController <uitableViewDelegate, UITableViewDataSource> {

IBOutlet UITableView *tableView;
NSMutableArray *sections;


@property (nonatomic, retain) UITableView *tableView;
@property (nonatomic, retain) NSMutableArray *sections;





Step 6: Double click the Button_ExampleViewController.xib file and open it to the Interface Builder.First drag the TableView from the library and place it to the view window. Select tableview from the view window and bring up connection inspector and connect dataSource to the File’s Owner and delegate to the File’s Owner icon. Now save the .xib file, close it and go back to the Xcode.

Step 7: In the Button_ExampleViewController.m file, make the following changes:


#import "Button_ExampleViewController.h"
#import "Item.h"

@implementation Button_ExampleViewController

@synthesize tableView,sections;

// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {

[super loadView];
sections = [[NSMutableArray alloc] init];

for(int s=0;s<1;s++) { // 4 sections
NSMutableArray *section = [[NSMutableArray alloc] init];
for(int i=0;i<12;i++) { // 12 items in each section
Item *item = [[Item alloc] init];"New Screen";
item.title=[NSString stringWithFormat:@"Item %d", i];

[section addObject:item];
[sections addObject:section];

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return [sections count];

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 1;

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
NSMutableArray *sectionItems = [sections objectAtIndex:indexPath.section];
int numRows = [sectionItems count]/4;
return numRows * 80.0;

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {

NSString *sectionTitle = [NSString stringWithFormat:@"Section %d", section];
return sectionTitle;

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *hlCellID = @"hlCellID";

UITableViewCell *hlcell = [tableView dequeueReusableCellWithIdentifier:hlCellID];
if(hlcell == nil) {
hlcell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault reuseIdentifier:hlCellID] autorelease];
hlcell.accessoryType = UITableViewCellAccessoryNone;
hlcell.selectionStyle = UITableViewCellSelectionStyleNone;

int section = indexPath.section;
NSMutableArray *sectionItems = [sections objectAtIndex:section];

int n = [sectionItems count];
int i=0,i1=0;

int yy = 4 +i1*74;
int j=0;
for(j=0; j<4;j++){

if (i>=n) break;
Item *item = [sectionItems objectAtIndex:i];

CGRect rect = CGRectMake(18+80*j, yy, 40, 40);
UIButton *button=[[UIButton alloc] initWithFrame:rect];
[button setFrame:rect];
UIImage *buttonImageNormal=[UIImage imageNamed:item.image];
[button setBackgroundImage:buttonImageNormal forState:UIControlStateNormal];
[button setContentMode:UIViewContentModeCenter];

NSString *tagValue = [NSString stringWithFormat:@"%d%d", indexPath.section+1, i];
button.tag = [tagValue intValue];
//NSLog(@"....tag....%d", button.tag);

[button addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
[hlcell.contentView addSubview:button];
[button release];

UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake((80*j)-4, yy+44, 80, 12)] autorelease];
label.text = item.title;
label.textColor = [UIColor blackColor];
label.backgroundColor = [UIColor clearColor];
label.textAlignment = UITextAlignmentCenter;
label.font = [UIFont fontWithName:@"ArialMT" size:12];
[hlcell.contentView addSubview:label];

i1 = i1+1;
return hlcell;

-(IBAction)buttonPressed:(id)sender {
int tagId = [sender tag];
int divNum = 0;
int section = [sender tag]/divNum;
section -=1; // we had incremented at tag assigning time
int itemId = [sender tag]%divNum;

NSLog(@"...section = %d, item = %d", section, itemId);

NSMutableArray *sectionItems = [sections objectAtIndex:section];
Item *item = [sectionItems objectAtIndex:itemId];
NSLog(@"..item pressed.....%@, %@", item.title,;


// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
[super viewDidLoad];


- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;

- (void)dealloc {
[super dealloc];




Step 8: Open the Item.h file and make the following changes:


#import <foundation/Foundation.h>

@interface Item : NSObject {

NSString *title;
NSString *link;
NSString *image;

@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *link;
@property (nonatomic, copy) NSString *image;



Step 9: Now make the changes in the Item.m file:


#import "Item.h"

@implementation Item
@synthesize title, link, image;




Step 10: Now Save it and compile it in the Simulator.

You can Download SourceCode from here Button_Example

Leave a Comment:

ma says May 8, 2011

Thank share!

KingIsulgard says May 18, 2011


Can you please explain what the use of sections do in this particular project?

I notice there are 4 sections, each section containing 12 items, but only 12 items show up on my screen. What happened to the 36 others?

Does a section become a column or something?

    Sushant says May 18, 2011

    I want to give example only GridView. If some one display images in GridView programmatically then they can use this code. if you want to display more images then you can implement it another section.

Kumar says August 4, 2011

How to display multiple images on "grid view" which are downloading from an URL.

I want to replace single "button image" with multiple "thumbnail images" which are downloading from URL

ross says November 17, 2011

Hi, Great tutorial, it has been a great help.

Is there any way I could randomly assign images to the buttons? I am trying to make a random bingo card generator.


Sebastian C says May 16, 2012

How to add fixed location search bar on top, and index A to Z index sidebar on the right hand side ? Also how to change the colour of this default search bar and index bar to another colour?

Wassay says April 18, 2013

I am facing a problem when i click an image and load another view from buttonPressed action the view is loaded and then application crashed

Add Your Reply