TORoundedButton is an open source UI control of a standard user button. Its design consists of displaying text on top of a solid rectangle with rounded corners. This UI style has started becoming more and more common in iOS 11 and above, but while Apple has an official one they use internally, it is not possible to achieve this effect without heavily modifying UIButton.
TORoundedButton has been crafted to be as graphically performant as possible, with specific codepaths created for whether the button is opaque (eg, it is displayed over a solid color that never changes), or if it is transparent (Displayed over dynamic content that changes)
TORoundedButton is not simply a subclass of UIButton. Instead, it is a subclass of UIControl with all button graphics and behaviors re-engineered from scratch.
- A completely custom implementation; no
UIButtonhacking. - Implemented with guidance from Core Animation engineers at WWDC 2019.
- Extremely flexible with many options for configuring the look and feel of the button.
- Integrates with Interface Builder for visual configuration.
- When necessary for dynamic background content, it uses Core Animation's
cornerRadiusfeature to still allow a performant, dynamically clipped button. - Elegantly cancels and resumes animations when the user slides their finger on and off the button.
- Piggy-backs off most standard
UIViewproperties in order to minimize the learning curve. - Includes dynamic color code to generate a 'tapped' shade of the normal color, saving you extra effort.
- Fully compatible with Swift, with the class name
RoundedButton.
TORoundedButton features a complete default configuration useful for most app instances, but can be easily modified beyond that.
// Create a new instance of `RoundedButton`
let button = RoundedButton(text: "Continue")
// The button color itself is controlled via tintColor
button.tintColor = .red
// If desired a brightness offset that will be used to
// dynamically calculate the 'tapped' color from the default one.
button.tappedTintColorBrightnessOffset = -0.15
// A closure is used to detect when tapped
button.tappedHandler = {
print("Button tapped!")
}The important thing to remember when using this library is to correctly set backgroundColor.
TORoundedButton will work with iOS 10 and above. While written in Objective-C, it will easily import into Swift.
Copy the contents of the TORoundedButton folder to your app project.
pod 'TORoundedButton'
github "TimOliver/TORoundedButton"
This sort of button style is more or less the bread and butter of a lot of iOS apps. But even that being the case, it is not offered as an officially supported style of UIButton.
Because of this, most developers will achieve this look by simply giving a UIButton a solid background, and then using the Core Animation cornerRadius API to round the corners.
As simple as this is, this is gross overkill for a lot of circumstances in which you'd use a button. The Texture Group wrote a very impressive article discussing the best way to produce rounded corners.
I wanted to make this control because I wanted something better. 95% of the time, instead of doing complex GPU clipping, simply generating a one-off graphic of the rounded corners is far more efficient.
That being said, for instances where actual dynamic clipping is needed, this library does use cornerRadius to produce that clipping result. I found out at WWDC 2018 that Core Animation was refined thanks to Metal, so while there is still a performance cost for cornerRadius, in cases where true dynamic clipping is needed, then it is fine.
TORoundedButton was created by Tim Oliver as a component of iComics.
iOS device mockup art by Pixeden.
TORoundedButton is available under the MIT license. Please see the LICENSE file for more information.