Search code examples
uibuttonuikittvos

tvOS: How do I make a circular button that still gets a shadow when focused?

Update: As of WWDC 2017, tvOS supports non-roundrect buttons. Here's a link to the documentation.

Original question:

On tvOS, the system-type UIButton gets a neat shadow effect when it's in focus.

I'd like to get this effect, but with a rounded UIButton. So far, I've tried the following:

  1. I've tried rounding the corners with the ol' layer.cornerRadius trick - but this doesn't work; the buttons are round but they do not lift off the view when focused (because they're clipping to bounds):

    button.layer.cornerRadius = button.size.width / 2.0
button.clipsToBounds = true

  2. I've tried setting a circular background image - but now there's a weird background color or shadow appearing behind the buttons:

    button.setBackgroundImage(myCircularImage, forState: .Normal)

    Here's what Option 2 looks like (note: the red button is currently focused): Red button is focused, background shadows are weird

Is there something else I can try with UIButton(type: .System) to get the Focus Engine's shadow effect for free? Or do I need to write something more custom for this?

Solution

  • I spoke with Apple engineers at the tvOS talks in Seattle this month - there is currently no way to get the system-standard Focus behaviors (parallax, motion effects, shine, etc) for round UIButtons - which is a bummer!

    They recommended that I either change the design, or write my own focus/parallax/motion effects for the UIButton. I'm not eager to write my own - it's probably not possible to fully replicate the system-standard effects, and when the platform changes in the future, the custom effects will probably look dated.

    Update: I've written up a blog post and included sample code for accomplishing this effect: http://www.devsign.co/notes/custom-focus-effects-in-tvos

    Update #2: As of WWDC 2017, tvOS supports non-roundrect buttons! Here's Apple's documentation.

    finished product