View Layout Options for Your iOS App

By Jesse Feiler

Before you start to add another view to your iOS app — which will be a subview of the view that’s already there — it’s necessary to talk about view layout options. View layout is particularly important on mobile devices because the pesky user might rotate her device.

So why is that an issue? Look at the specific case of the original iPad. When held in Portrait orientation, the screen is 768 pixels wide by 1,024 pixels tall. But when rotated to Landscape position, the screen becomes 1,024 pixels wide, but only 768 pixels tall.

If your app handles rotation properly, components such as buttons, text fields, images, and so on usually need to move and resize. In other words, you need a layout strategy, so that subviews are moved and resized correctly when their containing superview is resized.

Here are three strategies for view layout:

  • Hard-code the layout. Here, you set the location, width, and height of each view yourself, and change those properties when the device is rotated. This is a really bad idea for most apps. It’s difficult, error-prone, and inflexible.

  • Use iOS autosizing. Autosizing has existed since early versions of the iOS SDK and provides a mechanism for automatically moving and resizing a view in response to changes in its superview’s position or size. You can set the default autosizing behavior for your views from the Size pane of the inspector.

    The Size inspector contains an autosizing section with springs and struts that let you specify which edges of an object (if any) are pinned to the edge of its container (which is often the screen itself) and which edges can move. Although currently supported and used in much older code, it is not the first choice for many developers today.

  • Use Auto Layout. You use the Auto Layout system to define layout constraints for user interface elements. Constraints represent relationships between user interface elements. Auto layout improves upon Autosizing’s “springs and struts” model in many ways. It was introduced in iOS 6 and is the preferred method of handling autosizing today.

Autosizing isn’t just about rotation. Yes, the screen image must adjust as you rotate a device, but when Apple releases a new device with a new screen size, ideally, you want your app to adjust automatically to the new screen size. Using Auto Layout for autosizing can give you a big leg up here.

And there’s even more. If your app will be localized, you need to prepare separate storyboards for each language. Depending on which languages you use, you may have to accommodate scripts that run from right to left as well as from left to right (not to mention languages that can run vertically).

On top of that, some languages require more space to express the same thought, although this varies somewhat based on the subject matter of the thought and the language. When you put these localization issues together, you can see that the objects on your storyboard that contain localized text may need to be able to change size to reflect their content. Auto Layout helps to do this.

These are advanced issues, but they’re discussed here so that if they apply to you and your app, you’ll be aware of Auto Layout and some of its advanced capabilities.