Copy / Reproduce UIAlertView blur effect

355 views Asked by At

I'm trying to insert tableview inside custom alertView. And I need to achieve the same style as default alert. From Debug View Hierarchy I almost copied the style but I can not figure out how Apple set blur effect. My custom alert View hierarchy here

I was trying to programmatically insert blur view but result too dark, too white or on the same transparency

    let blur = UIVisualEffectView(effect: UIBlurEffect(style: .all of them))
    blur.frame = self.alertView.frame
    blur.isUserInteractionEnabled = false
    self.view.insertSubview(blur, at: 1)
2

There are 2 answers

0
Abhishek Jain On

Try this code -

let blur = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
blur.frame = view.frame
blur.alpha = 0.5
blur.isUserInteractionEnabled = false
self.view.insertSubview(blur, at: 1)

Hope this helps!

0
iwasrobbed On

They have a few different dialogs, but something like this is a good starting point:

/// Composite view of blur + vibrancy + white bg color blending
/// which recreates the Apple alert dialog effect
lazy var dialogView: UIVisualEffectView = {
    let blur = UIBlurEffect(style: .regular)
    let blurView = UIVisualEffectView(effect: blur)
    let vibrancy = UIVibrancyEffect(blurEffect: blur)
    let vibrantView = UIVisualEffectView(effect: blurView.effect)
    vibrantView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    blurView.contentView.addSubview(vibrantView)
    blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    blurView.layer.cornerRadius = 20
    blurView.layer.masksToBounds = true
    let blendView = UIView()
    blendView.backgroundColor = .white
    blendView.alpha = 0.5
    blendView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    blurView.contentView.addSubview(blendView)
    return blurView
}()

Then just add it to your view and constraint w/ autolayout.