mPower™ Blog Series

iOS App Development: Auto Layout in iOS

Introduction to Auto Layout

Auto Layout in iOS is a system that enables you to define your app’s interface by creating a mathematical description of the relationships between the elements. You can define these relationships with respect to constraints either on individual elements or between sets of elements. You can use Auto Layout to create a dynamic and versatile interface that responds appropriately to variations in screen size, device orientation and localization.

Auto layout has become more and more important, particularly for more device screen sizes. Though Auto Layout has been available for a few years now, it has become a necessity in the current scenario, particularly for iPhone 6 or 6 Plus. Though it appears to be bit daunting to use this feature, Xcode has seen steady improvements in interface builder to enable integrating Auto Layout simpler. Starting from Xcode 6, you should learn how to use Auto Layout, wherein without using Auto Layout, it would be quite challenging to build an app that supports all screen sizes. When you use Auto Layout, you can get a stupendous control over the layout with a wide range of customization and yields the perfect interface.

Auto Layout is built into Interface Builder in Xcode 5 and is made available with apps, targeted at either iOS or OSX. If you are creating a new project, Auto Layout is enabled by default. However, if your existing project doesn’t use Auto Layout, you can adopt an auto layout.

A typical button example

Let’s assume you have a story board, where you need to place a button in the center of the view. Just run the app on both iPhone Retina (3.5 inch) and iPhone Retina (4-inch) simulators. You will notice that the button isn’t centered when running on a 3.5 inch device. Can you guess what went wrong with this?

When you don’t use Auto Layout, the UI controls (here, the button) we layout in the storyboard is at a fixed position. This implies, we “hard-code” the frame origin of the control. For instance, let’s assume that the “Click Me” button frame origin is set to (100, 185). Hence, irrespective of the screen size (3.5 inch or 4 inch) of the device you are using, iOS will draw the label in the specified position. This functionality thus explains why the “Click Me” button wasn’t displayed properly on a 3.5-inch phone, for which the screen height is different.

Picture1

What you can do with Auto Layout?

Using Auto Layout in Xcode 5, you can:

  • Add constraints when you are ready
  • Quickly add constraints with control-drag or menu options
  • Update constraints and frames separately
  • Specify placeholder constraints for dynamic views
  • See, understand, and resolve issues with conflicting constraints or ambiguous views

Auto Layout Concepts

The basic building block in Auto Layout is the constraint. Constraints specify rules for the layout of elements in your interface. For instance, you can create a constraint that specifies an element’s width or its horizontal distance from another element. You can add and remove constraints, or change the properties of constraints to modify the layout of your interface.

When calculating the runtime positions of elements in a user interface, the Auto Layout system takes into account all constraints at a single instance, and sets positions in such a manner that best suits all of the constraints.

The typical workflow for creating user interfaces commences by using Interface Builder to create, reposition, resize and customize your views and controls. Once you are fine with the positions and settings, you can jump start to add Auto Layout constraints to enable your interface to reach to changes in orientation, size and localization.

Adding Constraints

When you drag out an element from the object library and drop it on the Interface Builder canvas, it starts out unconstrained to make it easy to prototype your interface by dragging the elements around. If you build and run without adding any constraints to an element, you will understand that the Interface Builder fixes the element’s width and height and pins its position relative to the top left corner of the superview. This implies that resizing the window doesn’t move or resize the elements. In order to ensure that your interface reacts properly to changes in size or orientation, you need to start adding constraints.

There are numerous ways to add constraints, based on the level of precision you want and the number of constraints you want to incorporate at a time.

How to Use Auto Layout in Interface Builder?

First let us understand what Interface Builder is all about and get to know how Auto Layout can be applied:

Before we show you how to fix the alignment issue in the example, let’s have a brief walkthrough of the Interface Builder and get to know how Auto Layout can be applied.

As a first step, setup a project based on the single view application iOS app template. In the project options, click iPhone for the device family, save the project and then open the storyboard. You will notice a menu at the bottom-right corner, wherein the buttons in the menu are related to Auto Layout. You can use these buttons for alignment, sizing, spacing and resolving constraint issue. The overview of these buttons are as follows:

  • Align – Create alignment constraints, such as aligning the left edges of two views.
  • Pin – Create spacing constraints, such as defining the width of a UI control.
  • Issues – Resolve layout issues.
  • Resizing – Specify how resizing affects constraints.
  • Xcode Auto Layout Menu in Interface Builder

Picture2

Working with Constraints

Apart from the Auto Layout menu, Apple has made it flexible for developer to setup Auto Layout by using Control + drag. You need to just control and drag from any view to another view to set constraints between each other. Once you release the mouse, it displays a list of possible constraints for you to select them.

After you setup a constraint in a view, the constraint line is displayed in either orange or blue. The orange constraint lines denotes that there are insufficient constraints, indicating that you need to fix it.

If the constraint line is displayed in blue, it indicates that your view layout is being set up correctly and there is no confusion.

Sometimes, after you create the constraint, the Interface Builder outline view displays a disclosure arrow. The red arrow indicates that there are conflicts or ambiguities and once you click that arrow, you can view the list of issues, which are displayed on a scene-by-scene basis. Some of the core issues include missing constraints, conflicting constraints and misplaced views.

Apart from the size inspector view, the constraints also appear in the Interface Builder Outline under the corresponding view.

Conclusion

After reading this blog, you might have got an overview of what Auto Layout feature is all about and how constraints in the Interface Builder play a major role in positioning the button in a layout. Though not exhaustive in nature, the aim of this blog is to just kindle the right interest to get started using the Auto Layout feature, though my intention is to come out with much more exhaustive literature on how to use this feature with a typical implementation example in near future.

Request a Demo

To learn more about Innovapptive’s portfolio of SAP Certified Mobile Solutions , please contact us by clicking on the link. Alternatively, if you would like to discuss with an Innovapptive solution expert, you can reach out to us by emailing us at sales@innovapptive.com or you can reach a sales representative at (713) 275-1804.

Share this post

Leave a comment

Your email address will not be published.