Adding subview to a blurred view

Question

        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?

Unknown Unknown · Accepted Answer · 2016-11-21T22:42:07

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.

(1) Create the "main" view in IB and add constraints. The alternative here is what I did, subclass UIVisualEffectView.
(2) Create the "main" view subviews in code, add them to the "main" view, and add constraints in code.
(3) Since you want certain actions associated to some of the subviews (the UIButtons), also be sure to code addTarget(target:for:) calls for them.

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

Adding subview to a blurred view

2 Answers