iOS app UI – Designing it using AutoLayout

iOS app UI – Designing it using AutoLayout

0 32445
Designing iOS UI with AutoLayout

UI(User Interface) is undeniably the USP of a mobile app. Irrespective of the mobile platform that the app operates on, it is the sole user interface that decides the success or failure of the application. Getting things wrong while designing an app’s UI can adversely affect the overall performance of the app and make it lose its targeted users. If you’re an iOS app developer who’s been constantly hunting for the best methods of designing intuitive user interfaces for your apps, then a detailed know-how about the Auto Layout feature in iOS6, 7 and 8 versions will serve handy. In today’s blog, I’ll be elaborating on taking the full advantage of AutoLayout feature for designing iOS app user interfaces that are robust and easy to understand.

AutoLayout – An Overview

Serving as a constraint-based layout system, Auto Layout allows you to create a highly adaptive user interface that switches in accordance to the varying device orientations and screen sizes. As one of the most stunning features of iOS, Auto Layout offers you a fabulous way for managing the positioning and sizing of all controls that are being incorporated into the app’s user interface. The flexibility of Auto Layout opens doors to a massive amount of customization that helps in delivering a perfect user interface. One of the greatest advantages of Auto Layout is that it’s compatible with a large number of application programming interfaces(APIs) such as motion effects, animations and sprites.

Now, some steps that mark the usage of Auto Layout for designing UI of an iOS application

Step 1- Enable/Disable Auto Layout in Interface Builder

Auto Layout feature comes enabled by default, both for the individual XIB files as well as the storyboard. On the contrary, for a situation wherein you need to enable it, all you need to do is simply follow the below steps:

  • Select the Main-storyboard file from the project navigator panel
  • Display the File Inspector panel by following the route: View-> Utilities-> Show File Inspector
  • Select the checkbox named as: Use Autolayout

Step 2- Create a constraint

In order to use the Auto Layout feature, you need to create a constraint using any one of the following two methods:

  • constraintsWithItem: attribute: relatedBy: toltem: attribute: multiplier: constant:
  • constraintsWithVisualFormat:options:metrics:views:

For those of you who aren’t familiar with the concept of constraints, here’s an explanation. Constraints are linear equations which when coupled together flawlessly describe the layout of an iOS app’s user interface. All the constraints used in an app’s UI basically belong to the NSLayoutConstraint class which specifies the relationship between different view attributes including height, position, width and the centers.

Coming back to the topic of creating constraints, while creating them, you need to pay special attention to adjusting them on different layouts. Although a majority of constraints must be constructed on AnyWidth| Any Height layout, you can always use Storyboard preview to check if the constraints are positioning different Objects correctly or not. On detecting an incorrect positioning of a constraint, you can try adjusting it for other layouts including Compact Width|Regular Height, Compact Width| Any Height and many more.

PS- For a UI element, you won’t be able to set the constraints from both, xib and in code. Here, you need to either use the xib approach or the coding approach for adding the desired constraints.

Step 3- Group the UI elements together

With a large number of UI Objects occupying specific spaces within your layout, it is important for you to group them appropriately. Failure to group the UI objects may lead to their positioning in an distorted format.

A handy method of grouping UI objects inside a view is:

  • Select the elements that you intend to group
  • Now, go to Editor-? Embed In-> View
  • Centralize the new superview of the UI Objects as per your specific preference


So, this is all from my side on creating intuitive UIs for iOS apps using Auto Layout feature. Hope you’d have followed the steps covered above. If you have any questions regarding the use of iOS’s Auto Layout feature, then please don’t hesitate in jotting down the same within the comments box provided right under this blog post.

Author Bio: Rick Brown is a veteran iPhone mobile application developer for Mobiers Ltd – a leading iOS apps developing company. In case, you want to dig-out more information about the services or process, do get in touch with him.


Leave a Reply