Touch Code Magazine

Few days ago I remembered Ray mentioned almost a year ago he liked the content popup window in the just released (back then) Pimpy application, and he thought it’d be a cool tutorial for Touch Code Magazine if I wrote how to implement it. I forgot for a long time about this conversation, but it came again to me last week.

So in this article I’m going to talk about:

• why use a Popup Window (Modal window) over using another UIViewController
• the mechanics I use to make a visually appealing popup window
• give you a download of a standalone Objective-C class you can use in your projects

Why use a Popup Window?

Going from one UIViewController to another, for example when you use a navigation controller pattern in your app, tells the user he’s going to another screen, to another task – he expects to do and see something new. If you use a popup window on the other hand to present some content it looks to the user only like a little detour, but still remaining in the general area where he or she is at that moment.

I often use a popup window to show:

• terms & conditions, manuals or any “additional information” to the screen the user is currently seeing
• show content from Internet

Another benefit is that your controller’s view won’t be released if you hit a Memory Warning; opposed to presenting another controller, when if you have a warning the not-visible controllers’ views will be released (that’s in case there’s something you need to hold on in your views)

The mechanics behind showing the popup window

Since there’s no UIKit class for showing a popup window, you can just have a UIView which looks like a little window. To make this window modal you’d also want to have a transparent or semi- transparent view covering the screen behind your popup window (so the user can’t interact with the UI behind the popup).

Now- just showing a view on the screen isn’t that nice is it? So a transition is really nice to have: I use flip from right/left to show my popups and it looks really nice.

Let’s have a look at part of my code (also included in the download project below):

bgView = [[[UIView alloc] initWithFrame: sview.bounds] autorelease];
[sview addSubview: bgView];
 
//faux view
UIView* fauxView = [[[UIView alloc] initWithFrame: CGRectMake(10, 10, 200, 200)] autorelease];
[bgView addSubview: fauxView];
 
//the new panel
bigPanelView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, bgView.frame.size.width, bgView.frame.size.height)] autorelease];
bigPanelView.center = CGPointMake( bgView.frame.size.width/2, bgView.frame.size.height/2);
 
[ … Here add the window contents inside bigPanelView …]
 
//animation options
UIViewAnimationOptions options =
UIViewAnimationOptionTransitionFlipFromRight |
UIViewAnimationOptionAllowUserInteraction    |
UIViewAnimationOptionBeginFromCurrentState;
 
//run the animation
[UIView transitionFromView:fauxView toView:bigPanelView duration:0.5 options:options completion: ^(BOOL finished) {
[ … some completion event handler … ]
}];

Look at how I first add a bgView, which takes up the whole screen (actually the bounds of the superview sview); then I add a view called fauxView – this one has absolutely no visual role, it just has to be in the view hierarchy, so the actual content (inside bigPanelView) can flip around from this empty view. This way it looks like the popup window flips around out of the nothing – very cool trick I actually haven’t seen this in another application

There’s one thing to mention about [UIView transitionFromView: toView: …… ]. This method basically flips around one view to another. What you need to know though is that it automatically adds the second view (the “to view”) to the view hierarchy, and at the same time removes the first view (the “from view”) from the view hierarchy.

So, in the code above both first and second views are autoreleased – thus when the transitions finishes the fauxView is removed and deallocated automatically, and the bigPanelView is retained by its superview.

So let’s see how things work:

1. add a background container
2. add an empty view inside
3. create the content view (the popup window), but don’t add to the view hierarchy
4. flip around the empty view into the content view

Let’s see all this in action!

MTPopupWindow – a standalone class to present popup windows

MTPopupWindow is a very simple free to use class, which gives you the ability to show HTML content with just one line of code. It implements the flip in and flip out transitions I just spoke about and here it is how it looks like:

To use the class download the XCode project below and inside you’ll find a folder called MTPopupWindow – copy this folder inside your project

Include the class:

#import "MTPopupWindow.h"

To open a popup window showing an HTML file from your app’s bundle:

[MTPopupWindow showWindowWithHTMLFile:@"testContent.html" insideView:self.view];

(self is a UIViewController instance, since presumably this is called in an IBAction inside a view controller)
To open a popup window showing a web page:

[MTPopupWindow showWindowWithHTMLFile:@"http://www.underplot.com" insideView:self.view];

Where to go from here?

If you need to just show some HTML content – just copy over the MTPopupWindow group and use as described above. If you need to do something fancier inside your popup window – you’re welcome to read trough the very short class code and extend it as you wish.

MTPopupWindow demo project download.

I use this technique of presenting modal content for more than a year now – both in Doodle Booth and Pimpy and it really saves me bulk creating controllers, when I don’t really need them. Hope this was useful to you and if so please do leave me a comment and share it with your friends and colleagues.

Marin

  ·