Adding a UIVisualEffectView to button

Question

i have a transparent delete UIButton added to a story board scene, which has a picture as a background, and i have added some auto layout constraints to it.

i want the button background to be a UIVisualEffectView so i was thinking of programatically adding the view to where the button is, then removing the button and adding it back so it's on top of the UIVisualEffectView. Question 1) is this a good idea - or should i find the position in the view hierarchy and place it one level before the button?

here's what i have thus far. for the UIButton:

@IBOutlet weak var delete: UIButton! {
    didSet {
        let borderAlpha = CGFloat(0.7)
        let cornerRadius = CGFloat(5.0)
        delete.setTitle("Delete", forState: UIControlState.Normal)
        delete.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
        delete.backgroundColor = UIColor.clearColor()
        delete.layer.borderWidth = 1.0
        delete.layer.borderColor = UIColor(white: 1.0, alpha: borderAlpha).CGColor
        delete.layer.cornerRadius = cornerRadius
    }
}

and for the UIVisualEffectView:

override func viewDidLoad() {
    super.viewDidLoad()

    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
    visualEffectView.frame = delete.frame
    visualEffectView.bounds = delete.bounds
    view.addSubview(visualEffectView)
}

this produces a blurred view, the same size as the button, but it's not on top of the button. Question 2) do i need to somehow pass the auto layout constraints, too?

thanks in advance for any help.

Answer 1

Here is a simple example that you could use in order to insert UIVisualEffectView with vibrancy effect.

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 500, height: 100))
button.setTitle("Visual Effect", forState: .Normal)

let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.blueColor().CGColor, UIColor.redColor().CGColor, UIColor.brownColor().CGColor, UIColor.greenColor().CGColor, UIColor.magentaColor().CGColor, UIColor.purpleColor().CGColor, UIColor.cyanColor().CGColor]
gradientLayer.locations = [0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]
button.layer.insertSublayer(gradientLayer, atIndex: 0)
gradientLayer.frame = button.bounds

let containerEffect = UIBlurEffect(style: .Dark)
let containerView = UIVisualEffectView(effect: containerEffect)
containerView.frame = button.bounds

containerView.userInteractionEnabled = false // Edit: so that subview simply passes the event through to the button

button.insertSubview(containerView, belowSubview: button.titleLabel!)
button.titleLabel?.font = UIFont.boldSystemFontOfSize(30)

let vibrancy = UIVibrancyEffect(forBlurEffect: containerEffect)
let vibrancyView = UIVisualEffectView(effect: vibrancy)
vibrancyView.frame = containerView.bounds
containerView.contentView.addSubview(vibrancyView)

vibrancyView.contentView.addSubview(button.titleLabel!)

And, here is what I have done,

• Create a button.
• Create a gradient layer and add it to 0 index of the button.
• Create a container view with effect of UIBlurEffectDark.
• Add the container view to the button.
• Create a vibrancy view with the same effect and add it to the contentView of the above containerView.
• Move the label from button to the vibrancy view's title

And, here is the final result. The titleLabel text blends nicely with vibrancy and the effect applied.