How to make precise blur

Question

I want Blur to be like the first image.

I made some code and made it as a second image.

My blur code is like

    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
    blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.layer.opacity = 0.8
    blurEffectView.alpha = 0.6
    blurEffectView.frame = CGRectMake(0, 42, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height - 42)
    sourceView.addSubview(blurEffectView)

Sourceview is my background view. Which I want to blur. Any suggestion?

Answer 1

Alpha and layer.opacity corrections are not needed, you can do this also with the extension:

   extension UIImageView{
       func makeBlurImage(imageView:UIImageView?)
       {
          let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
          let blurEffectView = UIVisualEffectView(effect: blurEffect)
          blurEffectView.frame = imageView!.bounds
          blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // to support device rotation
          imageView?.addSubview(blurEffectView)
       }
    }

Using

  let imageView = UIImageView(frame: CGRectMake(0, 100, 300, 400))
  let image:UIImage = UIImage(named: "photo.png")!
  imageView.image =  image
  //Apply blur effect
  imageView.makeBlurImage(imageView)
  self.view.addSubview(imageView)

But if you want to apply the blur effect to UIView, you can use this code:

protocol Blurable
{
    var layer: CALayer { get }
    var subviews: [UIView] { get }
    var frame: CGRect { get }
    var superview: UIView? { get }

    func addSubview(view: UIView)
    func removeFromSuperview()

    func blur(blurRadius blurRadius: CGFloat)
    func unBlur()

    var isBlurred: Bool { get }
}

extension Blurable
{
    func blur(blurRadius blurRadius: CGFloat)
    {
        if self.superview == nil
        {
            return
        }

        UIGraphicsBeginImageContextWithOptions(CGSize(width: frame.width, height: frame.height), false, 1)

        layer.renderInContext(UIGraphicsGetCurrentContext()!)

        let image = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext();

        guard let blur = CIFilter(name: "CIGaussianBlur"),
            this = self as? UIView else
        {
            return
        }

        blur.setValue(CIImage(image: image), forKey: kCIInputImageKey)
        blur.setValue(blurRadius, forKey: kCIInputRadiusKey)

        let ciContext  = CIContext(options: nil)

        let result = blur.valueForKey(kCIOutputImageKey) as! CIImage!

        let boundingRect = CGRect(x:0,
            y: 0,
            width: frame.width,
            height: frame.height)

        let cgImage = ciContext.createCGImage(result, fromRect: boundingRect)

        let filteredImage = UIImage(CGImage: cgImage)

        let blurOverlay = BlurOverlay()
        blurOverlay.frame = boundingRect

        blurOverlay.image = filteredImage
        blurOverlay.contentMode = UIViewContentMode.Left

        if let superview = superview as? UIStackView,
            index = (superview as UIStackView).arrangedSubviews.indexOf(this)
        {
            removeFromSuperview()
            superview.insertArrangedSubview(blurOverlay, atIndex: index)
        }
        else
        {
            blurOverlay.frame.origin = frame.origin

            UIView.transitionFromView(this,
                toView: blurOverlay,
                duration: 0.2,
                options: UIViewAnimationOptions.CurveEaseIn,
                completion: nil)
        }

        objc_setAssociatedObject(this,
            &BlurableKey.blurable,
            blurOverlay,
            objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN)
    }

    func unBlur()
    {
        guard let this = self as? UIView,
            blurOverlay = objc_getAssociatedObject(self as? UIView, &BlurableKey.blurable) as? BlurOverlay else
        {
            return
        }

        if let superview = blurOverlay.superview as? UIStackView,
            index = (blurOverlay.superview as! UIStackView).arrangedSubviews.indexOf(blurOverlay)
        {
            blurOverlay.removeFromSuperview()
            superview.insertArrangedSubview(this, atIndex: index)
        }
        else
        {
            this.frame.origin = blurOverlay.frame.origin

            UIView.transitionFromView(blurOverlay,
                toView: this,
                duration: 0.2,
                options: UIViewAnimationOptions.CurveEaseIn,
                completion: nil)
        }

        objc_setAssociatedObject(this,
            &BlurableKey.blurable,
            nil,
            objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN)
    }

    var isBlurred: Bool
    {
        return objc_getAssociatedObject(self as? UIView, &BlurableKey.blurable) is BlurOverlay
    }
}

extension UIView: Blurable
{
}

class BlurOverlay: UIImageView
{
}

struct BlurableKey
{
    static var blurable = "blurable"
}

Used for example:

segmentedControl.unBlur()
segmentedControl.blur(blurRadius: 2)

This is the source of the Blurable project.

You can find more information in the GitHub project here