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

}


}

Doesn't treat a subject. You can using SnapKit for adding constraint programmatically - it more easy ;D — Savchenko Dmitry, Jun 16 '16 at 15:59

Haligen · Answer 1 · 2016-06-16T16:19:55.890

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.
}

edited Jun 16 '16 at 16:19

answered Jun 16 '16 at 14:13

Haligen

231
1
7

The only thing is containerView is a uiview not an imageview, not sure if that makes a difference – Alk Jun 16 '16 at 14:15
Guys, please check my edit, I provided some more info, if I add this to the containerView, the whole thing becomes gray, I think I need to somehow create another view behind it in the same exact position and add it to that instead, I'm not sure – Alk Jun 16 '16 at 15:07
I posted a picture of the problem I am having on my device – Alk Jun 16 '16 at 15:38
1

Make sure both your container view, and the associated view controllers background are set to clear. I was able to replicate your issue by modifying the background colors on either the container or the view controller. – Haligen Jun 16 '16 at 15:42
I added the whole code to the question, I set all possible background colors to `clearColor()` that I could find, please do have a look, maybe you will find something that I missed – Alk Jun 16 '16 at 15:51
Make sure you're bring the container view back to the front. You add the container view, bring it to front, then you add the mainimage view right after. Other then that you got me, I've used your code and it functions. I've updated my answer above to reflect my functioning code. – Haligen Jun 16 '16 at 16:18
Now thinking about it, you could also check the background of the view controller that is associated with the container view. I didn't see that in the code, or maybe you haven't gotten that far with it yet. – Haligen Jun 16 '16 at 16:27
It runs fine on the iphone6s simulator, however on my actual ipad2 I keep getting that problem, could it be an OS version issue, the ipad is running iOS 9.3.2 – Alk Jun 16 '16 at 16:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114869/discussion-between-haligen-and-mankee). – Haligen Jun 16 '16 at 17:00
Hi Canyou please help me out with this http://stackoverflow.com/questions/37942009/text-blur-with-uicollectionview-cell – Diksha Jun 21 '16 at 11:31

score 0 · Answer 2 · answered Jun 16 '16 at 14:44

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()
    }

Guys, please check my edit, I provided some more info – Alk Jun 16 '16 at 15:07 — Alk, Jun 16 '16 at 15:07

UIVisualEffectView not working

2 Answers2