UIVisualEffectView not working

Question

I'm trying to add a blur effect to my view using the following code :

let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
    visualEffectView.frame = containerView.bounds
    containerView.addSubview(visualEffectView)
    containerView.userInteractionEnabled = true
    containerView.bringSubviewToFront(visualEffectView)
    visualEffectView.alpha = 1.0

However, I do not see any changes.

UPDATE

My apologies, but I don't think I made my intentions clear in the original question. What I want to achieve is something like this :

My view holds a UIImageView which fills the whole screen. Next, on the bottom of the screen, I have a container which is a UIView which holds some buttons etc. What I want to do is add a blur effect to the containerView, so that the UIImageView behind it is blurred, where the containerView is. So basically I set my containerView's alpha to 0.5, which means its semi transparent and I can see the image behind it. What I want to do now is for that image behind the containerView to be blurred.

CURRENT EFF :

CODE :

extension UIButton{

func setImage(image: UIImage?, inFrame frame: CGRect?, forState state: UIControlState){
    self.setImage(image, forState: state)

    if let frame = frame{
        self.imageEdgeInsets = UIEdgeInsets(
            top: frame.minY - self.frame.minY,
            left: frame.minX - self.frame.minX,
            bottom: self.frame.maxY - frame.maxY,
            right: self.frame.maxX - frame.maxX
        )
    }
}

}



class SingleImageFeedView: UIViewController {

lazy var mainImageView : UIImageView = {
    let imageView = UIImageView()
    imageView.frame = CGRectMake(0, 0, self.view.frame.width, self.view.frame.width * 1.3)
    imageView.contentMode = UIViewContentMode.ScaleAspectFill
    imageView.backgroundColor = UIColor.clearColor()
    imageView.image = UIImage(named: "pizza")
    return imageView
}()

let containerView : UIView = {
    let this = UIView(frame: CGRectMake(0,0, 600,150))
    this.backgroundColor = UIColor.clearColor()
    this.layer.cornerRadius = 5
    this.layer.borderColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 1.0).CGColor
    this.layer.borderWidth = 0.5
    return this
}()


let captionAndProfileImageContainerView : UIView = {
    let this = UIView()
    //this.backgroundColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 0.0)
    this.backgroundColor = UIColor.clearColor()
    return this
}()

let profilePicImageView : UIImageView = {
    let imageView = UIImageView()
    imageView.frame = CGRectMake(0, 0, 53, 53)
    imageView.backgroundColor = UIColor.clearColor()
    imageView.image = UIImage(named: "pizza")
    imageView.contentMode = UIViewContentMode.ScaleToFill
    return imageView
}()

let captionTextView: UITextView = {
    let textField = UITextView(frame: CGRectMake(0,0, 150, 100))
    textField.textColor = UIColor.whiteColor()
    textField.editable = false
    textField.text = "dwwdwwwwdwddwd"
    textField.backgroundColor = UIColor.clearColor()
    textField.font = UIFont.systemFontOfSize(12.0)
    return textField
}()

let dividerLineView: UIView = {
    let view = UIView()
    view.backgroundColor = UIColor(white: 0.5, alpha: 0.5)
    return view
}()

let commentAndLikesContainerView : UIView = {
   let view = UIView()
    //view.backgroundColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 0.0)
    view.backgroundColor = UIColor.clearColor()
    return view
}()

let commentLabel : UILabel = {
    let label = UILabel()
    label.text = "23"
    return label
}()

let likesLabel : UILabel = {
    let label = UILabel()
    label.text = "25"
    return label
}()

let voteUpButton : UIButton = {
    let button = UIButton(frame: CGRectMake(0,0,25,25))
    button.setImage((scaleImage((UIImage(named: "upvote"))!, toSize: CGSizeMake(25, 25))), inFrame: CGRectMake(0,0,25,25), forState: .Normal)
    button.imageView?.contentMode = UIViewContentMode.Center
    button.imageView?.clipsToBounds = true
    button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
    return button
}()

let voteDownButton : UIButton = {
    let button = UIButton(frame: CGRectMake(0,0,25,25))
    button.setImage((scaleImage((UIImage(named: "upvote"))!, toSize: CGSizeMake(25, 25))), inFrame: CGRectMake(0,0,25,25), forState: .Normal)
    button.imageView?.transform = CGAffineTransformMakeRotation((180.0 * CGFloat(M_PI)) / 180.0)
    button.imageView?.contentMode = UIViewContentMode.Center
    button.imageEdgeInsets = UIEdgeInsetsMake(6, 10, 10, 10)
    button.imageView?.clipsToBounds = true
    return button
}()


let commentButton : UIButton = {
    let button = UIButton(frame: CGRectMake(0,0,25,25))
    button.setImage((scaleImage((UIImage(named: "comment_feed_icon"))!, toSize: CGSizeMake(25, 25))), inFrame: CGRectMake(0,0,25,25), forState: .Normal)
    button.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
    button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
    button.imageView?.clipsToBounds = true
    return button
}()

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = UIColor.clearColor()
    setupViews()
}

func setupViews() {
    self.captionAndProfileImageContainerView.addSubview(profilePicImageView)
    self.captionAndProfileImageContainerView.addSubview(captionTextView)

    self.commentAndLikesContainerView.addSubview(voteUpButton)
    self.commentAndLikesContainerView.addSubview(voteDownButton)
    self.commentAndLikesContainerView.addSubview(commentButton)
    self.commentAndLikesContainerView.addSubview(commentLabel)
    self.commentAndLikesContainerView.addSubview(likesLabel)

    self.containerView.addSubview(captionAndProfileImageContainerView)
    self.containerView.addSubview(dividerLineView)
    self.containerView.addSubview(commentAndLikesContainerView)




    self.view.addSubview(containerView)
    self.view.bringSubviewToFront(containerView)
    self.view.addSubview(mainImageView)
    self.containerView.bringSubviewToFront(captionAndProfileImageContainerView)
    self.containerView.bringSubviewToFront(dividerLineView)
    self.containerView.bringSubviewToFront(commentAndLikesContainerView)


    profilePicImageView.translatesAutoresizingMaskIntoConstraints = false
    captionTextView.translatesAutoresizingMaskIntoConstraints = false
    voteDownButton.translatesAutoresizingMaskIntoConstraints = false
    containerView.translatesAutoresizingMaskIntoConstraints = false
    voteUpButton.translatesAutoresizingMaskIntoConstraints = false
    commentLabel.translatesAutoresizingMaskIntoConstraints = false
    commentButton.translatesAutoresizingMaskIntoConstraints = false
    commentAndLikesContainerView.translatesAutoresizingMaskIntoConstraints = false
    captionAndProfileImageContainerView.translatesAutoresizingMaskIntoConstraints = false
    likesLabel.translatesAutoresizingMaskIntoConstraints = false
    dividerLineView.translatesAutoresizingMaskIntoConstraints = false
    mainImageView.translatesAutoresizingMaskIntoConstraints = false


    //main imageview constraints
    self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 35))
    self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .Leading, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .Trailing, relatedBy: .Equal, toItem: self.view, attribute: .Trailing, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .CenterX, relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0))
    self.view.sendSubviewToBack(mainImageView)


    //containerview constraints

    self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: -10))
    self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Leading, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1, constant: 10))
    self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Trailing, relatedBy: .Equal, toItem: self.view, attribute: .Trailing, multiplier: 1, constant: -10))
    self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: -160))

    //caption and profilepic constraints

    self.view.addConstraint(NSLayoutConstraint(item: captionAndProfileImageContainerView, attribute: .Top, relatedBy: .Equal, toItem: containerView, attribute: .Top, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: captionAndProfileImageContainerView, attribute: .Leading, relatedBy: .Equal, toItem: containerView, attribute: .Leading, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: captionAndProfileImageContainerView, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: captionAndProfileImageContainerView, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1, constant: -50))

    self.view.addConstraintsWithFormat("H:|-8-[v0(50)]", views: profilePicImageView)
    self.view.addConstraintsWithFormat("V:|-35-[v0(50)]", views: profilePicImageView)
    profilePicImageView.layer.cornerRadius = 25
    profilePicImageView.layer.masksToBounds = true



    self.view.addConstraint(NSLayoutConstraint(item: captionTextView, attribute: .Top, relatedBy: .Equal, toItem: captionAndProfileImageContainerView, attribute: .Top, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: captionTextView, attribute: .Leading, relatedBy: .Equal, toItem: profilePicImageView, attribute: .Trailing, multiplier: 1, constant: 10))
    self.view.addConstraint(NSLayoutConstraint(item: captionTextView, attribute: .Trailing, relatedBy: .Equal, toItem: captionAndProfileImageContainerView, attribute: .Trailing, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: captionTextView, attribute: .Bottom, relatedBy: .Equal, toItem: captionAndProfileImageContainerView, attribute: .Bottom, multiplier: 1, constant: 0))

    //likes and comments and divider


    self.view.addConstraint(NSLayoutConstraint(item: commentAndLikesContainerView, attribute: .Top, relatedBy: .Equal, toItem: captionAndProfileImageContainerView, attribute: .Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: commentAndLikesContainerView, attribute: .Leading, relatedBy: .Equal, toItem: containerView, attribute: .Leading, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: commentAndLikesContainerView, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: commentAndLikesContainerView, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1, constant: 0))


    self.view.addConstraint(NSLayoutConstraint(item: voteUpButton, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: voteUpButton, attribute: .Leading, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Leading, multiplier: 1, constant: 10))


    self.view.addConstraint(NSLayoutConstraint(item: likesLabel, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 10))
    self.view.addConstraint(NSLayoutConstraint(item: likesLabel, attribute: .Leading, relatedBy: .Equal, toItem: voteUpButton, attribute: .Trailing, multiplier: 1, constant: 10))

    self.view.addConstraint(NSLayoutConstraint(item: voteDownButton, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: voteDownButton, attribute: .Leading, relatedBy: .Equal, toItem: likesLabel, attribute: .Trailing, multiplier: 1, constant: 10))

    self.view.addConstraint(NSLayoutConstraint(item: commentButton, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: commentButton, attribute: .Leading, relatedBy: .Equal, toItem: voteDownButton, attribute: .Trailing, multiplier: 1, constant: 30))

    self.view.addConstraint(NSLayoutConstraint(item: commentLabel, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 10))
    self.view.addConstraint(NSLayoutConstraint(item: commentLabel, attribute: .Leading, relatedBy: .Equal, toItem: commentButton, attribute: .Trailing, multiplier: 1, constant: 10))



    if !UIAccessibilityIsReduceTransparencyEnabled() {
        self.containerView.backgroundColor = UIColor.clearColor()

        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        //always fill the view
        blurEffectView.frame = containerView.bounds
        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]

        self.containerView.insertSubview(blurEffectView, atIndex: 1) //if you have more UIViews, use an insertSubview API to place it where needed


    }
    else {
        self.view.backgroundColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 0.5)
    }



    containerView.clipsToBounds = true

}


}

Answer 1

I made a simple project with a UIImageView and and a container. Applying the blur to the container blurred the underneath photo. The containers background is set to transparent in storyboard.

class ViewController: UIViewController {
override func viewDidLoad() {
    super.viewDidLoad()

    let containerView : UIView = {
        let this = UIView(frame: CGRectMake(100,200, 200,200))
        this.backgroundColor = UIColor.clearColor()
        this.layer.cornerRadius = 5
        this.layer.borderColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 1.0).CGColor
        this.layer.borderWidth = 0.5
        return this
    }()

    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))

    visualEffectView.frame = containerView.bounds

    self.view.addSubview(containerView)
    containerView.insertSubview(visualEffectView, atIndex: 0)
    let secondImg = UIImageView(image: UIImage(named: "swift_tut.png"))

    secondImg.frame = CGRectMake(150,250, 200,200)

    self.view.addSubview(secondImg)
    self.view.bringSubviewToFront(containerView)





    // Do any additional setup after loading the view, typically from a nib.
}

Answer 2

Try This Code , working for me

 if !UIAccessibilityIsReduceTransparencyEnabled() {
         self.view.backgroundColor = UIColor.clearColor()

        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        //always fill the view
        blurEffectView.frame = self.view.bounds
        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]

        self.view.insertSubview(blurEffectView, atIndex: 1) //if you have more UIViews, use an insertSubview API to place it where needed


    }
    else {
        self.view.backgroundColor = UIColor.blackColor()
    }