How to create Popup view in iOS using AutoLayout and Swift with animation.

Welcome to this new Tutorial,

Aim:- Creating a popup view just feel like floating over any screen using Autolayout and Swift with animation.

Result:- After following this tutorial successfully you will easily create a popup view using Autolayout and Swift, which will look like this.

Let's start:-

1. Create xCode project.
2.Open your Main.storyboard file, and drag-drop a button in it.
3.Create IBAction of that button to your view controller file.
4.Popup view configuration

- The popup view will have gray background color and close button

Replace your view controller with this code:

       

//
//  ViewController.swift
//  CustomPopupView
//
//  Created by Zaid Pathan on 20/04/15.
//  Copyright (c) 2015 ZaidPathan. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

 var grayBackgroundView = UIView()
 var popupView:PopupView?
 var popupViewDic:[String:PopupView] = [:]
 
 var constX:NSLayoutConstraint?
 var constY:NSLayoutConstraint?
 
 override func viewDidLoad() {
  super.viewDidLoad()
 }
 

 override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()
 }
 
 func showPopupView(){
  
  //Show GrayView Behind popup view
  self.showGrayBGView(self, grayView: grayBackgroundView)
  
  //Load nib, and get reference to variable 'popupView'.
  popupView = NSBundle.mainBundle().loadNibNamed("PopupView", owner: self, options: nil)[0] as? PopupView
  self.view.addSubview(popupView!)
  
  //Configure popupview
  popupView?.frame.size = CGSizeMake(0, 0)
  popupView?.center = self.view.center
  popupView?.alpha = 0.5
  popupView?.clipsToBounds = false
  
  
  //Autolayout part
  popupViewDic["popupView"] = popupView
  
  var dView:[String:UIView] = [:]
  dView["popupView"] = popupView
  
  popupView?.setTranslatesAutoresizingMaskIntoConstraints(false)
  
  var h_Pin = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(36)-[popupView]-(36)-|", options: nil, metrics: nil, views: dView)
  self.view.addConstraints(h_Pin)
  
  var v_Pin = NSLayoutConstraint.constraintsWithVisualFormat("V:|-(36)-[popupView]-(36)-|", options: nil, metrics: nil, views: dView)
  self.view.addConstraints(v_Pin)
  
  constY = NSLayoutConstraint(item: popupView!, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)
  self.view.addConstraint(constY!)
  
  
  constX = NSLayoutConstraint(item: popupView!, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
  self.view.addConstraint(constX!)
  
  UIView.animateWithDuration(1.0, delay: 0.0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.50, options: UIViewAnimationOptions.LayoutSubviews, animations: { () -> Void in
   self.popupView?.alpha = 1
   self.view.layoutIfNeeded()
   }) { (value:Bool) -> Void in
    
  }
  
 }

 
 //Gray bg view configuration
 func showGrayBGView(viewController:UIViewController,grayView:UIView){
  
  var viewController:UIViewController = viewController
  var GrayView:UIView = grayView
  
  viewController.view.addSubview(GrayView)
  
  var dView:[String:UIView] = [:]
  dView["GrayView"] = GrayView
  
  GrayView.frame = viewController.view.frame
  GrayView.backgroundColor = UIColor.clearColor()
  GrayView.setTranslatesAutoresizingMaskIntoConstraints(false)
  UIView.animateWithDuration(0.5, animations: {
   GrayView.backgroundColor = UIColor.blackColor()
   GrayView.alpha = 0.75
  })
  
  var h_Pin = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(-16)-[GrayView]-(-16)-|", options: nil, metrics: nil, views: dView)
  viewController.view.addConstraints(h_Pin)
  
  var v_Pin = NSLayoutConstraint.constraintsWithVisualFormat("V:|-(-16)-[GrayView]-(-16)-|", options: nil, metrics: nil, views: dView)
  viewController.view.addConstraints(v_Pin)
  
 }
 
 func hidePopupView(){
  
  UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.50, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in
   
   self.grayBackgroundView.alpha = 0
   self.popupView!.alpha = 0
   
   }) { (value:Bool) -> Void in
    self.popupView!.removeFromSuperview()
    self.grayBackgroundView.removeFromSuperview()
    
  }
  
 }
 
 
 @IBAction func IBActionShowPopupView(sender: UIButton) {
  self.showPopupView()
 }
 
 
 @IBAction func IBActionClose(sender: UIButton) {
  
  hidePopupView()
  
 }
}



       
 

5.Connect your button with IBActionShowPopupView.
6.Create a UIView subclass and a xib with that subclass.
7.Give FileOwner name as ViewController.
8.Add button to popupview and connect that to IBActionClose in ViewController.
9.Run app
10. Press on button you added in ViewController.

Wow!
You will see popup view will appear when pressing button.

11.Now click on button you added in popup xib,
Wow!
It disappeared.

Download sample project here: Download