The difference between a square with round corners and a Squircle is small but can have a big impact on the overall feel of your app - https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/
Your typical layer.cornerRadius
rounded rectangle has a constant corner radius, it's like placing 4 perfect circles on each corner, the result is a slightly jarring transition from straight to curve. A squircle, on the other hand, gently increases the curve at it goes from straight-edge to rounded corner. Making it more of an elipse than a perfect circle.
Apple uses the Squircle A LOT in their designs: Image source
JSSquircle is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'JSSquircle'
Use the class Squircle
exactly the same as you would UIView
, just set the cornerRadius
property and you're good to go.
If you created a roundedRect like this:
let roundedRect = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
roundedRect.layer.cornerRadius = 10
self.view.addSubview(roundedRect)
To replace this with a smooth Squircle all you need to do is import this module and then replace UIView
with Squircle
like so:
import JSSquircle
let roundedRect = Squircle(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
roundedRect.layer.cornerRadius = 10
self.view.addSubview(roundedRect)
Add a UIView to your Storyboard as normal, then change the Class
under Identity inspector
from UIView
toSquircle
.
Then set the cornerRadius
to whatever you'd like in the Attributes inspector
.
That's it!
Janak Shah, janakshah.com
JSSquircle is available under the MIT license. See the LICENSE file for more info.