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
