Oct 26, 2016:  ~ 2 min read


I was in need of a radio button recently, and it had to be designed like a Google Material Design radio button. Nothing too fancy, but I wanted to spice it up a little bit, by adding a nice animation. The idea was to:

  • start with a gray border, with an empty center
  • fill the center inwards with a blue color
  • slightly increase its width
  • as it reaches max width, release a wave outwards
  • reduce the center's width back to normal
  • color the gray border blue, as the wave passes "over" it
  • fade out the wave and reduce its width as it moves out

This is the result:

The library repo can be found here, and its CocoaPods page here.

It can be installed either by dragging the contents of the source folder to your Xcode project, either by adding pod 'LTHRadioButton' to your Podfile.

It's pretty straightforward to use:

  • selectedColor and deselectedColor have been made publicly customizable for cases like a tableView with alternating row and radio colors, where the tableView might dequeue a cell with one color for displaying a cell with a different color.
  • isSelected - Indicates whether the radio button is selected.
init(diameter: CGFloat = 18, selectedColor: UIColor? = nil, deselectedColor: UIColor? = nil) // Colors default internally if nil.
func select(animated: Bool = true) // Selects the radio button.
func deselect(animated: Bool = true) // Deselects the radio button.
Subscribe to my monthly newsletter.
No spam, unsubscribe at any time.