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.

popup-xib

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.

 

Tagged on: , , , ,

21 thoughts on “iOS SDK: Create a Pop Up window

  1. tina

    Hi I used your code to create a popup window but I’m encountering a EXC_BAD_ACCESS error whenever I try to close the popup… Can you suggest a solution? Thanks!

    1. Nikos M. Post author

      @tina you get this probably because the popup view gets released. Are you declaring it a s a property (like in my example) or you do declare it within your button code. Declare it a strong property like in my example in Github. You can refer to this twitter discussion for a further issue.

      1. tina

        Hi Nikos, thanks for your reply. I got it working by following your suggestion of setting the popup as a strong property. Great job btw! Yours is the best popup window I’ve seen so far because of the animation and how I can customize the view :)

  2. dee

    Hi , your blog help me a lot , thanks.
    But in this post , i used your code to create a popup view , but the popup view didn’t have rounded corners.Why?

    1. Nikos M. Post author

      @dee this is because a small change Apple did in iOS 7.1 sdk. In this code
      self.view.backgroundColor=[[UIColor blackColor] colorWithAlphaComponent:.6];
      self.popUpView.layer.cornerRadius = 5;
      self.popUpView.layer.shadowOpacity = 0.8;
      self.popUpView.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
      add one more line:

      self.popUpView.clipsToBounds = YES;

      1. dee

        There’s no problem with the code. Hey , Nikos M , can you give me a hint how to test this popup view controller? Thank you very much.

  3. Shawn

    Hi Nikos,

    Thank you for this wonderful popup, I used some of your code for my app and I’ve put your name on the credit list. :)

    Will send you the link when the app is on Appstore.

  4. Robert

    Great code! One question: the popupView does not resize when I use it in a 3.5 inch device.
    What do I still need to set? I turned off Autolayout and use Autosizing settings in Interface Builder…

    1. Nikos M. Post author

      @Robert the popupView uses Autolayout constraints to fit various displays sizes so you should leave Autolayout on for the popupView (and use the constraints I use in the sample app if you don’t use the .xib included in the tutorial).

    1. Nikos M. Post author

      @Anuj: You can download the project from github to see a complete working example with code for the “Show” button. If you do not want the Swift version I’ve recently added, download release version 1.0 of the code which is Objective-C only.

  5. MAKSumon

    I ran your project it was working good, but when I implemented this on my project, it shows up well but app crashed on closing the popup view, with EXC_BAD_ACCESS error. Would you please, help me solve the mystery?

    Thanks

        1. Hedieh

          Hi Nikos,
          Wonderful code :) I’ve imported POPUpViewController.h and .m and also POPUpViewController_ipad.xib and POPUpViewController.xib into my project. I made the popupview as a strong property in PopUpViewController.h
          I still get the error of EXC_BAD_ACCESS error when I close the popup. How can I fix this issue?

          1. Nikos M. Post author

            Hi Hedieh,

            You have to declare the PopUpViewController as a strong property in your view controller where you are calling it. Not declare the popup view as strong in the PopUpViewController.h file I provide. If you have further issues feel free to open an issue on Github and I will check it.

  6. padma

    hi nikos,
    i have developed my application xcode 6 + ios 7 the pop up working well in devise. But when i run the app in simulator, popup not working as well as when i run the application in iphone 6 device (ios 8) its not working. Kindly help me on this

    1. Nikos M. Post author

      @Padma, I’ve tested it on both iPhone 6 (iOS 8.1) and iphone 5/5s (iOS 8.1) and it works fine (both the Swift and Obj-C version). If you keep having issues, open an issue on github and post the error you are getting, so I can assist you there.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">