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.