Adding Views to Your Application

Shmoopi · April 2011

Hey Everyone! Today I'm going to show you how to add another ViewController and View to your application. Adding additional views is a key concept that many iPhone developers have trouble grasping. This tutorial will show you how to add as many views to your application as you like, simply and easily without hassle. So let's get started!

The first step to adding a view to your application is adding the viewcontroller files and the xib. In Xcode, click on File, New File, UIView Controller Subclass under the Cocoa Touch Class Tab. You can name your view files whatever you'd like, I named mine Options. It should look like this:

Next, you're going to open up your MainViewController.h file (Or whatever View Controller header file you want to add the view to) in your project and add this line:

- (IBAction)SwitchView:(id)sender;

The name doesn't necessarily have to be SwitchView, you can name that whatever you want. This will add a button action to interface builder with which you can switch your views.

After you've edited the .h file it should look like this:

//  MainViewController.h
//  Adding Views
//
//  Created by Shmoopi on 04/10/11.
//  Copyright Shmoopi LLC 2011. All rights reserved.
//

#import 

@class MainViewController;

@interface MainViewController : UIViewController {
}
- (IBAction)SwitchView:(id)sender;

@end

When the .h file looks good, you're going to go into your MainViewController.m file (Or whatever View Controller main file you want to add the view to) in your project, and add these lines:

#import Options.h
//After @implementation
-(IBAction)SwitchView:(id)sender {
Options *OptionsView = [[Options alloc] initWithNibName:nil bundle:nil];
[self presentModalViewController:OptionsView animated:YES];
}

Note that if you want the new view to be animated, put YES and if not then put NO. What this code does is import the new view controller header file to your MainViewController.m file and put an action to the previously defined IBAction that we put in the .h file.

Your .m file should look like this when you're done:

#import \"Options.h\"

@implementation MainViewController

-(IBAction)SwitchView:(id)sender {
Options *OptionsView = [[Options alloc] initWithNibName:nil bundle:nil];
[self presentModalViewController:OptionsView animated:YES];
}

Now that you've added the appropriate code to your MainViewController, the ViewController that is going to open the new view, you need to create a button and link it to the IBAction(SwitchView) in Interface Builder or the equivalent in XCode 4. This step should be pretty self explanatory, but I'll explain it, add a button to your MainView.xib in interface builder, name the button, "Next View", next right click the button and click-drag from touch down to the view box in interface Builder or Xcode 4 and link it with SwitchViews.

Now you can click build and run your project to see that when you click the button, the new view opens up!!! Just one more step though, and you're good to go.

Open up the Options.h file in your project (Or whatever you named your new viewcontroller.h file) and add this line:

-(IBAction)back:(id)sender;

this line creates a new interface builder option to go back to the main view

It should look like this:

//  Options.h
//  Adding Views
//
//  Created by Shmoopi on 04/10/11.
//  Copyright Shmoopi LLC 2011. All rights reserved.
//

#import 

@class Options;

@interface Options : UIViewController {
}
- (IBAction)back:(id)sender;

@end

When the .h file looks good, you're going to go into your Options.m file (Or whatever View Controller main file you want to add the view to) in your project, and add these last three lines:

-(IBAction)back:(id)sender {
[self dismissModalViewControllerAnimated:YES];
}

Note that you can always dismiss the view without animations by changing the YES to a NO in the above code. What this code does is add an Action to the previously defined IBAction that we put in the header file. All this does is dismiss the View to go back to the main view.

The last step is to go into Interface Builder and add the button, naming it "back" (or whatever you like) and link it to the IBAction like we did two steps above.

And you're finished!!!!! You can go build and run your project, opening and closing your new view to your heart's desire! This method works with any amount of views you want to add to your application. Simple, fast, and easy.

Thanks for reading my tutorial on Adding Views to Your Application, I hope it helps. If you have any questions, comments, or concerns, please let me know. Thanks!!!

Griffin1600 · April 2011

Probably a stupid question, but I have just started developing and when I tried to add a second IBAction to switch to a different view I got the error: Redefinition of parameter 'sender'.

This is where it is giving the error:

-(IBAction)SwitchView1:(id)sender {

The code I used for the first IBAction is the same as yours.

I have looked around, but can't find a way to do this.

Please help

dany_dev · April 2011

seem that you called a variable sender (maybe you created an istance variable named "sender"? if so change its name)

Griffin1600 · April 2011

I can't find any variables named sender, I searched through all my code with the 'find' function in xcode and the only times sender was in the code was in actions and methods. Here are the file I am working with.

VectorViewController.h:

#import <UIKit/UIKit.h>

@class VectorViewController;

@interface VectorViewController : UIViewController {
    
}

- (IBAction)SwitchView:(id)sender;
- (IBAction)SwitchView1:(id)sender;

@end

and VectorViewController.m:

#import \"VectorViewController.h\"
#import \"GlueSettings.h\"
#import \"TrimAndScrape.h\"

@implementation VectorViewController

-(IBAction)SwitchView:(id)sender {
    GlueSettings *GlueSettingsView = [[GlueSettings alloc] initWithNibName:nil bundle:nil];
    [self presentModalViewController:GlueSettingsView animated:YES];
}

-(IBAction)SwitchView1:(id)sender {
    TrimAndScrape *TrimAndScrapeView = [[TrimAndScrape alloc] initWithNibName:nil bundle:nil];
    [self presentModalViewController:TrimAndScrapeView animated:YES];
}


- (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

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

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

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

@end

dany_dev · April 2011

really weird! the code looks good, try to upload the project somewhere (meaupload, rapidshare, etc...), i will take a look.

Griffin1600 · April 2011

Okay so I tried to build the project again just now, even though it still had the error and the error mysteriously dissapeared :confused: which is good, but I am now confused. Must have been some weird xcode glitch. Thanks for your help anyway :D

EDIT: It ran, but as the second button I made didn't work. I am uploading the project to megaupload now.

EDIT2: Here is the link to the project: http://www.megaupload.com/?d=5OJKQVR0

Shmoopi · April 2011

Did you link the IBAction in Interface Builder?

Griffin1600 · April 2011

I had linked it, but I removed the link and did it again and now it all works! :D Thank you!

rrichar · May 2011

for a newbie the first thread is kind confusing. If you have two view, one called view1 and one called view2 how would you modify the code in the first thread.

TempPeck · May 2011

I had to link the code to the button a different way in Interface Builder as what you described didn't work for me. Other than that great tutorial. Thanks dude

rrichar · June 2011

When I tried to implement this into my project it said option and optionview was undefined. What am I doing wrong.

TempPeck · June 2011

I got it to work fine but then i tried to link the back button to the original page using:

Calc *OptionsView = [[Calc alloc] initWithNibName:nil bundle:nil];
[self presentModalViewController:OptionsView animated:YES];

instead of:

[self dismissModalViewControllerAnimated:YES];

Calc is the name of the original startup page and I have #import ed both .h files. It compiles fine. The 1st page links to the 2nd page but when I click on the 2nd page it all disappears.

I wanted to use this code instead of the original back code so I could link to multiple pages.

Any suggestions?

rrichar · June 2011

There is another way of doing this. PM me and I will send you the link of the tutorial I used. I also updated my blog on how to switch views.

Halfie44 · July 2011

tutorial is fricking sweet:)
massive thumbs up!
done it in one.
ticked off switching views from my to learn list.

wishing there was a way i could rep you, couldnt find one so :cool:

aca94 · July 2011

Great tutorial!
I used it to teach my friend about switching views... :)

james4026 · August 2011

How would this code need to be modified if you are assigning this to a BarButtonItem rather than a standard button?

Shmoopi · August 2011

james4026;361750 said:
How would this code need to be modified if you are assigning this to a BarButtonItem rather than a standard button?

It doesn't need to be changed any. Just assign the IBAction to the barbutton selector.

minimo88 · August 2011

Shmoopi;362048 said:
It doesn't need to be changed any. Just assign the IBAction to the barbutton selector.

Thanks I had a the same problem,

james4026 · August 2011

I've used the code that you provided and made the necessary changes but every time I click the bar button item it kills the app with no error messages. I've imported the .h file of the view I'm trying to switch to.

Here is what I coded in my .m file.
-(IBAction)SwitchView:(id)sender {
SpecialsFilter *specialsFilter = [[SpecialsFilter alloc] initWithNibName:nil bundle:nil];
[self presentModalViewController:specialsFilter animated:YES];
}

It is giving me a warning that the 'local declaration of specialsFilter hides instance variable' in the code: [self presentModalViewController:specialsFilter animated:YES];

Any ideas?!?

james4026 · August 2011

james4026;362416 said:
I've used the code that you provided and made the necessary changes but every time I click the bar button item it kills the app with no error messages. I've imported the .h file of the view I'm trying to switch to.

Here is what I coded in my .m file.
-(IBAction)SwitchView:(id)sender {
SpecialsFilter *specialsFilter = [[SpecialsFilter alloc] initWithNibName:nil bundle:nil];
[self presentModalViewController:specialsFilter animated:YES];
}

It is giving me a warning that the 'local declaration of specialsFilter hides instance variable' in the code: [self presentModalViewController:specialsFilter animated:YES];

Any ideas?!?

So the above was because I was using specialsFilter as an IBOutlet elsewhere so I used a different name, however now it crashes and provides me with the following error:

[UIGestureRecognizerTarget objectAtIndex:]: unrecognized selector sent to instance 0x7eb0660
2011-08-07 14:20:11.605 DSM NightOut[28127:15503] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UIGestureRecognizerTarget objectAtIndex:]: unrecognized selector sent to instance 0x7eb0660'
*** First throw call stack:
(0x12f8142 0x1486ca7 0x12f9ddd 0x125ef5f 0x125ed42 0x4677 0x77bddd 0x77c519 0x76801e 0x7767af 0x721e74 0x12f9f62 0x4a91085 0x4a9aeb7 0x4a21985 0x4a23884 0x4a22f5e 0x12ccb2e 0x12636e0 0x122f386 0x122ec44 0x122eb5b 0x19b6fdf 0x19b70a4 0x6e3ab6 0x1e74 0x1e05 0x1)
terminate called throwing an exception

Tengence · August 2011

Really excellent tutorial by the way to start. I am developing a table view app where the table displays one list of insects then the next view is a table of plants specific to the users selection. When the user selects a plant in cell in the second table I want view to go to a view specific to the plant like a jpg or some text for ex. I have the first 2 views working but have yet to figure out how to get the third coded in correctly. Any help would be great.

Thanks in advance
Jason

Sam Wallis · August 2011

Shmoopi;321984 said:
Hey Everyone! Today I'm going to show you how to add another ViewController and View to your application. Adding additional views is a key concept that many iPhone developers have trouble grasping. This tutorial will show you how to add as many views to your application as you like, simply and easily without hassle. So let's get started!

The first step to adding a view to your application is adding the viewcontroller files and the xib. In Xcode, click on File, New File, UIView Controller Subclass under the Cocoa Touch Class Tab. You can name your view files whatever you'd like, I named mine Options. It should look like this:

Next, you're going to open up your MainViewController.h file (Or whatever View Controller header file you want to add the view to) in your project and add this line:
- (IBAction)SwitchView:(id)sender;
The name doesn't necessarily have to be SwitchView, you can name that whatever you want. This will add a button action to interface builder with which you can switch your views.

After you've edited the .h file it should look like this:
//  MainViewController.h
//  Adding Views
//
//  Created by Shmoopi on 04/10/11.
//  Copyright Shmoopi LLC 2011. All rights reserved.
//

#import 

@class MainViewController;

@interface MainViewController : UIViewController {
}
- (IBAction)SwitchView:(id)sender;

@end
When the .h file looks good, you're going to go into your MainViewController.m file (Or whatever View Controller main file you want to add the view to) in your project, and add these lines:
#import Options.h
//After @implementation
-(IBAction)SwitchView:(id)sender {
Options *OptionsView = [[Options alloc] initWithNibName:nil bundle:nil];
[self presentModalViewController:OptionsView animated:YES];
}
Note that if you want the new view to be animated, put YES and if not then put NO. What this code does is import the new view controller header file to your MainViewController.m file and put an action to the previously defined IBAction that we put in the .h file.

Your .m file should look like this when you're done:
#import \"Options.h\"

@implementation MainViewController

-(IBAction)SwitchView:(id)sender {
Options *OptionsView = [[Options alloc] initWithNibName:nil bundle:nil];
[self presentModalViewController:OptionsView animated:YES];
}
Now that you've added the appropriate code to your MainViewController, the ViewController that is going to open the new view, you need to create a button and link it to the IBAction(SwitchView) in Interface Builder or the equivalent in XCode 4. This step should be pretty self explanatory, but I'll explain it, add a button to your MainView.xib in interface builder, name the button, "Next View", next right click the button and click-drag from touch down to the view box in interface Builder or Xcode 4 and link it with SwitchViews.

Now you can click build and run your project to see that when you click the button, the new view opens up!!! Just one more step though, and you're good to go.

Open up the Options.h file in your project (Or whatever you named your new viewcontroller.h file) and add this line:
-(IBAction)back:(id)sender;
this line creates a new interface builder option to go back to the main view

It should look like this:
//  Options.h
//  Adding Views
//
//  Created by Shmoopi on 04/10/11.
//  Copyright Shmoopi LLC 2011. All rights reserved.
//

#import 

@class Options;

@interface Options : UIViewController {
}
- (IBAction)back:(id)sender;

@end
When the .h file looks good, you're going to go into your Options.m file (Or whatever View Controller main file you want to add the view to) in your project, and add these last three lines:
-(IBAction)back:(id)sender {
[self dismissModalViewControllerAnimated:YES];
}
Note that you can always dismiss the view without animations by changing the YES to a NO in the above code. What this code does is add an Action to the previously defined IBAction that we put in the header file. All this does is dismiss the View to go back to the main view.

The last step is to go into Interface Builder and add the button, naming it "back" (or whatever you like) and link it to the IBAction like we did two steps above.

And you're finished!!!!! You can go build and run your project, opening and closing your new view to your heart's desire! This method works with any amount of views you want to add to your application. Simple, fast, and easy.

Thanks for reading my tutorial on Adding Views to Your Application, I hope it helps. If you have any questions, comments, or concerns, please let me know. Thanks!!!

Great tutorial helped allot Cheers

Tengence · August 2011

Can you make a IBAction to respond to a row selected? Like push to the next view for an image or some similiar object?

hain · October 2011

Thanks, but don't you need to release the object?

[OptionsView release];

I did that and it worked fine.

chaosUnseen · August 2012

Just FYI Shmoopi as you might already know that presentModalViewController:xxxxx animated:xxx and dismissModalViewController animated:xxx are being deprecated in iOS 6 per working in the dev preview 4.5 -- I don't know when a good time to edit your original tutorial would be as iOS 6 isn't coming for a bit, just thought I'd let newcomers know.

Howdy, Stranger!

Forums

Adding Views to Your Application

Replies