Introducing Auto Layout iOS For Creating Adaptive Interfaces in Mobile Apps

Introducing Auto Layout iOS For Creating Adaptive Interfaces in Mobile Apps
Rate this post


Did you ever felt irritated trying to make your app look perfect in both landscape and portrait orientation? If you’ve been using Xcode 6, then you might have noticed the change in Interface builder right? Well the default view controller is now wider. But the solution for this is iPhone app auto layout iOS.

What is Auto Layout?

Auto layout dynamically calculates the position and size of all the views in your view hierarchy, based on the constraints placed on those views.

For instance, a UIView is in the center of the ViewController. So it should be in the center in all screen sizes differing from iPhone to iPads.

However, there are still many developers who hate the auto layout, but maybe it’s because it’s relatively new. And since it’s new, developers find it hard to use for the first time. So if you’re also one of these developers, don’t worry because once you get comfortable with it, auto layout will become one of your favourite tools that you can’t live without when building a iOS app.

Why Auto Layout?

Auto layout is a right way to build interface by defining relationships among app’s elements. The auto layout iOS provides a powerful and flexible system which explain how views and UI controls relate to each other.

By using auto layout in your app, you can get complete control over your app layout, with a vast range of customization.

In this interface builder tutorial, we’ll create one app to demonstrate how exactly you can use the auto layout tool.

Let’s Get Started

First of all, create a new project under file menu and choose ‘Single View Application’.



now go to Main.StoryBoard, you’ll see in right side Inspector -> Interface Builder Document which have checkmark on “Use Auto Layout” that indicates all the views should be managed by AutoLayout.


find a menu at bottom-right corner.

The buttons in the menu are related to Auto Layout. You can use for alignment, sizing, spacing and resolving constraint issue.

  • 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.
  • Resolve Auto Layout Issue – Resolve layout issues.


For our first practice we take a UIView in ViewController.

Now we click on PIN and it will open a popup window you can see in below images.


Once the popup appear, then we will add all four constraint by clicking it from popup.


it will also display the selected constraint count on bottom button of the popup window,

for instance, Blow image showing “Add 4 Constraints”.


now when you click on it, the constraint will be added to your selected view.


next, when yo run the demo, you will see that due to AutoLayout, it will manage Top, Bottom, Left and Right margin accordingly in Portrait and Landscape mode.


For fixed height and width

add a UILabel in UIView in existing.


click on PIN again.


Check mark width and height check box for fix the height and width of Label as per given below image.

Also add Top constraint from PIN for add margin.


Now here it will show red icon in top left which says there is something missing in constraint.
It is x coordinate of label.

So to remove this red warning, go to ALIGN section as per given below and select “Horizontally in Container”


It will set x position center of container.

Once all the issue fixed you can see all given constraint to Label.


Now when yo run project, you can see label will be shown with fixed Height and Width with given margin(Top).



For Leading and Trailing

To give same margin to a multiple views we user Leading and Trailing constraint.

For that add multiple UILabels in existing view.

Add Top, Left and Right Margin from PIN popup window.


Then select all another Labels and Drag that to first label. It will open a popup window like given below.



Now select Leading and Trailing from the popup window and then add constraint.

It will effect that all selected label’s margin of Left and Right should be similar to first label.

Now you can resolve missing constraint issue from “Resolve Auto Layout Issue” option.



Now when you run project, you can see all label will be shown with same margin(from Left and Right)



For Horizontal and Vertical

For this, just add and view in existing view and add fixed width and height first.

Now go to ALIGN and select “Horizontally in Container” and “Vertically in Container” and add constraints.


it will keep view in center of its superview.

And done!

We have covered the basics of auto layout in this interface builder tutorial. Still, if you face any difficulty implementing it, you can contact our developers for help.

As mentioned in the introduction, the auto layout is a very powerful tool and with it, you can develop adaptive UI of your iPhone application that fit multiple screen sizes. So if you’re planning on building any kind of mobile app, make sure to use auto layout tool. Even if you need help, hire iPhone app developer because it has become one of those must-have things that help you in a long run.

Grab a free copy of auto layout iOS demo from Github.


Want to Develop Adaptive iPhone Apps? Contact Us Now