GridView using Interface Builder in iPhone – Blancer.com Tutorials and projects

In this example we will see how to GridView implement in the application using Interface Builder. This is the very simple example . So let see how it will worked.

Step 1: Open the Xcode, Create a new project using TabBar application. Give the application “GridView”.

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 five ViewController class in the project. So select the project -> New File -> Cocoa Touch ->ViewController class and give the class name “DetailView”,”LitchiView”,”AppleView”,”OrangeView” and “StarfruitsView”.

Step 4: We need to add images in the resource folder.

Step 5: Open the FirstViewController.h file and define DetailView,LitchiView,AppleView,OrangeView and StarfruitsView class and create an instance of this class. Create an instance of UIButton class and define IBAction: method. So make the following changes:

#import <UIKit/UIKit.h>

@class DetailView;
@class LitchiView;
@class AppleView;
@class OrangeView;
@class StarfruitsView;

@interface FirstViewController : UIViewController {

DetailView *detailView;
LitchiView *litchiView;
AppleView *appleView;
OrangeView *orangeView;
StarfruitsView *starfruitsView;

UIButton *button1;
UIButton *button2;
UIButton *button3;
UIButton *button4;
UIButton *button5;

}

@property(nonatomic,retain) IBOutlet DetailView *detailView;
@property(nonatomic,retain) IBOutlet LitchiView *litchiView;
@property(nonatomic,retain) IBOutlet AppleView *appleView;
@property(nonatomic,retain) IBOutlet OrangeView *orangeView;
@property(nonatomic,retain) IBOutlet StarfruitsView *starfruitsView;

@property(nonatomic,retain) IBOutlet UIButton *button1;
@property(nonatomic,retain) IBOutlet UIButton *button2;
@property(nonatomic,retain) IBOutlet UIButton *button3;
@property(nonatomic,retain) IBOutlet UIButton *button4;
@property(nonatomic,retain) IBOutlet UIButton *button5;

–(IBAction)FirstButton:(id)sender;
–(IBAction)SecondButton:(id)sender;
–(IBAction)ThirdButton:(id)sender;
–(IBAction)ForthButton:(id)sender;
–(IBAction)FifthButton:(id)sender;

@end

Step 6: Double click the FirstView.xib file and open it to the Interface Builder. First drag the navigation bar and give the title “GridView”. Drag the five Round Rect Button and place it to the view window. Select first button and bring up Attribute Inspector select the raspberries.png.Do the same thing other four buttons and select the “litchi.png”,”apple.png”,”orange.png” and “starfruits.png”. Now Connect the File’s Owner icon to the first button and select button1, do the same thing for the other buttons and select button2, button3,button4 and button5. Drag the label from the library and place it below the buttons. Give the label name “Raspberries”,”Litchi”,”Apple”,”Orange” and “Starfruit” (See the figure 1). Now select the Raspberries button and bring up Connection Inspector and connect Touch Up Inside to the File’s Owner icon and select FirstButton. Do the same thing for the other buttons also and select SecondButton: , ThirdButton:, FourthButton: and FifthButton: method. Save the .xib file, close it and go back to the Xcode.

Figure 1

Step 7: In the FirstViewController.m file make the following changes:

#import "FirstViewController.h"
#import "DetailView.h"
#import "LitchiView.h"
#import "AppleView.h"
#import "OrangeView.h"
#import "StarfruitsView.h"

@implementation FirstViewController

@synthesize button1,button2,button3,button4,button5,detailView,litchiView,appleView,orangeView,starfruitsView;

–(IBAction)FirstButton:(id)sender
{
detailView = [[DetailView alloc] initWithNibName:@"DetailView"bundle:nil];
[self.view addSubview:detailView.view];
}

–(IBAction)SecondButton:(id)sender
{
litchiView = [[LitchiView alloc]initWithNibName:@"LitchiView"bundle:nil];
[self.view addSubview:litchiView.view];
}

–(IBAction)ThirdButton:(id)sender
{
appleView = [[AppleView alloc]initWithNibName:@"AppleView"bundle:nil];
[self.view addSubview:appleView.view];

}

–(IBAction)ForthButton:(id)sender
{
orangeView = [[OrangeView alloc]initWithNibName:@"OrangeView"bundle:nil];
[self.view addSubview:orangeView.view];

}

–(IBAction)FifthButton:(id)sender
{
starfruitsView = [[StarfruitsView alloc]initWithNibName:@"StarfruitsView"bundle:nil];
[self.view addSubview:starfruitsView.view];

}

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

– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

– (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
{
[super viewDidUnload];

// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

– (void)dealloc
{
[super dealloc];
}

@end

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

#import <UIKit/UIKit.h>

@class FirstViewController;

@interface DetailView : UIViewController {

FirstViewController *firstViewController;

}

@property(nonatomic,retain) IBOutlet FirstViewController *firstViewController;

–(IBAction)BackButton:(id)sender;

@end

Step 9: Double click the DetailView.xib file and open it to the Interface Builder. First drag the NavigationBar from the library and place it to the view window, drag the ImageView from the library and place it to the View window and drag the RoundRect button and place it into the NavigationBar. Select the Round Rect button and bring up Attributes Inspector select the “backbutton.png” and bring up Connection Inspector and connect Touch Up Inside to the File’s Owner icon and select BackButton: method. Select the ImageView and bring up Attributes Inspector and select the “raspberries-big.png”(See the figure 2). Save it , close it and go back to the Xcode.

Figure 2
Step 10: In the DetailView.m file and make the following changes in the file:

#import "DetailView.h"
#import "FirstViewController.h"

@implementation DetailView

@synthesize firstViewController;

–(IBAction)BackButton:(id)sender
{
firstViewController = [[FirstViewController alloc]initWithNibName:@"FirstView"bundle:nil];
[self.view addSubview:firstViewController.view];
[firstViewController.view release];
}

– (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}

– (void)dealloc
{
[super dealloc];
}

– (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.
}

#pragma mark – View lifecycle

– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}

– (void)viewDidUnload
{
[super viewDidUnload];
}

@end

Step 11: Open the LitchiView.h file and make the following changes:

#import <UIKit/UIKit.h>

@class FirstViewController;

@interface LitchiView : UIViewController {

FirstViewController *firstViewController;

}

@property(nonatomic,retain) IBOutlet FirstViewController *firstViewController;

–(IBAction)BackButton:(id)sender;

@end

Step 12: Double click the LitchiView.xib file and open it to the Interface Builder. First drag the NavigationBar from the library and place it to the view window, drag the ImageView from the library and place it to the View window and drag the RoundRect button and place it into the NavigationBar. Select the Round Rect button and bring up Attributes Inspector select the “backbutton.png” and bring up Connection Inspector and connect Touch Up Inside to the File’s Owner icon and select BackButton: method. Select the ImageView and bring up Attributes Inspector and select the “litchi-big.png”(See the figure 3). Save it , close it and go back to the Xcode.

Figure 3
Step 13: In the LitchiView.m file make the following changes:

#import "LitchiView.h"
#import "FirstViewController.h"

@implementation LitchiView

@synthesize firstViewController;

}

– (void)dealloc
{
[super dealloc];
}

– (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.
}

#pragma mark – View lifecycle

– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}

– (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

@end

Step 14: Open the AppleView.h file and make the following changes:

#import <UIKit/UIKit.h>

@class FirstViewController;

@interface AppleView : UIViewController {

FirstViewController *firstViewController;

}

@property(nonatomic,retain) IBOutlet FirstViewController *firstViewController;

–(IBAction)BackButton:(id)sender;

@end

Step 15: Double click the AppleView.xib file and open it to the Interface Builder. First drag the NavigationBar from the library and place it to the view window, drag the ImageView from the library and place it to the View window and drag the RoundRect button and place it into the NavigationBar. Select the Round Rect button and bring up Attributes Inspector select the “backbutton.png” and bring up Connection Inspector and connect Touch Up Inside to the File’s Owner icon and select BackButton: method. Select the ImageView and bring up Attributes Inspector and select the “litchi-big.png” (See the figure 4). Save it , close it and go back to the Xcode.

Figure 4
Step 16: In the AppleView.m file make the following changes:

#import "AppleView.h"
#import "FirstViewController.h"

@implementation AppleView

@synthesize firstViewController;

}

– (void)dealloc
{
[super dealloc];
}

– (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.
}

#pragma mark – View lifecycle

– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}

– (void)viewDidUnload
{
[super viewDidUnload];
}

@end

Step 17: Open the OrangeView.h file and make the following changes:

#import <UIKit/UIKit.h>

@class FirstViewController;

@interface OrangeView : UIViewController {

FirstViewController *firstViewController;

}

@property(nonatomic,retain) IBOutlet FirstViewController *firstViewController;

–(IBAction)BackButton:(id)sender;

@end

Step 18: Double click the OrangeView.xib file and open it to the Interface Builder. First drag the NavigationBar from the library and place it to the view window, drag the ImageView from the library and place it to the View window and drag the RoundRect button and place it into the NavigationBar. Select the Round Rect button and bring up Attributes Inspector select the “backbutton.png” and bring up Connection Inspector and connect Touch Up Inside to the File’s Owner icon and select BackButton: method. Select the ImageView and bring up Attributes Inspector and select the “litchi-big.png” (See the figure 5). Save it , close it and go back to the Xcode.

Figure 5
Step 19: In the OrangeView.m file make the following changes:

#import "OrangeView.h"
#import "FirstViewController.h"

@implementation OrangeView

@synthesize firstViewController;

}

– (void)dealloc
{
[super dealloc];
}

– (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.
}

#pragma mark – View lifecycle

– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}

– (void)viewDidUnload
{
[super viewDidUnload];
}

@end

Step 20: Open the StarfruitsView.h file and make the following changes:

#import <UIKit/UIKit.h>

@class FirstViewController;

@interface StarfruitsView : UIViewController {

FirstViewController *firstViewController;

}

@property(nonatomic,retain) IBOutlet FirstViewController *firstViewController;
–(IBAction)BackButton:(id)sender;

@end

Step 21: Double click the StarfruitsView.xib file and open it to the Interface Builder. First drag the NavigationBar from the library and place it to the view window, drag the ImageView from the library and place it to the View window and drag the RoundRect button and place it into the NavigationBar. Select the Round Rect button and bring up Attributes Inspector select the “backbutton.png” and bring up Connection Inspector and connect Touch Up Inside to the File’s Owner icon and select BackButton: method. Select the ImageView and bring up Attributes Inspector and select the “litchi-big.png” (See the figure 6). Save it , close it and go back to the Xcode.

Figure 6
Step 22: In the StarfruitsView.m file make the following changes:

#import "StarfruitsView.h"
#import "FirstViewController.h"

@implementation StarfruitsView

@synthesize firstViewController;

– (void)dealloc
{
[super dealloc];
}

– (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.
}

#pragma mark – View lifecycle

– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}

– (void)viewDidUnload
{
[super viewDidUnload];
}

– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

Step 23: Now Compile and run the application on the Simulator.

You can Download SourceCode from here GridView

Leave a Reply