iosswiftsubviewuiblureffect

Adding subview to a blurred view


        if !UIAccessibilityIsReduceTransparencyEnabled() {
            self.blurOutletTop.backgroundColor = UIColor.clear

            let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)

            let blurEffectView = UIVisualEffectView(effect: blurEffect)
            blurEffectView.frame = self.blurOutletTop.bounds
            blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

            self.view.addSubview(blurEffectView)

            //self.logoOutlet.addSubview(blurEffectView)

        }
        else {
            self.view.backgroundColor = UIColor.black
        }
    }

I've got a navigation bar sized UIView up near the top of my screen. The above code adds a blur effect to it. What I'm trying to do is add my navigation buttons ontop of the view so they're not blurred, but doing this just through the storyboard results in the buttons also being blurred.

I read that adding the button's outlets as subviews to the blurEffectView would place the buttons on top, but when I uncomment out

self.logoOutlet.addSubview(blurEffectView)

the blurOutletTop's position is relocated, the background of the button is blurred but the label text is not, and the button itself is relocated. I've tried adding constraints and it hasn't helped either.

What's the easiest way to get my buttons/ images overtop of my blurTopOutlet?


Solution

  • I've subclassed UIVisualEffectView in code, and then added all kinds of controls as subviews to it. Very nice effect. Not sure if it can be done 100% through IB though due to view hierarchy expectations.

    ADDED EDIT: You may be able to do most of this through IB. Set everything up, and since the UIButtons are subviews to your blurred view, try using bringSubview(ToFront:). If that works, it's probably much easier! (I'm old-school and like coding things more.)