Auto Layout on Xcode 5

Auto Layout(Xcode 5)

Seeing this view with all the lines will make you freak out.

Xcode 4

There is a rumor that iPhone 6 will have a new size 4.7 and 5.5 inch.

Imagine how you will handle the different screen sizes

Autoresizing Mask

Autoresizing mask can help us with our views but it’s too limited.

Auto Layout To The Rescue!

Auto Layout is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements.

You define these relationships in terms of constraints either on individual elements, or between sets of elements.

What is Auto Layout?

1. It allows for more flexible layouts when dealing with multiple screen sizes, interface orientations, and languages.

2. You won’t do a lot of coding for layout.

Why use Auto Layout?

Auto Layout on Xcode 5Auto Layout is enabled by default. When you add an object in your xib in Xcode 4, constraints(T-bars) appear immediately. We tend to disable auto layout because it looks frustrating.

Apple knows it. That’s why in Xcode 5, even though Auto Layout is enabled, and you’re not creating any constraints, the T-bars will not appear.

Auto Layout on Xcode 5

In Auto Layout, if you set your button in that position and added constraints, you are telling xcode that the button is on the top-right position of the view, regardless of its orientation or screen size.

When setting the button position without auto-layout, you can set its position in the xib. But what if you change the orientation to landscape or you have a different screen size? You have to write code to set its position.

Add Constraints

There are 3 ways to add constraints.● From the toolbar● Using Interface Builder● By Dragging Objects

Toolbar

Editor Menu is used for auto layout. Just select the object on the view and select from the editor which constraints you want to add.

Interface BuilderOn the bottom part of IB, there are four buttons for auto layout.● Align● Pin ● Resolve Auto Layout Issues● Resizing BehaviorIt has the same content as the Editor Menu

Interface Builder

Align

Interface Builder

Pin

Interface Builder

Resolve Auto Layout Issues

Interface Builder

Resizing Behavior

Dragging Object

You can also add constraints by dragging the object to another object, then a menu will popup and you can select which constraints you want.

Orange and Blue

Orange Line

When you add constraints on your object, an orange line will appear. This means that xcode cannot identify or compute the position of that object. Xcode needs more constraints to get more information on that object.

Blue Line

If the T-bar is blue, it means that xcode has sufficient information about the object.

Orange LineWhen you manually adjust the position of an object that already has constraints, an orange line will appear. This means that there is an error. You can solve this by using the Resolve Auto Layout in Editor Menu.

Select Editor > Resolve Auto Layout Issues > Update Constraints

Reference:

https://developer.apple.com/videos/wwdc/2013/

http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1

http://www.raywenderlich.com/50319/beginning-auto-layout-tutorial-in-ios-7-part-2