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.