In your iPhone app, you’ll probably be spending most of the time pushing new view controllers to the stack in order to show screen flow. Sometimes, though, you just want to popup a screen for quick display or input.
Here’s a quick demo/tutorial on the different standard modal views offered by iOS, including a simple way of passing generic string data back to the parent view. I’m assuming basic knowledge of iPhone programming, so feel free to skim if you’re comfortable.
First up, create a new Xcode View-Based application. I named mine “ModalViewExample”. Open up the NIB file “ModalViewExampleViewController.xib” and drag four buttons onto the screen as shown.
Now, we’ll begin attaching the buttons created in Interface Builder to our View Controller code. Open “ModalViewExampleViewController.h” and declare your buttons as IBOutlets (Interface Builder Outlets):
1 2 3 4 5 6 7 8 9 | // ModalViewExampleViewController.h @interface ModalViewExampleViewController : UIViewController { UIButton *showDefaultButton, *showFlipButton, *showDissolveButton, *showCurlButton; } @property (nonatomic, retain) IBOutlet UIButton *showDefaultButton, *showFlipButton, *showDissolveButton, *showCurlButton; @end |
Make sure you synthesize the outlets in ModalViewExampleViewController.m, and release them in dealloc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // ModalViewExampleViewController.m #import "ModalViewExampleViewController.h" @implementation ModalViewExampleViewController @synthesize showDefaultButton, showFlipButton, showDissolveButton, showCurlButton; [...] - (void)dealloc { [showDefaultButton release]; [showFlipButton release]; [showDissolveButton release]; [showCurlButton release]; [super dealloc]; } @end |
Ok, so now we have some buttons declared in our class, and some buttons dropped into the interface. At this point, your app has no idea what the relationship is. We’ll set these relationships in Interface Builder.
Switch back to your NIB file, and select “File’s Owner” in the NIB Object Window. Select the Connections Inspector tab, and drag a connection from the hollow point to the Button object in your View. You can see what I mean in the screenshot below. Repeat for the other buttons on the page.
Basically, what we’ve told Xcode to do is relate the code-based objects with the interface objects we created. This allows them to pass messages back and forth.
The next step is to actually assign methods to the click events. Go back to your ModalViewExampleViewController.h file and add these methods:
1 2 3 4 | - (IBAction)showDefault:(id)sender; - (IBAction)showFlip:(id)sender; - (IBAction)showDissolve:(id)sender; - (IBAction)showCurl:(id)sender; |
You’ll also need to implement them in ModalViewExampleViewController.m:
1 2 3 4 5 6 7 8 9 10 11 | - (IBAction)showDefault:(id)sender { } - (IBAction)showFlip:(id)sender { } - (IBAction)showDissolve:(id)sender { } - (IBAction)showCurl:(id)sender { } |
We now have definitions for buttons, and the actions to go with them. To connect them, go to Interface Builder. Select one of your buttons and drag a relationship between the “Touch Up Inside” event in the Connections Inspector and the First Responder in the Object Window. Select the name of the method you created.
After connecting all the buttons to their relative objects and actions, you’ll actually need to make the app do something. This is where we will define a modal view to present to the user.
Add a new UIViewController subclass with XIB to your project. I named mine “SampleViewController”. Open the XIB in Interface Builder and drag a new button onto the screen.
Once you’ve done that, create an IBOutlet for the button and define an action as above.
1 2 3 4 5 6 7 8 9 10 11 | // SampleViewController.h @interface SampleViewController : UIViewController { UIButton *dismissViewButton; } @property (nonatomic, retain) IBOutlet UIButton *dismissViewButton; - (IBAction)dismissView:(id)sender; @end |
Be sure to go to Interface Builder and assign the connections as you did above. Once that’s done, you’ll need to synthesize and release the dismissViewButton object in SampleViewController.m as you did in ModalExampleViewController.m.
Assuming all your connections are in place, it’s time to actually do something with them. Switch to your ModalViewExampleViewController class and replace your previous method definitions with the following code. Also be sure to add #import “SampleViewController.h” to the top of your definition in order to expose SampleView to your class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | - (IBAction)showDefault:(id)sender { SampleViewController *sampleView = [[[SampleViewController alloc] init] autorelease]; [self presentModalViewController:sampleView animated:YES]; } - (IBAction)showFlip:(id)sender { SampleViewController *sampleView = [[[SampleViewController alloc] init] autorelease]; [sampleView setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal]; [self presentModalViewController:sampleView animated:YES]; } - (IBAction)showDissolve:(id)sender { SampleViewController *sampleView = [[[SampleViewController alloc] init] autorelease]; [sampleView setModalTransitionStyle:UIModalTransitionStyleCrossDissolve]; [self presentModalViewController:sampleView animated:YES]; } - (IBAction)showCurl:(id)sender { SampleViewController *sampleView = [[[SampleViewController alloc] init] autorelease]; [sampleView setModalTransitionStyle:UIModalTransitionStylePartialCurl]; [self presentModalViewController:sampleView animated:YES]; } |
Let’s take a very quick look at what we’re doing. First, we define an instance of the new SampleViewController class. We then give it a modal transition style, based on the values found in the UIViewController documentation. Sending it to the front is as easy as using presentModalViewController:animated: Take note that you should probably use the navigation controller to push modal views if you have one. (i.e. [self.navigationController presentModalViewController:animated:]).
To finish up, we’ll need to code a way to dismiss the modal view once it’s presented to the user. Jump to the SampleViewController class and add this code:
1 2 3 | - (IBAction)dismissView:(id)sender { [self dismissModalViewControllerAnimated:YES]; } |
Once that’s in place, build and run the project. You should be able to click through the buttons and check out the range of different modal views iOS has to offer. Note that the page curl only works in iOS 3.2 or greater. If you’re compiling for lower versions, you’ll just get the default slide up animation.
In Part 2, we’ll add a delegate in order to pass values between the modal and non-modal views.
Download the sample project from this tutorial here.
Hi Tim,
Thanks for this tutorial on Modal Views. It’s been very helpful, and I couldn’t find anything else quite like it online.
I’ve got one problem so far: in the ModalViewExampleViewController.xib, when I get to the first connecting of the File’s Owner actions to the buttons displayed in the interface, the buttons aren’t highlighting and letting me connect them. They do not respond at all to my dragging from the connections tab.
Do you have any idea why this would be? Thanks for your time…
Hi Zack
I can’t seem to replicate your problem. I do have some problems sometimes with the Interface Builder… it’s not my favourite application.
Things to check:
* Make sure your IBOutlets and IBActions are defined in the right places
* Make sure you have the correct Interface Builder windows open (I’ve had problems with trying to join to files not affiliated with the project)
* Be sure to drag from the action to the button (you’ll see the blue line appear)
I’d say you may have elements selected that are stopping Interface Builder from detecting the others, so try deselect everything first. Also make sure you have the correct windows open.
I hope somewhere in this you’ll find the solution!
Cheers
Tim
This write up is nice. I’ll post in my blog and translate it in French.
I want to express my gratitude for you writing this. I was able to implement this and understand it well enough to implement it in the future. Thank u very much.
very good tutorial! much appreciated keep it up
Pingback: Complete list of transitions you can do between views on iPhone/ iPad | Technical support, Computer, programming issue, issue tracking, quality assurance
Pingback: Complete list of transitions you can do between views on iPhone/ iPad
Pingback: iPhone is there a way to set the type of animation when going from one view to another? - Programmers Goodies
Hi Tim,
Great tutorial, I am trying to flip between 2 image views horizontally after the first flip the coming image already shows in the background how do I get rid of this?
There is a great Tutorial for the german Community!
http://bedifferently.wordpress.com/2011/10/31/xcode-4-tutorial-modal-view-controllers/
Have fun !
thank you :)
This is awesome, thank you.
A million thanks. I have at least two days finding the way to set a text in “view controller one” with a value set in “view controller two” and nobody could give an answer as accurate as this post. This blog is now in my list of favorites.
Finally a tutorial that works! …One thing : in Xcode Version 4.2 no need to release memory! :)
You misspelled “model” as “modal” throughout. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller Modal means something different in UI Design: http://en.wikipedia.org/wiki/Modal_window
Pingback: In-App Settings Page - VIP Forum - HOME
Thanks you for this very nice & easy introduction to modal view stuff.
That design pattern is a must.
Thank you for example! :-)
Pingback: Flip view like now playing in iTunes? | PHP Developer Resource
Reply to Alex:
He didn’t misspell “model”. It’s supposed to be modal.
Read your own link:
In user interface design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.
According to the wiki you linked, it doesn’t necessary have to be a dialog box. If you were to use this code for the iPad you would see it used more commonly as dialog boxes, unless you specify that the presentation mode is full screen.
Great !!
all stuff is so good , really got a help form this..thank you
What if we want to do this with storyboards? How we change if we have storyboards? Thank you.
what if we are using storyboards? how it changes the code?
Thank you.
How can i ever thank you for this. You just saved tje day. I’m very new to iOS development and we need an app ASAP so i started coding directly as there is no time to learn. This tutorial has answered a lot of questions i had.
Thank you very much.
I have two views..i am able to load new view using presentmodalview.But the Navigation Bar of the first view remains there.so now i can see two nav bars one of the first view and one of the new view…what should be done so that the navigation bar of the first view disappears?Please help
Thanks.
Hey, with iOS 6 coming out you should dismiss the view with [self dismissViewControllerAnimated:YES completion:nil]; This way you won’t get any “deprecated” warnings.
Great…
Hi .. anyone know how to implement something like a viewController no full screen just like when we tap in search in the iPhone ?
I want that when the user make an swipe up a viewController be showed.
Thanks in advance
awesome tutorial, simple and direct, just as i needed
i’ve got my eyes on you from now on :D