How to make a pop up view.
Using this method you can easily create a nice looking animated pop up view in your next XCode Swift App. The image below shows what you will be able do by the end of this tutorial:
To start off with we need to setup our storyboard as follows:
- Go to the default storyboard and drag a button from the object library onto it, naming it “Show”
- Drag a View Controller onto the storyboard to the right side of the Storyboard
- Add a view into the center of this storyboard. Make the background color of it Red.
- Select the view you just added, in the bottom right side of the storyboard setup the constraints as follows:
- Drag a Label (“This is a pop up”) and Button (“Close”) on to the view, yours should look something like the following. Note we have changed the color of our label and button to red.
Good work, now we have setup our storyboard we just need to connect it up to our View Controllers to start coding!
To do this first of all we need to setup a new class for the popup view we just added to the storyboard as follows:
- Go FileàNewàFile
- Select Cocoa Touch Class
- Name it PopUpViewController with a subclass of UIViewControlle. Go next and finish.
Now we just need to connect our Show and Close pop up buttons to our code to when we click on them it will show and hide the pop up.
To do this go to the storyboard, select the show button then click on the assistant editor .
With the control button pressed in drag the button to the code and drop it in, change the connection to action and name it showPopUpp,
Then once the showPopUp function is created add the following code in:
@IBAction func showPopup(_ sender: AnyObject) { let popOverVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "sbPopUpID") as! PopUpViewController self.addChildViewController(popOverVC) popOverVC.view.frame = self.view.frame self.view.addSubview(popOverVC.view) popOverVC.didMove(toParentViewController: self) }
Now we have done this repeat the same steps for the close button, except we connect it up to the PopUpViewController class with the action named closePopUp
And in this function add the following code
self.view.removeFromSuperview()
Now run and test your popup.
Horray we have a popup working now!
But it isn’t animated L. Lucky that is easy for us to fix!
To make it animated add the following code to the PopUpViewController.swift class.
func showAnimate() { self.view.transform = CGAffineTransform(scaleX: 1.3, y: 1.3) self.view.alpha = 0.0; UIView.animate(withDuration: 0.25, animations: { self.view.alpha = 1.0 self.view.transform = CGAffineTransform(scaleX: 1.0, y: 1.0) }); } func removeAnimate() { UIView.animate(withDuration: 0.25, animations: { self.view.transform = CGAffineTransform(scaleX: 1.3, y: 1.3) self.view.alpha = 0.0; }, completion:{(finished : Bool) in if (finished) { self.view.removeFromSuperview() } }); }
And finally in the viewDidLoad function in this class also add the following:
self.showAnimate()
Then in the closePopUp change it to be the following
@IBAction func closePopUp(sender: AnyObject) { self.removeAnimate() //self.view.removeFromSuperview() }
Now run the app and try the pop up again it will be animated! If you wish to change the speed and style of the animation have a play around with the showAnimate and hideAnimate functions.