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

Ode to the Corner Radius API

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.

Tim Oliver

July 28, 2019
Tweet

More Decks by Tim Oliver

Other Decks in Technology

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. “Thanks to optimisations we were able to make in Metal,

    the effect is ‘practically’ free.” - Core Animation Engineer WWDC 2018
  5. How does it work? Opaque Clear Container Label Rounded Rectangle


    Image Clipped
 Container Label Flat View
  6. “I made a rounded button class. Is this the most

    performant way?” - Me “Uhh. No.” - Multiple Apple Engineers
  7. Points for Refinement • There’s no point in generating a

    bitmap version. • The memory allocation and rendering time is far slower. Container Label Image
  8. 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
  9. 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
  10. 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.
  11. 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.
  12. • 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
  13. 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.
  14. One more thing… Source: Apple’s Icons Have That Shape for

    a Very Good Reason, Mark Stanton, Hacker Noon