Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Swift: Round UIButton with Blur background

I am wanting to make a round UIButton but with a light blur effect with vibrancy as it's background

So far I've got a rounded UIButton, but the code I have found online (I'm new to iOS development so don't really understand how the blur etc works) to add a blur just puts it as the entire button's frame, essentially making the button appear square again.

I've also tried adding a view, then the UIButton and then the blur effect and applied the cornerRadius code to that view but it also didn't work.

Here is what I've tried:

    shortcutButton.layer.cornerRadius = 0.5 * shortcutButton.bounds.size.width // add the round corners in proportion to the button size

    let blur = UIVisualEffectView(effect: UIBlurEffect(style:
        UIBlurEffectStyle.Light))
    blur.frame = shortcutButton.bounds
    blur.userInteractionEnabled = false //This allows touches to forward to the button.
    shortcutButton.insertSubview(blur, atIndex: 0)
like image 362
Rs2845 Avatar asked Jan 02 '16 17:01

Rs2845


1 Answers

Add the following two lines of code to your project, before you add the subview:

blur.layer.cornerRadius = 0.5 * shortcutButton.bounds.size.width
blur.clipsToBounds = true

Enjoy! :)

like image 89
Joshua Avatar answered Oct 10 '22 08:10

Joshua