popup13

One of the most popular posts in my blog is the tutorial for creating a Pop-up window with iOS SDK using Objective-C. Since then many readers reached me out asking for a Swift version of the Pop-up. In general the process is exactly the same in Swift (except the language used to write the code of course…), so I am not going to dive into the process of creating the .xib files again. For this you can always refer to the original post.

The Pop-up controller is a subclass of UIViewController with a couple of methods for the fade in and fade out animations.

override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.6)
        self.popUpView.layer.cornerRadius = 5
        self.popUpView.layer.shadowOpacity = 0.8
        self.popUpView.layer.shadowOffset = CGSizeMake(0.0, 0.0)
    }
    
    func showInView(aView: UIView!, withImage image : UIImage!, withMessage message: String!, animated: Bool)
    {
        aView.addSubview(self.view)
        logoImg!.image = image
        messageLabel!.text = message
        if animated
        {
            self.showAnimate()
        }
    }
    
    func showAnimate()
    {
        self.view.transform = CGAffineTransformMakeScale(1.3, 1.3)
        self.view.alpha = 0.0;
        UIView.animateWithDuration(0.25, animations: {
            self.view.alpha = 1.0
            self.view.transform = CGAffineTransformMakeScale(1.0, 1.0)
        });
    }
    
    func removeAnimate()
    {
        UIView.animateWithDuration(0.25, animations: {
            self.view.transform = CGAffineTransformMakeScale(1.3, 1.3)
            self.view.alpha = 0.0;
            }, completion:{(finished : Bool)  in
                if (finished)
                {
                    self.view.removeFromSuperview()
                }
        });
    }
    
    @IBAction func closePopup(sender: AnyObject) {
        self.removeAnimate()
    }

In the viewDidLoad method, I styled the PopUp with rounded corners. You can customize that for square corners or other shadow styles. Note that in Swift we have to implement also the required init(coder aDecoder: NSCoder) and as we’ve created the UI in interface builder using .XIBs the override init(nibName nibNameOrNil: String!, bundle nibBundleOrNil: NSBundle!) method has to be added too. Add these two methods and we are almost done:

required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init(nibName nibNameOrNil: String!, bundle nibBundleOrNil: NSBundle!) {
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
    }

Now that the PopUp is implemented, we have to call it from the view where we want to display it.

self.popViewController = PopUpViewControllerSwift(nibName: "PopUpViewController", bundle: nil)
self.popViewController.title = "This is a popup view"
self.popViewController.showInView(self.view, withImage: UIImage(named: "typpzDemo"), withMessage: "You just triggered a great popup window", animated: true)

A fully working example alongside with the Objective-C and Swift code for the PopUp is available on Github. Feel free to use it in your projects and if you find any issue or glitch, do not hesitate to open an issue on Github.

A video version of the tutorial is provided by Webucator.