Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Eeb061c8b2816b771920da1b3e7904a3?s=128

Swift India

July 28, 2019
Tweet

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?

  6. None
  7. None
  8. None
  9. “Thanks to optimisations we were able to make in Metal,

    the effect is ‘practically’ free.” - Core Animation Engineer WWDC 2018
  10. None
  11. None
  12. None
  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
  16. None
  17. None
  18. None
  19. None
  20. None
  21. “I made a rounded button class. Is this the most

    performant way?” - Me “Uhh. No.” - Multiple Apple Engineers
  22. None
  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
  25. None
  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.
  29. None
  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
  34. None
  35. Thanks for watching! ✌ TimOliver @TimOliverAU