Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Adding Views to Your Application

ShmoopiShmoopi Posts: 213Tutorial Authors, Registered Users
edited October 2011 in iPhone SDK Tutorials
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:
fig06.jpg

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!!!
Post edited by Shmoopi on
[SIGPIC][/SIGPIC]<br />
<a href="http://www.shmoopi.net/"; target="_blank">Check Out The Official Shmoopi LLC Website</a><br />
<a href="http://itunes.apple.com/us/app/iprivatebrowser/id314281847?mt=8"; target="_blank">iPrivateBrowser</a> | <a href="http:

Replies

  • Griffin1600Griffin1600 Posts: 5New Users
    edited 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_devdany_dev Posts: 4,696Tutorial Authors, Registered Users @ @ @ @ @
    edited April 2011
    seem that you called a variable sender (maybe you created an istance variable named "sender"? if so change its name)
  • Griffin1600Griffin1600 Posts: 5New Users
    edited 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_devdany_dev Posts: 4,696Tutorial Authors, Registered Users @ @ @ @ @
    edited April 2011
    really weird! the code looks good, try to upload the project somewhere (meaupload, rapidshare, etc...), i will take a look.
  • Griffin1600Griffin1600 Posts: 5New Users
    edited 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
  • ShmoopiShmoopi Posts: 213Tutorial Authors, Registered Users
    edited April 2011
    Did you link the IBAction in Interface Builder?
    [SIGPIC][/SIGPIC]<br />
    <a href="http://www.shmoopi.net/"; target="_blank">Check Out The Official Shmoopi LLC Website</a><br />
    <a href="http://itunes.apple.com/us/app/iprivatebrowser/id314281847?mt=8"; target="_blank">iPrivateBrowser</a> | <a href="http:
  • Griffin1600Griffin1600 Posts: 5New Users
    edited April 2011
    I had linked it, but I removed the link and did it again and now it all works! :D Thank you!
  • rricharrrichar Posts: 141Registered Users @ @
    edited 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.
  • TempPeckTempPeck Posts: 12Registered Users
    edited 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
  • rricharrrichar Posts: 141Registered Users @ @
    edited June 2011
    When I tried to implement this into my project it said option and optionview was undefined. What am I doing wrong.
  • TempPeckTempPeck Posts: 12Registered Users
    edited 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?
  • rricharrrichar Posts: 141Registered Users @ @
    edited 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.
  • Halfie44Halfie44 Posts: 5New Users, Tutorial Authors
    edited 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:
  • aca94aca94 Posts: 19Registered Users
    edited July 2011
    Great tutorial!
    I used it to teach my friend about switching views... :)
    <a href="http://itunes.apple.com/us/app/eye-dots/id449851376?ls=1&mt=8"; target="_blank">[SIGPIC][/SIGPIC]</a> <br />
    Creator of apps <a href="http://itunes.apple.com/us/app/eye-dots/id449851376?ls=1&mt=8"; target="_blank">Eye Dots</a> & <a hre
  • james4026james4026 Posts: 13Registered Users
    edited August 2011
    How would this code need to be modified if you are assigning this to a BarButtonItem rather than a standard button?
  • ShmoopiShmoopi Posts: 213Tutorial Authors, Registered Users
    edited August 2011
    james4026 wrote: »
    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.
    [SIGPIC][/SIGPIC]<br />
    <a href="http://www.shmoopi.net/"; target="_blank">Check Out The Official Shmoopi LLC Website</a><br />
    <a href="http://itunes.apple.com/us/app/iprivatebrowser/id314281847?mt=8"; target="_blank">iPrivateBrowser</a> | <a href="http:
  • minimo88minimo88 Posts: 7New Users
    edited August 2011
    Shmoopi wrote: »
    It doesn't need to be changed any. Just assign the IBAction to the barbutton selector.

    Thanks I had a the same problem,
  • james4026james4026 Posts: 13Registered Users
    edited 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?!?
  • james4026james4026 Posts: 13Registered Users
    edited August 2011
    james4026 wrote: »
    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
  • TengenceTengence Posts: 2New Users
    edited 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 WallisSam Wallis Posts: 2New Users
    edited August 2011
    Shmoopi wrote: »
    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:
    fig06.jpg

    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
  • TengenceTengence Posts: 2New Users
    edited 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?
  • hainhain Posts: 2New Users
    edited October 2011
    Thanks, but don't you need to release the object?

    [OptionsView release];

    I did that and it worked fine.
  • chaosUnseenchaosUnseen Posts: 13New Users
    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.
Sign In or Register to comment.