How to create a Popup Window in iOS using Swift

Today, I’ll show you how to create a popup window and how easily you can use it inside your app.

Creating the Popup Window View

Create a new swift file by right clicking on your project name > New File…

Choose Swift File and press Next

…give the name PopUpWindow and press Create:

Inside the PopUpWindow.swift file, create a UIView private class with a name PopUpWindowView

import UIKit private class PopUpWindowView: UIView { init() { super.init(frame: CGRect.zero) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } }
Code language: Swift (swift)

This UIView will be the semi-transparent black background for our popup window.

In the init(), create an UIView for the window, two UILabel for the title and the message, and an UIButton that close the popup when you press it.

import UIKit private class PopUpWindowView: UIView { let popupView = UIView(frame: CGRect.zero) let popupTitle = UILabel(frame: CGRect.zero) let popupText = UILabel(frame: CGRect.zero) let popupButton = UIButton(frame: CGRect.zero) let BorderWidth: CGFloat = 2.0 init() { super.init(frame: CGRect.zero) // Semi-transparent background backgroundColor = UIColor.black.withAlphaComponent(0.3) // Popup Background popupView.backgroundColor = Color.blue popupView.layer.borderWidth = BorderWidth popupView.layer.masksToBounds = true popupView.layer.borderColor = UIColor.white.cgColor // Popup Title popupTitle.textColor = UIColor.white popupTitle.backgroundColor = UIColor.yellow popupTitle.layer.masksToBounds = true popupTitle.adjustsFontSizeToFitWidth = true popupTitle.clipsToBounds = true popupTitle.font = UIFont.systemFont(ofSize: 23.0, weight: .bold) popupTitle.numberOfLines = 1 popupTitle.textAlignment = .center // Popup Text popupText.textColor = UIColor.white popupText.font = UIFont.systemFont(ofSize: 16.0, weight: .semibold) popupText.numberOfLines = 0 popupText.textAlignment = .center // Popup Button popupButton.setTitleColor(UIColor.white, for: .normal) popupButton.titleLabel?.font = UIFont.systemFont(ofSize: 23.0, weight: .bold) popupButton.backgroundColor = UIColor.yellow popupView.addSubview(popupTitle) popupView.addSubview(popupText) popupView.addSubview(popupButton) // Add the popupView(box) in the PopUpWindowView (semi-transparent background) addSubview(popupView) // PopupView constraints popupView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ popupView.widthAnchor.constraint(equalToConstant: 293), popupView.centerYAnchor.constraint(equalTo: self.centerYAnchor), popupView.centerXAnchor.constraint(equalTo: self.centerXAnchor) ]) // PopupTitle constraints popupTitle.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ popupTitle.leadingAnchor.constraint(equalTo: popupView.leadingAnchor, constant: BorderWidth), popupTitle.trailingAnchor.constraint(equalTo: popupView.trailingAnchor, constant: -BorderWidth), popupTitle.topAnchor.constraint(equalTo: popupView.topAnchor, constant: BorderWidth), popupTitle.heightAnchor.constraint(equalToConstant: 55) ]) // PopupText constraints popupText.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ popupText.heightAnchor.constraint(greaterThanOrEqualToConstant: 67), popupText.topAnchor.constraint(equalTo: popupTitle.bottomAnchor, constant: 8), popupText.leadingAnchor.constraint(equalTo: popupView.leadingAnchor, constant: 15), popupText.trailingAnchor.constraint(equalTo: popupView.trailingAnchor, constant: -15), popupText.bottomAnchor.constraint(equalTo: popupButton.topAnchor, constant: -8) ]) // PopupButton constraints popupButton.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ popupButton.heightAnchor.constraint(equalToConstant: 44), popupButton.leadingAnchor.constraint(equalTo: popupView.leadingAnchor, constant: BorderWidth), popupButton.trailingAnchor.constraint(equalTo: popupView.trailingAnchor, constant: -BorderWidth), popupButton.bottomAnchor.constraint(equalTo: popupView.bottomAnchor, constant: -BorderWidth) ]) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } }
Code language: Swift (swift)

In the same .swift file, create an UIViewController class with a name PopUpWindow

class PopUpWindow: UIViewController { init(title: String, text: String, buttontext: String) { super.init(nibName: nil, bundle: nil) } required init(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } }
Code language: Swift (swift)

Declare a variable of PopUpWindowView() and pass the data from UIViewController‘s init to the popup view.

class PopUpWindow: UIViewController { private let popUpWindowView = PopUpWindowView() init(title: String, text: String, buttontext: String) { super.init(nibName: nil, bundle: nil) modalTransitionStyle = .crossDissolve modalPresentationStyle = .overFullScreen popUpWindowView.popupTitle.text = title popUpWindowView.popupText.text = text popUpWindowView.popupButton.setTitle(buttontext, for: .normal) // ... } required init(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } }
Code language: Swift (swift)

Close the window when you press the button…

class PopUpWindow: UIViewController { private let popUpWindowView = PopUpWindowView() init(title: String, text: String, buttontext: String) { super.init(nibName: nil, bundle: nil) // ... popUpWindowView.popupButton.addTarget(self, action: #selector(dismissView), for: .touchUpInside) // ... } required init(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } @objc func dismissView(){ self.dismiss(animated: true, completion: nil) } }
Code language: Swift (swift)

…and add the popup window UIView to the UIViewController:

class PopUpWindow: UIViewController { private let popUpWindowView = PopUpWindowView() init(title: String, text: String, buttontext: String) { super.init(nibName: nil, bundle: nil) // ... view = popUpWindowView } required init(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } @objc func dismissView(){ self.dismiss(animated: true, completion: nil) } }
Code language: Swift (swift)

Using the Popup Window

Now, every time we want to show the popup window, the only thing we have to do is:

var popUpWindow: PopUpWindow! popUpWindow = PopUpWindow(title: "Error", text: "Sorry, that email address is already used!", buttontext: "OK") self.present(popUpWindow, animated: true, completion: nil)
Code language: Swift (swift)
You can find the final project here

If you have any questionsplease feel free to leave a comment below

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Brett

Should show how to make the text scrollable.