Ode to the Corner Radius API

I presented at the Swift India conference in Bangalore on July 28, 2019. My topic was the rounded corners API available in iOS. These are the slides that I used.

Transcript

1. Ode to the Corner Radius API
 A Look at Modern iOS Design Tim Oliver iOS Tech Lead, Mercari Inc.
2. Who? • Originally from Perth, Western Australia. • Currently living in Tokyo, Japan. • Giant iPhone nerd since iPhoneOS 2.0. • Was a web developer until moving to full-time iOS development into 2013. • Loves OSS, video games and karaoke. @TimOliverAU
3. Design Style From iOS 7 to iOS 13 • Single point lines became thicker. • Tab bar icons became filled. • Title texts were made large and bold. • Separator lines replaced with contrasting colours.
4. The Biggest Evolution?
5. The Biggest Evolution?
9. “Thanks to optimisations we were able to make in Metal, the effect is ‘practically’ free.” - Core Animation Engineer WWDC 2018
13. How does it work? Opaque Clear
14. How does it work? Opaque Clear Container Label Rounded Rectangle
 Image Clipped
 Container Label Flat View
15. “How is it better than just applying cornerRadius to UIButton exactly? ” - Many people on Twitter
21. “I made a rounded button class. Is this the most performant way?” - Me “Uhh. No.” - Multiple Apple Engineers
23. Points for Refinement • There’s no point in generating a bitmap version. • The memory allocation and rendering time is far slower. Container Label Image
24. Points for Refinement • Applying corner radius to the container view creates an off- screen render pass we could otherwise avoid. Clipped
 Container Label Flat View
26. Clipped
 Container Label Flat View • If there is no need dynamic clipping, Metal is smart enough to convert views to rounded rectangles on the GPU. Container Label Clipped
 Flat View
27. Points for Refinement • Applying cornerRadius to a filled-in or image view will turn an opaque view red, and add the corners. • This is actually a GPU optimisation and far better than an off-screen render pass.
28. Points for Refinement • maskToBounds is needed if the view is an image view, or if subviews need to also be clipped. • You do not need to enable maskToBounds if the view is just a flat background colour.
30. So… UIButton?
31. • The background is a flat, normal view. • So, actually cornerRadius on UIButton is fine. • But that’s okay. We learned a lot in the process. ☺ • (And my button still has value in being an alternative.) The Verdict
32. Lessons Learned • Times change. Hardware gets better. Software gets better. • “Best Practice” also changes as a result. • Never stick to your assumptions. Always ask questions. • Building high quality, reusable code is better than repeating ‘decent’ code. • Aim to make the most performant code that you can, in the time that you have. • Test your code on your oldest supported devices. Don’t optimize more than you need.
33. One more thing… Source: Apple’s Icons Have That Shape for a Very Good Reason, Mark Stanton, Hacker Noon
35. Thanks for watching! ✌ TimOliver @TimOliverAU