Front Row like Menus with Core Animation Layers

A couple of weeks ago someone on the Cocoa-Dev list was asking about making a menu item like the one in Front Row. There were several suggestions and many of them good but none that I thought 'oh that is it'. So I figured I'd post mine here on my blog.

While its not perfect it does show some of the tricks necessary to mold Core Animation to your will.

Before we get started lets do a quick list of steps.

• Create a 'menu' layer - assumed and not discussed
• Put the 'menu' layer into a scrolling layer - assumed and not discussed
• Add 'menu item' layers for each menu item - assumed and not discussed
• For the selected item:
• Add a 'bloom' filter to the arrow character
• Add a blue shadow
• Add the 'reflection' highlight to the top
• Live Happily Ever After.

We are going to skip over the scrolling layer and the menu layer in this post. I'll post again about scrolling layers later.

Here is the code snipit that does all the 'highlight' steps in one place. We will go into the detail in the remainder of this post.

Add Bloom Filter

We create the bloom effect with a Core Image bloom filter like this;

Then the filter is added to the 'arrowLayer' like this;

Adding CI effect is one of the coolest eye-candy things that we can do with Core Animation, we could even animate the bloom (i'm not here but you could if you wanted to, if there is enough interest I'd be glad to add it to this example).

Now we have our arrow layer being highlighted its time to move on to the shadow.

Add Blue Shadow

During the initialization of the menu item layers we add the shadow like this;

We specifically set the offset to (0,0) because we want the shadow to come out from under the whole layer, if we set the offset to something it would not be the effect we are looking for, when you are playing with the code make sure to change this to see how it looks when you set the offset.

We set the background color to get the layer to cast a shadow. Remember that the shadow stuff in CA works a lot like the Transparency Layer stuff does in quartz. The drawing done in your layer has the shadow applied to it. If there is no drawing there is now shadow. Setting the background ensures that there is drawing. If you leave out the background color you get shadow only under the text layers, which looks cool too but is not what Front Row looks like. Since we are shooting for Front Row I've done things this way.

Now as the selection changes all we do is set the shadow's transparency to 0.85 (we set it to zero to make it invisible, check out the code for unselectCurrentSelection in the project download).

Now lets look at the highlight layer.

Add Reflection Highlight

Setting the highlight layer is easy, all we do is place it in the zeroth spot of our sublayers array, like this;

The real trick is in setting up the highlight layer. Lets look at that code now. While it looks like a lot the code is really simple.

The big picture is that we are setting up two layers, one as a child one as a parent. The highlightLayer has a single child with a backgroundColor of white and an opacity of 0.25. The child also uses rounded corners (radius set to 6). The highlightLayer is set to clip its sublayers (via the masksToBounds property being set to YES, remember that unlike views layers do not clip their sublayers by default). The rest of the code is just setting up constraints as to the way the layers sit in their superlayers.

And finally here are some diagrams of the layer layout. The first one shows the menu layer's layout. The second shows the selected layer and its parts.

And now the whole UI showing the 'Podcasts' item highlighted.

As I said earlier this is far from perfect but I like it better than the alternatives I saw posted. Any feed back is as always greatly appreciated. I have posted the code here for thoes that would like to play around with it. And there is much more about this example (and lots of others) in the Core Animation Book which will be entering Beta in the next week or two.