Premises: Can `NSLayoutConstraint` manage columns of variable height?

Autolayout, the powerful view positioning system ubiquitous in iOS, can be programmed to solve the most complex interface requirements. All without a single line of code.

Architectural Design

In 30 years of working in close proximity to software engineers, either as a peer or a leader, what can be coined as «If it works even just a little bit, do not dare touch it.» is a technical debt nightmare.

Even on iOS, which Apple has been maintaining very effectively since it’s original release on July 29, 2007 (ref.), where many a company takes pride in developing state-of-the-art software, inertia to adopt new technologies is the rule, not the exception. Besides very visible software candy and low hanging marketing fruits, such as WatchKit and possibly HealthKit,  the bulk of the frameworks take a long time to make it to market of most Apps, if ever.

As an architect, I wouldn’t be so concerned if the carpentry did not match the trim. Yet just as the finish is flaky, so is the structure: by and large, even frequently updated Apps have not adopted modern iOS technologies. In reverse historical order, here are some deep Operating System changes that may not have made it to your App:

1. Size Classes: Introduced with iOS 8
2. Swift: Introduced with iOS 7
3. AutoLayout: Introduced with iOS 6
4. Storyboards: Introduced with iOS 5
5. Automatic Reference Counting (ARC): Introduced with iOS 4, full featured since 2011

Why panic?

Each of these technologies have added unprecedented robustness, compatibility, speed, and arguably ease of use and consistency to the Apps that have adopted them. While new Apps being developed are very likely to start on this fresh slate, existing ones being maintained are lagging behind, some dangerously. A small number of StackOverflow questions created last year are about ARC conversion (ref.). But I digress: this recommendation is about Storyboards, and why you should use them?

I will not answer this. Storyboard is innocent, and has no need to defend itself. It would be a waste of time, and is clearly a waste of yours.

With Storyboard and Autolayout, you can create complex, complete, compelling User Interface, running on all the iPhones you may ever desire, iPad, in Portrait and Landscape modes, automatically adapting to Interface Orientation changes, right from Xcode Interface Builder, without compiling the application.

Aren’t I managing Software Programmers?

Actually, no. The term Programmer shall best describe the temperature controller sitting on the wall next to your cubicle, or at best the device designed for anyone who wants to read, copy, program or burn common IC’s (ref.). A better term is developer, if not software engineer or computer scientist. As such, one must think outside of the package, and apply more thinking to the design, and less in the coding.

 

If you haven’t done so, invest the time you were planning to spend writing bugs to retrofit your App with Storyboard and Autlolayout. And you will still come out as a hero, since it is pretty hard to write bugs when you do not write code.

Primary Piece of Advice

• Forget Swift: use Storyboard. You can test all your constraints visually with a state-of-the-art GUI.
• Do not tinker with hugging, compression, or even UILabel height: let each label take the space it needs vertically, and only add top and side anchors
• Use extra views as containers to define the width of each column. Use multiplier to get, say 2 thirds and 1 third.
• Let these views calculate their ideal height by adding a single height constraint to the bottom of the lowest label (`leftColumn.bottom` Equal `lowestLeftLabel.bottom`)
• Do not add or remove views dynamically ; rather, hide them so that they preserve the associated constraints.

Secondary Piece of Advice

1. Break down the problem into small, manageable pieces.
2. Possibly according to Albert Einstein, yet only realistically recorded in a 1995 publication (ref.) by J. Daniel Cougar, defining the problem is roughly 0.9167 solving it, or more precisely 55/60. Regardless of the allegoric attribution, the point is that every engineer should think as an architect, measure twice, cut once, and leave little to no time to coding ; a recurrent theme of mine.

The present article won 113 reputations in a single swoop on StackOverflow (ref.). It is not trivial, yet took so much longer to describe than to solve. It was resolved in just about 15 minutes, using Storyboard and Autolayout. One could ponder what using Xamarin buys you ; IMHO, neither time nor stability.

---

Using Autolayout to Create Columns

Problem Definition

1. We want to see all the content at all times
2. We want to see 2 or more columns
3. Each column contain text of variable size
4. We know nothing of the content in advance

In reverse order:

• 4. `UILabel` does a fine job at stretching itself in all directions. Give a `UILabel` an vertical anchor + horizontal constraints, it will automatically figure out its height.
  
  
• 3. Daisy chain each element top to the bottom of the one immediately above. Anchor the topmost element to the top of the column. Reverse the rule for the bottom of the column: make it relative to the bottom of the lowest element, not the other way around.
  
• 2. Create column elements alongside each other. Define the width of each column to be relative to, yet, another level of enclosure. Let’s call that one the page.
  
• 1. Use inequality (greater than) for the height of the page. Add as many constraints as there are columns, specifying that the height of the page is greater than the bottom of each column
  

What to code?

Nothing. Solve this using 100% resources, 0 % Swift. Works on all iPhone, all iPad, all orientations, dynamic resizing.

Try out this Storyboard on GitHub: (https://gist.github.com/SwiftArchitect/e203c4ff4c578e5e4d09).

References

1. iPhone OS release date: https://en.wikipedia.org/wiki/IOS_version_history
2. StackOverflow `retain` questions for last year: https://stackoverflow.com/search?q=%5Brelease%5D%5Bios%5D+created%3A1y
3. 844USB Device Programmer: https://www.testequipmentdepot.com/bk-precision/device-programmers/844USB.htm
4. Albert Einstein unverified quote: https://books.google.com/books?id=nMoOAQAAMAAJ&q=%22hour+to+save+the+world%22&hl=en#search_anchor
5. StackOverflow post31658526 from #swiftArchitect: https://stackoverflow.com/q/31658526/218152