Auto Layout is feature of Xcode for creating a dynamic and versatile user interface that responds appropriately to changes in screen size, device orientation. This is possible because Auto Layout uses constraints to define relationships between the user interface controls. In this workshop you learn how to use Auto Layout to add constraints to an app’s user interface controls.
Before you begin, I assume you’ve done the follow tasks.
1. You downloaded and installed the latest version of Xcode on you iMac. At the time of this post the latest version of Xcode is Xcode6-Beta7. If you are member of the iOS Developer program, which cost $99/year you can download it via the Apple Developer Swift Resources page.
2. You downloaded this iOS project, Workshop27 and launched it in Xcode.
By the way, I created the Workshop27 project by using the template and project options shown in the image below. Since I selected “Universal” from the Devices menu; the Workshop27 application will run on any size iPhone devices and iOS Simulators. The app will also run on any size iPad devices and iOS Simulators. Further more, the only file you will modify in this workshop is the Main.storyboard.
3. Switch off the Size Classes control in Interface Builder. It is located below the storyboard scene and it look like this:
Here are the steps to switch off the Size Classes control:
- In the Project Navigator panel, click the Main.storyboard file.
- In the Utility panel, click the File Inspector icon, then uncheck the Use Size Classes checkbox-see image below. From the pop up dialogue window, click the Disable Size Classes button. The canvas changes to reflect the 4″ iPhone size.
Design The App’s Users Interface
Now, that you’ve switch off the Size Classes control, configure Xcode’s workspace to display the Document Outline panel, Interface Builder Window, the Assistant Editor window, and the Attribute Inspector. Now, to display previews of the 4″ iPhone device and the 3.5″ device in the Assistant window, click the + button in the lower left corner of the Assistant Editor window. Select the device from the menu. When you are done configuring Xcode’s workspace, it should look something like this:
Now, design the storyboard scene by adding two Labels, a Picker View, and a Button control on the canvas. Modify the controls so they look like this:
To zoom the Interface Builder window or the Assistant editor window, use pinch gesture on your track pad. To rotate the 3.5″ or 4″ iPhone device preview in the Assistant editor from portrait orientation to landscape orientation (and vice versa); hover your mouse over a device preview in the Assistant editor window, then click the rotation button that appear below the device preview. It look like this: 
The Landscape Orientation Layout Issues
In portrait orientation the device previews look just fine in the Assistant editor window. When you flip the device previews to landscape orientation, you see these layout issues:
The label controls do not stretch all the way to the right edge of the view.- The Picker View control does not stretch all the way to the right edge of the view.
Fixing The Landscape Orientation Issues
To fix the landscape orientation layout issues, you have to use the Auto Layout Bar’s Issues button. The Auto Layout Bar is for adding constraints to a layout. It is also used for changing properties of constraints. The Auto Layout Bar is located in the bottom-right-hand corner of Interface Builder. The image below shows what it look like and as you can see, it has four buttons.
Auto Layout Menu
- Align. This button enables you to create alignment constraints, such as centering a view in its container, or aligning the left edges of two views.
- Pin. This button enables you to create spacing constraints, such as defining the height of a view, or specifying its horizontal distance from another view.
- Issues. This button enables you to resolve layout issues by adding or resetting constraints based on suggestions.
- Resizing. This button enables you to specify how resizing affects constraints.
The diagram shown below list three constraints rules and demonstrate graphically how the they work.
To fix the landscape orientation layout issues, you have to do the following:
Click the View Controller object in the Document Outline panel. Click the Auto Layout Bar’s Issues button. From the pop up menu, select “Add Missing Constraints”.
Xcode add constraints to each control and they show up as blue vertical bars in Interface Builder. Now, take a look at the device previews in landscape orientation; as you can see, the layout issues are gone.
That’s it you’ve fixed the landscape orientation layout issues by using the Auto Layout Bar’s Issues button to add missing constraints to each controls that’s on the storyboard scene.
Test The View in The iOS Simulators
The Assistant editor does a good job of showing layout issues and testing the application’s views; however you should still test the application’s view in the iPhone and iPad Simulators.
When you run the app in the iPhone 5s Simulator, the application’s view look like:
As you can see in above images, the layout issues are still there. To fix them, return to Xcode IDE and do the following:
Click the Stop button to stop running the app in the iOS Simulator. In the Document Outline, expand the Constraints item and adjust the width of the Document outline. Now, delete the constraint highlighted in this image.
What you have to do now is add a constraint to each Label control. Start by control-drag the first label control right until the View object is highlighted.
Release your mouse and select “Trailing Space to Container Margin” from the pop up menu.
Repeat above steps to add a “Trailing Space to Container Margin” for the second label control.
Now, test the app’s view in the iPhone and iPad Simulators once again. Here’s what the view will look like in the iPhone 5s simulator, in portrait and landscape orientation.
That’s it. Now you know how to use the Auto Layout menu to add constraints to storyboard layout.
No responses yet