Introducing Auto Layout iOS For Creating Adaptive Interfaces in Mobile Apps

Creating Auto Layout for iOS

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 in iOS 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 iOS 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 favorite 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 iOS auto layout 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’.

create a new project

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.

Use Auto Layout

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.

Resolve Auto Layout Issue

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.

click on PIN

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

add all four constraint

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

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

Add 4 Constraints

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

add constraint in 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.

manage AutoLayout

manage AutoLayout in iOS
For fixed height and width

add a UILabel in UIView in existing.

add a UILabel in UIView

click on PIN again.

click on PIN

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.

add Top constraint from PIN

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”

Horizontally in Container

It will set x position center of container.

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

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).

see label with fixed height and width

label with fixed height and width in iOS

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.

add 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.

select all another Labels

select Leading and Trailing from popup window

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.

Resolve Auto Layout Issue

resolve missing constraint issue

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

see all label with same margin

see all label with same margin in iOS

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.

For Horizontal and Vertical margin

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

Get your free consultation now

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Your Free Quote