How to apply Squircle radius to iOS views

Giuseppe Travasoni
2 min readApr 12, 2018

As iOS developer i really love all the little things that are making iOS great and one of my favourite is the squircle that Apple apply to springboard icons.

I’ve found many articles written by many designers (one of my favorites is this one by figma), but nothing about iOS implementation and since i love rounded corners, i wanted to go further.

Available through Cocoapods you can find my last creation Squircle that you can import just adding

pod 'Squircle'

to your podfile.

The library is super easy to use. If you try to squircle a square, you’ll obtain the same effect as springboard icons:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 180, height: 180))
view.squircle()

If you try to squircle a rectangle, the radius will be based on the square built on smallest side:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 180, height: 240))
view.squircle()

Last but not least, you can specify a radius, similar to iOS default corner radius. The only limitation is that radius multiplied by 4.7 should be less than minor side, otherwise it will be ignored:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 180, height: 240))
view.squircle(with: 10)

If you have any feedback please write a comment or if you have any contribution to make the project is open source on GitHub

--

--

Giuseppe Travasoni

Co-Founder at TrueScreen // Co-Founder at Beatcode // iOS Developer and Architect