Modal View Controller Example – Part 2

In the first part of this tutorial, we set up a pair of simple views in Interface Builder that we switched between modally. In this tutorial, we’ll make them somewhat useful and pass data between them using delegates.

The concept of protocols and delegates is an important and somewhat complex one, but I like to think of it in these simplified terms:

Basically, the object that implements our protocol agrees to implement the methods of that protocol. In the case of this tutorial, we’ll be connecting the modal view with our main view using a delegate.

Firstly, we’ll create the interface elements for our project. Open the ModalViewExampleViewController XIB file and create a button and a label as shown.

Next, add those interface elements to ModalViewExampleViewController.h. We’re also adding the necessary IBAction also:

Be sure to include the necessary additions to ModalViewExampleViewController.m:

Jump to Interface Builder and be sure to link the new elements with the properties we defined. Refer to Part 1 of this tutorial for a guide on how to do that.

The next step is key. We will create a basic protocol and then assign a delegate. Open up ModalViewExampleViewController.h and add this:

We then tell ModalViewExampleViewController to implement this protocol:

We also need to add the protocol’s method to the main implementation:

Once we have these in place, the next step is to set up a reference between the two views. What we will do is define a delegate inside of SampleView so that we can send messages to it.
Include the protocol in ModalViewExampleViewController.h and add the reference:

Be sure to synthesize the delegate in SampleViewController.m, and include the necessary header files.

So far we have defined a protocol inside of our parent view, and defined a delegate in our modal view. The next step is to link them together and make them useful.
Firstly, we’ll write the functions that will handle the messages. Replace the original definition of didReceiveMessage with this:

And also add the following code to showWithDelegate:

What we’ve done is create a SampleView object and assigned its delegate to be the parent view. That is, the parent view will be handling messages sent by SampleView.
Open up SampleViewController.m and add the code to send the message.

Compile the app and run it. You should be able to see the text “Hello World” passed from one view to another once you dismiss your modal view with delegate. You can extend this any way you like with additional controls on the modal view, such as sliders or text input.

Download the source code for this project here.

Modal View Controller Example – Part 1

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):

Make sure you synthesize the outlets in ModalViewExampleViewController.m, and release them in dealloc

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:

You’ll also need to implement them in ModalViewExampleViewController.m:

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.

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.

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:

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.