Tutorial for creating a pop-up screen using Swift 3 (IOS)

In this tutorial we are going to learn how to create a pop up screen on clicking a button, we see in many applications a pop up coming up with some message and it feels so dynamic about the app to have such a great interface where all the warning , messages and steps can be shown to the user using a pop up screen

-Consider example,
There is a viewcontroller named HomeVC and you have a button named Popup on it, and on pressing this button you should get a popup screen showing some message or screen

-Now 1st thing to do is create a new ViewController and a class file as popupVC and link them, once linked now you can wite the code of the new ViewController in the class file
-Now you go to Identity inspector and name the Storyboard ID as “popup”

-now this the actual pop up that is going to appear on your screen
-Now go back to the prevoius page at which your button is present through which you are going to call the popup screen
-now add the ACTION outlet of the button which is used to call the popup screen over the current screen

-Now all you have todo is copy paste the following code in the button action::

let storyboard = UIStoryboard(name: “name_of_the_storyboard”, bundle: nil)
let vc = storyboard.instantiateViewController(withIdentifier: “popup”) as! popupVC
vc.modalPresentationStyle = .overFullScreen
vc.modalTransitionStyle = .crossDissolve
self.present(vc, animated: true, completion: nil)

-Once you have written this code your popup screen will called from the HomeVC




-NOW VISUAL CHANGES IN THE POPUP SCREEN,
add a view that will be your popup in the screen and under that view you can write and show contents that are required in the popup screen
once this is done all you need to do is to click outside the view in the mainView and set the background to grey color and decrease the opacity to 25%
after this all you need to do is to go to the popup view and change the background colour to light grey and change the opacity of the view to 80%

YOU ARE ALL SET NOW DO THIS AND ADD A BUTTON IN THE VIEW TO DISMISS THE VIEW
you can do more modifications to the View like adding Shadow and making it more attractive to do this all you have do is to add a outlet of view(popup view) as popupview and add the following code in your ViewDidLoad()

popupview.layer.cornerRadius = 15
popupview.layer.shadowColor = UIColor.black.cgColor
popupview.layer.shadowOffset = CGSize(width: 0, height: 10)
popupview.layer.shadowOpacity = 0.9
popupview.layer.shadowRadius = 5

Swift 3 Pop-up IOS

Image Courtesy:

Figures: google.com/images


Written and submitted by: Niket Singh

Leave a Reply

Your email address will not be published. Required fields are marked *