Introduction to Cocoa Autolayout


Cocoa Autolayout was introduced along with Mac OS X 10.7 Lion and Xcode 4.1. In short, Cocoa Autolayout replaces the old springs and struts model and introduces constraints based on intent. For example, this NSTextField must always stay x pixels away from this NSDatePicker.

This new API has two major benefits for localization:

  • Localization by just swapping strings, no need to adjust XIBs in most cases
  • UI mirroring for right-to-left languages, such as Arabic and Hebrew

 

Pre-Cocoa Autolayout

In essence, Autolayout works by defining relationships and constraints. Let’s take the a widely used update window (Sparkle or otherwise) as an example. Most applications will offer three buttons, “Skip this version”, “Remind me later” and “Install” and the buttons will be sized to fit the English text. In previous versions of Xcode, the window would look something like this:

Installing an update exampleAfter receiving your translated strings from a translator, your XIB may then look something like this (Italian):

Non-conformingYou can instantly see that the text is squashed into the buttons. Italian is a relatively concise language and you can imagine what German would look like. Even so, the current layout does not comply with Apple’s HIG rules so a bit of manual adjustment is required to fix this.

The problem isn’t limited to languages which are commonly associated with being longer than English, though this is often the problem case for developers. Japanese and Chinese are often remarkably concise and can result in a lot of white space. Again, not conforming to Apple’s HIGs.

 

Post-Cocoa Autolayout

This all changes with Cocoa Autolayout. There’s no need to open up each individual XIB in each localized language anymore as your application will now dynamically adjust the position and size of your buttons (and of course other elements) at runtime. It goes further by limiting itself to certain constraints to avoid objects overlapping or dominating the view. In the example above, the button “Remind Me Later” would in fact resize itself to fit “Ricordami più tardi” in realtime, making sure the distance between other objects remains in line with Apple’s HIGs.
Here’s what the result looks like, without any XIB customizing at all. Autolayout automatically resizes the NSButtons to fit the text and give the appropriate amount of padding as specified by the HIGs:

Italian update window with cocoa autolayoutCocoa Autolayout is available for developers running OSX 10.7 only and using Xcode 4.1 or later.

 

Further information: (Apple dev account required)

Cocoa Autolayout Release Notes

Download Cocoa Autolayout Demos

WWDC 2011 Session Video 103


We’d really appreciate it if you could rate this post to let us know how useful you found it! :) Thanks!

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 3.67 out of 5)

Was this article helpful to you?

Rob

CEO & Founder of Applingua.com

One Response to “Introduction to Cocoa Autolayout”

  1. Autolayout : Clark's Tech Blog

    […] Why Autolayout in iOS6 doesn’t entail new screen size. It’s for automatically resizing buttons when the language changes to something verbose like German. […]

    Reply

Leave a Reply