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

Question

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

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?

Answer 1

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.

Answer 2

You can achieve this effect by utilizing the focus engine and determining when your button is in focus, and applying the proper transformations on it.

I like to achieve a similar effect on my views by applying a scaling transformation on the view, and also apply a shadow effect like this. Remember to implement rasterization on the layer for performance:

if context.nextFocusedView == accountAddOkButton {
    context.nextFocusedView!.transform = CGAffineTransformMakeScale(1.1, 1.1)
    let layer = context.nextFocusedView!.layer
    layer.shadowOffset = CGSizeMake(1, 1)
    layer.shadowColor = UIColor.blackColor().CGColor
    layer.shadowRadius = 12.0
    layer.shadowOpacity = 0.80
    layer.shadowPath = UIBezierPath(rect: layer.bounds).CGPath
 }

EDIT:

Be sure to take a look at apple's documentation for creating Parallax Artwork if you wan't to achieve the same effect they use throughout the home screen https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/CreatingParallaxArtwork.html