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