Swift India Conf 2019: Ode to the Corner Radius API: A look at modern iOS design

Speaker: Tim Oliver, Senior iOS Engineer at Mercari


Twitter: https://twitter.com/timoliverau/

Bio: Tim is a Senior iOS Software Engineer for Mercari in Tokyo. He's been building apps for the iPhone for 10 years now, loving every second of it. In his free time, he works on his comic reader app as well as publishing a variety of open source libraries for iOS. He also loves video games and karaoke.

Abstract: Starting in iOS 11, the visual design of iOS has been moving to use rounded-corner shapes for most of its content. This presentation will explore the corner radius API, based on the information provided by Core Animation engineers at WWDC19. It will slightly discuss Core Animation in general, and tips for ensuring the best performance.

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