Apple just introduced the new iPhone 6 (4.7in) and iPhone 6 Plus (5.5in). These are two additional sizes to the existing iPhone 4 (3.5in), iPhone 5 (4in), and iPad (9.4in). As iOS developers we have long enjoyed not having to develop for too many different screen sizes, unlike Android, until now. With this many screens available, your apps need to be flexible enough to work on all of them or Apple may reject it or even worse, users will complain it doesn’t work for them on their device.
Below is a simple tutorial to help you with adding constraints to your views using Storyboards, without having to write any code. This is helpful for handling auto rotation as well.
Designing an Interface using Constraints
- Make a new project based on the Single View Application template, and name it AutoLayout.
- Select Storyboard to edit the interface. One nice thing about using constraints is that they accomplish quite a lot using no code. All of the auto layout implementation can be done right here in the Storyboard.
- Add four labeled buttons. Drag four round rect buttons from the library over to your view. Use the dashed blue guidelines to help you line up each one near its respective corner. Double-click each button, and assign a title to each one so you can tell them apart later.
- Run It. Let’s see what happens now that we’ve specified that we support autorotation but haven’t set any autosize attributes. Build and run the app. Select Hardware Rotate Left, which will simulate turning the iPhone to landscape mode. Notice that all of the buttons except for the top left one is off the screen. We need to fix this.
- The image below shows an example of the Auto Layout Menu. You’ll find this in the bottom right of the Storyboard. First select which view you want to modify, then choose one of the buttons to modify it’s layout properties.
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.
Issues – Resolve layout issues.
Resizing – Specify how resizing affects constraints.
© Copyright 2014 AppCoda
- Let’s add our constraints. Click the upper-left button to select it. Choose the Pin button to change constraints for the button. Add 20px to the top and 0px to the left. Then press the “Add 2 Contraints” button to make the change.
- You’ll see that the constraints are now set by the blue lines now displayed when the button is selected. You may not see blue lines for the top left button since all constraints for that location are by default.
- Now do the same for the other three buttons.
- Run it and look at the results. Each button stuck tight to its nearest corner. The buttons on the right shifted out to the right to match the view’s new width, and the buttons on the bottom were pulled up to match the new height.
You can grab the full source code for this tutorial. Note: Built for XCode6-Beta7.
Additional Tips for using Auto Layout
Use Auto Layout to lay out your views relative to each other without fixed origins, widths, and heights, so that views reposition and resize appropriately when the language or locale changes. Auto Layout makes it possible to have one set of .storyboard and .xib files for all devices.
Remove fixed width constraints. Allow views that display text to resize. If you use fixed width constraints, text may appear cropped in some views.
Use intrinsic content sizes. The default behavior for text fields and labels is to resize automatically. If a view is not adjusting to the size of text, select the view and choose Editor > Size To Fit Content.
Use leading and trailing attributes. When adding constraints, use the attributes leading and trailing for horizontal constraints. The attributes leading and trailing are equivalent to left and right. The leading and trailing attributes are the default values for horizontal constraints.
Pin views to adjacent views. Pinning causes a domino effect. When one view resizes to fit text, other views do the same. Otherwise, views may overlap in some devices.
Constantly test your layout changes. Test your app using different device sizes, like iPhone 4, iPhone 5, iPhone 6, iPhone 6 Plus, and iPad.
Don’t set the minimum size or maximum size of a window. Let the window and its content view adjust to the size of the containing views.
Auto Layout is enabled by default when you create a new project. To enable Auto Layout for an older project, select the first view of the View Controller, then select the File Inspector (first one on the left) and make sure the “Use Auto Layout” check mark is selected.
