Touch Code Magazine

One of the most popular articles on Touch Code Magazine is the one demoing my MTPopupWindow class. It was a class I put quickly together to showcase how you can create a cool animation and kind of – animate in a popup window on the screen. Much to my surprise a lot of comments came in and people started using the class and also started sending me questions and demands for more functionality. (Yes I reply all the mail coming from Touch Code Magazine – despite whether I can help the person or not)

With the release of iOS6 I thought that MTPopupWindow is a perfect showcase and a great opportunity to use the new Auto-Layout feature of iOS. Coincidentally this is also the most requested feature for the class – being able to handle both Portrait and Landscape orientations.

So, yes – there’s a new – version 2.0 of the class and it’s ready for download (at the bottom of this article)

NB: The new version of MTPopupWindow is only iOS6 compatible, because it uses the latest features of iOS.

But before we come to the download link, let me showcase what you can do with the new class.

How to show a popup window

First step – you will need to add the QuartzCore.framework to your Xcode project:

1. Click on the Xcode project file
2. Make sure your active target is selected
3. Click on the “Build Phases” tab
4. Click the (+) button and select QuartzCore.framework from the list

Done!

Now in your Objective-C source file add at the top an include to the MTPopupWindow class, like this:

#import "MTPopupWindow.h"

And there you go! Just as before you can add an HTML file to your Xcode project and show it in a modal window with one line:

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

In fact the method name remains the same, so you can just “upgrade” the version of MTPopupWindow without changing the code of your app. What this method does is to load the file “info.html” and show the modal window in the view, which you pass. (the example code is supposed to run in a view controller – so self.view usually points to the current view on the screen)

You still get the same neat animation as with version one:

Featuring Auto-Layout

Unlike version one – the current version is fully Auto-layout capable. Meaning the popup window has the proper constraints defined, so when you rotate the device you will still get a nice maximized window:

The MTPopupWindow draws all graphics by using QuartzCore and therefore does not use any fixed size image files – Portrait, Landscape, Retina or non-Retina, it’s all the same. The window is drawn perfectly.

Also the window just grows in height to fill in the iPhone5 4inch display nicely:

Custom sized windows

Many people requested a popup window, which fits in different sizes of view controllers. Many of the readers wanted to use the popup window in a tab controller, navigation controller or their own custom view controllers.

That is now as well possible – you just tell the popup which is its parent view and it takes care itself to maximize itself into that view:

//full screen window
[MTPopupWindow showWindowWithHTMLFile:@"info.html"];
 
//inside the current view controller (can be tab controller as on the image above)
[MTPopupWindow showWindowWithHTMLFile:@"info.html" insideView:self.view];

Full control over the object

You have now the possibility to use your own workflow instead of the predefined one-shot methods. You can go about creating the view in the usual manner, like so:

MTPopupWindow* winPop = [[MTPopupWindow alloc] init];
winPop.fileName = @"info.html";
[winPop showInView:self.view];

Advanced HTML content

In the new version of MTPopupWindow you can use images and links even in your local HTML files!

It’s really easy, if you want to have an image in your HTML file, just add the image to your XCode project and then load it using an IMG tag.

Add the image like so:

And then just use normal HTML in your file:

<img src="bundle_books_cover_noprice.jpg">

And voila, the image pops up in your popup window:

But that’s not all! You can also link to other HTML files in your XCode project! How cool is that? Very

Just use normal HTML links and make your popup window content interactive, like so:

<a href="more.html">More testimonials</a>

When the user taps the link above the file more.html will be loaded in your popup. Awesome!

Full control of the components

Since MTPopupWindow inherits directly UIView you can tweak all properties you like to. Also MTPopupWindow has one extra property called webView and it’s the web view of the popup window – you can directly access and control it as well. Sweet!

Here’s for example how to change the background of the popup window if you have a yellow background of your HTML file:

MTPopupWindow* winPop = [MTPopupWindow showWindowWithHTMLFile:@"info.html" insideView:self.view];
winPop.backgroundColor = [UIColor yellowColor];

Loading web content from Internet

And finally what better way to have an up to date company information inside your app, but loading it straight from the Internet? Instead of HTML file name you can just pass in a web site URL and the popup window will show it:

[MTPopupWindow showWindowWithHTMLFile:@"http://www.ios5-by-tutorials.com" insideView:self.view];

Web pages scale to fit by default.

Download link

This time I decided to upload the code to GitHub as it seems it becomes more and more popular for this kind of code sharing. So head up and download the demo project, which also includes the MTPopupWindow class here:

https://github.com/icanzilb/MTPopupWindow

I hope this article was useful, download class code and use it as will. You can include it in commercial apps, attribution is appreciated, but not required.

Where to go from here?

Of course give the MTPopupWindow a try in one of your projects.

Also if you want to learn more about the iOS6 technology that makes MTPopupWindow so flexible – Auto-Layout – you can read on it in detail in the two chapters dedicated to Auto-Layout in “iOS6 by Tutorials.”

Cheers, Marin

  ·