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:
button.layer.shadowColor = .CGColor;
button.layer.shadowRadius = 7.0f;
button.layer.shadowOpacity = 1.0f;
button.layer.shadowOffset = CGSizeZero;
button.layer.masksToBounds = NO;