iOS SDK: Create a Pop Up window

iOS - Pop Up window

iOS – Popup window

In an iOS project I am currently working on, I was requested to create a pop-up window. Trying to figure out how to do it, I came up with a solution that is pretty easy to implement and very straight forward. All you need is a view controller with a transparent background and a subview (your popup window). After creating the popUpViewController, you can just call it from any other view controller.

Lets see the implementation in depth. First we create a new objective-c class with .xib file. In the header file (.h), add the following code (we need the QuarzCore framework in the project to style the window with rounded corners and shadows):

After that edit the .xib file so it looks like the one in the image below.


Interface Builder view of the popup window.

Now connect the popUpView outlet to the view in the .xib file (the view highlighted int he above image). Next, open the .m file of your class and add the following lines in your viewDidLoad method, so the background view of the window looks transparent:

Note that we set the backgroundColor alpha and not the view alpha because the popup window is a subview of the background view and we do not want it to look transparent too. In the viewDidLoad method we also set the shadow of the window and the cornerRadius (in order to get rounded corners).

Finally lets implement the code that does the trick with pop up fade in and fade out:

The showAnimate method scales the view to 1.3 (130%) of its current size, sets the alpha to 0 and then invokes an animation block with a duration of 0.25 sec that scales the view down to its original size and sets the alpha to 1. The removeAnimate method does exactly the opposite and implements also a completion handler for the animation block, so we know when to remove it from its superview.

Finally we need the IBAction for the close button, so the removeAnimate method is called and the implementation for the showInView method that we declared in our .h file in order to show our popup window on top of other views. The code here is self-explanatory:

Connect the IBAction to the “Close” button you’ve added in your .xib and you are done. The output will look like this:

Popup demonstration

Popup demonstration


The code is available on Github alongside with a simple view that demonstrates how this popup can be invoked from other view controllers. A new post regarding the Swift implementation of the PopUp is also available here.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s