-10

I am trying to add a popup alert to my iOS app similar to this one which is available across all Apple applications, is this available in the built-in library of Swift? Or how can I implement it in a reusable way without using SwiftUI?

The popup alert should also automatically fades away once showed up.

enter image description here

zs2020
  • 53,766
  • 29
  • 154
  • 219
  • May I suggest starting with the [Components](https://developer.apple.com/design/human-interface-guidelines/components/all-components) section of Apple's [HIG documentation](https://developer.apple.com/design/human-interface-guidelines). – HangarRash Mar 21 '23 at 23:09
  • Have a look at Presentation Controller and Animated Transitioning her: https://stackoverflow.com/a/48730050/23028 – catlan Mar 25 '23 at 09:09

1 Answers1

2

Few informations are missing in the question, how do you want the popup to be, full screen or just an alert at the middle of the screen? What will be the content of the popup? Also if you have checked built in UIAlertController or not? and many more...

So I have created the most simplest code snippet for showing/hiding alert with fade in out animation in iOS with UIKit and Swift. You can play around with the code to make it work as per your need.

extension UIView {
func showPopup() {
    // create main background view which will cover the whole screen
    let backgroundView = UIView()
    backgroundView.backgroundColor = .black.withAlphaComponent(0.4)
    backgroundView.alpha = 0
    backgroundView.translatesAutoresizingMaskIntoConstraints = false
    
    self.addSubview(backgroundView)
    NSLayoutConstraint.activate([
        backgroundView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        backgroundView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
        backgroundView.topAnchor.constraint(equalTo: self.topAnchor),
        backgroundView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
    ])
    
    // create centre view which will be the popup
    let centreView = UIView()
    centreView.backgroundColor = .black.withAlphaComponent(0.6)
    centreView.layer.cornerRadius = 8.0
    centreView.clipsToBounds = true
    centreView.translatesAutoresizingMaskIntoConstraints = false

    backgroundView.addSubview(centreView)
    NSLayoutConstraint.activate([
        centreView.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor),
        centreView.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor),
        centreView.heightAnchor.constraint(equalToConstant: 300.0),
        centreView.widthAnchor.constraint(equalToConstant: 300.0)
    ])
    
    // create label which will be inside the popup
    let popupLabel = UILabel()
    popupLabel.textColor = .white
    popupLabel.textAlignment = .center
    popupLabel.text = "Build Succeeded"
    popupLabel.translatesAutoresizingMaskIntoConstraints = false

    centreView.addSubview(popupLabel)
    NSLayoutConstraint.activate([
        popupLabel.centerYAnchor.constraint(equalTo: centreView.centerYAnchor),
        popupLabel.leadingAnchor.constraint(equalTo: centreView.leadingAnchor, constant: 20.0),
        popupLabel.trailingAnchor.constraint(equalTo: centreView.trailingAnchor, constant: -20.0)
    ])
    
    // animate the popup to show
    UIView.animate(withDuration: 0.7) {
        backgroundView.alpha = 1
        // animate the popup to hide after certain time
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            UIView.animate(withDuration: 0.7) {
                backgroundView.alpha = 0
            }
        }
    }
}
}

Here I am showing an alert on the ViewController's view which is currently visible. So I created an extension of UIView which can be used from your view's class itself. I am triggering this method on tap of a button from your existing ViewController.

Usage:

@IBAction func buttonTapped(_ sender: UIButton) {
    self.view.showPopup()
}

Here self is your ViewController and inside extension self is your ViewController's main superView. Hope it helps.

enter image description here

Also if you want to use built in UIAlertController, then just replace self.view.showPopup() with the below code, it'll work. Ref:

let alert = UIAlertController(title: "My Alert", message: "This is an alert.", preferredStyle: .alert) 
alert.addAction(UIAlertAction(title: NSLocalizedString("OK", comment: "Default action"), style: .default, handler: { _ in 
    NSLog("The \"OK\" alert occured.")
}))
self.present(alert, animated: true, completion: nil)
Arnab
  • 4,216
  • 2
  • 28
  • 50