The button toggles between 'play' and 'pause', has a circle around it, and has the capability to display a 'progress track'. It's a sub-class of UIButton and all visual elements are SVG which means it will scale infinitely up and/or down. The example app demonstrates some of the scaling capability via a slider as well as an example of how to update the button's progress.
It has default colors which can be set either programmatically or via Interface Builder. The colors that can be set are:
progressTrackColor- the outer circleprogressColor- the progress circle that fills in the 'track'playColor- color of the play shape / trianglepauseColor- color of the pause lines
It has two closures: willPlay() and willPause(). These are optionals and if have been set, will be called just before the button 'plays' or 'pauses'. The button itself is not responsible for playing or pausing anything and so the closures are a way of letting the button say, "heyyy I'm going to be in a state that indicates something's being played so you should probably play something," to whatever has maintained a reference to it.
Drag a button onto your storyboard. Set its class to SVGPlayButton and Type to Custom. Connect an outlet to your controller. If you wish set the button's willPlay() and willPause() closures to something meaningful and useful to your app. Override default colors as needed.
In a view controller this could look something like:
@IBOutlet weak var progressButton: SVGPlayButton!
func viewDidLoad() {
super.viewDidLoad()
self.progressButton.willPlay = { self.progressButtonWillPlayHandler() }
self.progressButton.willPause = { self.progressButtonWillPauseHandler() }
}
private func willPlayHandler() {
print("willPlay")
}
private func willPauseHandler() {
print("willPause")
}iOS 8.0+ Swift 3
SVGPlayButton is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'SVGPlayButton'- Matthew Loseke, [email protected]
- @mattloseke
SVGPlayButton is available under the MIT license. See the LICENSE file for more info.