• Home
  • About
  • Our Apps
  • Learn
  • Contact
Login

Register

Login
Seemu Apps Seemu Apps
  • Home
  • About
  • Our Apps
  • Learn
  • Contact

How to make a pop up view.

Home ios How to make a pop up view.

How to make a pop up view.

Sep 1, 2016 | Posted by Andrew | ios, swift, tutorial, xcode |

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:

PopuUpAnimation

To start off with we need to setup our storyboard as follows:

  1. Go to the default storyboard and drag a button from the object library onto it, naming it “Show”

Screen Shot 2016-08-15 at 10.07.40 PM

  1. Drag a View Controller onto the storyboard to the right side of the Storyboard
  2. Add a view into the center of this storyboard. Make the background color of it Red.
  3. Select the view you just added, in the bottom right side of the storyboard setup the constraints as follows:

Constraints

 

  1. 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.

Screen Shot 2016-08-15 at 10.14.59 PM

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:

  1. Go FileàNewàFile
  2. Select Cocoa Touch Class
  3. Name it PopUpViewController with a subclass of UIViewControlle. Go next and finish.

createclass

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 assisteditor.

sbshow

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,

actionshowpopup

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

sbclosw

actionclosw

 

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.

DownloadSourceCode

 

Tags: animatedpoppop up viewshowtransparentview
6
Share

About Andrew

Andrew is a 24 year old from Sydney. He loves developing iOS apps and has done so for two years.

You also might be interested in

Swift Protocols Made Easy Tutorial

Sep 18, 2017

Protocol based programming is a difficult concept to initially understand[...]

Tutorial – Transparent UI Navigation Bar

Feb 21, 2016

Making the UINavigation bar transparent & see through is easy[...]

Swift – Model View Controller (MVC) for beginners

Mar 30, 2017

MVC - sometimes also known as "Massive View Controller" is[...]

Welcome

Hi I am Andrew and welcome to Seemu Apps! Have a look around, we provide tutorials for primarily iOS apps.
Bluehost website hosting discount

Seemu’s Studio Setup

Blue Yeti Microphone
Rode Stand
Spider Shock Mount
Mac Keyboard Cover
Screenflow - recording software

Contact Us

We're currently offline. Send us an email and we'll get back to you, asap.

Send Message

Footer

:)

© 2025 · Your Website. Theme by HB-Themes.

  • Home
  • About
  • Our Apps
  • Learn
  • Contact
Prev Next