Introducing Paralayout

You know the feeling: the design spec comes in, polished and perfect, and you know at a glance that you’ve got two ways to go:

  1. implement precisely to spec, but with a horrific mess of code and UI configuration behind it (and probably a couple of days late) or
  2. ship on time, with a simpler implementation that gets the UI, you know, mostly right — and avoid looking at yourself in the mirror the next morning.

I’ll spare you a lengthy exposition of Autolayout, Apple’s constraint-based system for specifying UI via rules rather than code. While technically impressive, in practice we have found that it makes UI take longer to implement, and is much more difficult to review, reuse, debug, modify, animate, and performance-tune. On the Cash iOS team, we have embraced a different philosophy that prioritizes development speed, correctness, readability, maintainability, and performance. We call it Paralayout, it’s 100% Swift, and we’re excited to announce it’s open source!

The premise is simple: rather than taking over the task of layout, we instead make the task easier. While the Greek root auto means “self,” the root parameans “help” (think paralegal or paramedic). Paralayout is not an abstraction layer; it’s a collection of à la carte convenience methods.

Consider this screen in the Cash app, as it appears on an iPhone 7 and iPhone 4:

The title and two buttons are vertically distributed such that the empty space above and between them is proportionally expanded or compressed on a larger or smaller screen. Our toolset gets this done with one easy-to-read line of code, regardless of screen size:

But there’s more to this design! The title text wouldn’t look correct with a naive layout: the text has a soft line break in it to look more visually balanced:

Paralayout extends UILabel to provide custom “compact” line wrapping that eliminates the need for manual typesetting. It accomplishes this by performing a binary search to find the narrowest width for the text that does not wrap to a third line. It also provides conveniences to specify attributes like kerning and line spacing without the need for messy code to compose an NSAttributedString and NSParagraphStyle. The result is text that’s much more easily localized, reused, and modified without need for extraneous testing and customization.

Read Full Article

Leave a Reply

Your email address will not be published. Required fields are marked *