I’m trying to create a custom blur effect view in my iOS app using Swift. I want the blur effect to cover 100% of the screen width and the full height. However, my current implementation doesn’t fill the entire screen. How can I achieve this?

type here

To make a custom blur effect view cover 100% of the screen width and height, you can create a custom UIVisualEffectView and set up constraints properly. Here’s a step-by-step solution:

CustomVisualEffectView.swift:

import UIKit

final class CustomVisualEffectView: UIVisualEffectView { 
private let theEffect: UIVisualEffect 
private let customIntensity: CGFloat 
private var animator: UIViewPropertyAnimator?

init(effect: UIVisualEffect, intensity: CGFloat) {
    self.theEffect = effect
    self.customIntensity = intensity
    super.init(effect: nil)
    setup()
}

required init?(coder aDecoder: NSCoder) {
    return nil
}

private func setup() {
    animator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [unowned self] in
        self.effect = theEffect
    }
    animator?.fractionComplete = customIntensity
}

override func layoutSubviews() {
    super.layoutSubviews()
    if let superview = superview {
        frame = superview.bounds
    }
}
}

ViewController.swift:

lazy var blurredView: UIView = {
        let containerView = UIView()
        let blurEffect = UIBlurEffect(style: .light)
        let customBlurEffectView = CustomVisualEffectView(effect: blurEffect, intensity: 0.2)
        let dimmedView = UIView()
        dimmedView.backgroundColor = .black.withAlphaComponent(0.6)

        containerView.addSubview(customBlurEffectView)
        containerView.addSubview(dimmedView)

        customBlurEffectView.translatesAutoresizingMaskIntoConstraints = false
        dimmedView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            customBlurEffectView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            customBlurEffectView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            customBlurEffectView.topAnchor.constraint(equalTo: containerView.topAnchor),
            customBlurEffectView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),

            dimmedView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            dimmedView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            dimmedView.topAnchor.constraint(equalTo: containerView.topAnchor),
            dimmedView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
        ])

        return containerView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()
    }

    func setupView() {
        view.addSubview(blurredView)
        
        blurredView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            blurredView.widthAnchor.constraint(equalTo: view.widthAnchor),
            blurredView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            blurredView.topAnchor.constraint(equalTo: view.topAnchor),
            blurredView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        view.sendSubviewToBack(blurredView)
    }

This code ensures that the custom blur effect view covers 100% of the screen width and height. Make sure to adjust the intensity and style of the blur effect as needed.