Have you ever implemented a requirement only to have the client come up with more ideas once they see it in action? Yep, me too – part of the fun if you ask me.

While working through the design on a client app we determined there were just too many data points (identified as distinct user interface elements) for a user to remember, so we decided we’d provide a hide-able legend.

Problem solved, right? Not exactly.

In an effort to make sure the legend was visually appealing I inadvertently over-emphasized it’s use in the user interface as a whole — the customer wanted the legend items to be ‘functional’. Instead of simply displaying the legend items as data, the customer wanted actionable buttons. No problem, I thought, I’ll simply convert the image views to buttons and assign the appropriate selectors. The next problem was the buttons needed to retain state — if you tapped a button it needed to remain tapped. Since I’m a big believer in core graphics, I decided to simply apply a glow effect to the element when it’s in a tapped state.

All buttons in an untapped state:

 

 

All buttons in an tapped state

 

 

Using core graphics adding the glow effect is incredibly easy. We simply add a shadow layer to the button and turn off masksToBounds:


-(void)addButtonGlow:(UIButton*)button {
button.layer.shadowColor = .CGColor;
button.layer.shadowRadius = 7.0f;
button.layer.shadowOpacity = 1.0f;
button.layer.shadowOffset = CGSizeZero;
button.layer.masksToBounds = NO;
}