Last updated on: May 27, 2023
Today, I’ll show you how to create a popup window and how easily you can use it inside your app.
Contents
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 questions, please feel free to leave a comment below