Tagged:

In this tutorial or demo, we will see about how to use AutoLayout for UI Design of iOS application using Storyboard. To know more about AutoLayout and how to use it for UI design using constraints programmatically, pl. click here.

Lets go through the demo of using Storyboard with AutoLayout. We will take the same layout example as we saw in earlier tutorial.

Create a new project and keep AutoLayout enabled.

Autolayout_image3

You will find three toolbars at the bottom of view controller. You can add constraints using highlighted (middle) toolbar. The left most button of middle toolbar allows to set alignment related constraints, second button is used to set constraints for spacing, third button from left is used to resolve conflicting constraints.

To know more about how to resolve warnings and conflicting constraints refer the below link :

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/…

Lets go-through the demo or example.

Drag and drop two buttons. Place them on top of the screen. Now select a button which is on the left side. Click on the second button from middle tool bar that is at the bottom of the storyboard. You will find a pop-up similar to below image.

Autolayout_image4

On upper part of popup you will find spacing to nearest neighbor. Set left space and top space to 20. After setting space you will see both dotted red lines are now highlighted. That indicates a constraint is created for element. Now click on “Add Constraint” button at the bottom of the pop up. This will add all created constraints to a selected element.

Similarly set top and left space to 20 for the right side button. Now when you select both the buttons, it should look like this:

Autolayout_image5

You will see a blue line on two side of each button. That shows all constraints applied on a specific element.