Auto Layout Updates in iOS 7

Written by: on September 18, 2013

Introduced in iOS 6, Auto Layout is a mechanism for automatically positioning and resizing the UI elements in your views.

By applying a series of constraints, such as “put this view 8 points to the right of that view” to each view in your storyboards, every element is stretched and moved until all constraints are satisfied.

Auto Layout helps reduce the amount of work you have to do handle dynamic text sizing (including iOS 7’s new font scale), rotation, view containment, different screen sizes, and going from iPhone to iPad layouts.

Few functional or API-level changes were introduced in iOS 7 for Auto Layout, however, new tools in Xcode significantly streamline your ability to add constraints and verify the system of constraints you add to a view can all be satisfied.

All interface files created in Xcode default to using Auto Layout. To turn Auto Layout on within a document, open the interface document in Xcode, Choose View > Utilities > Show File Inspector, and select the “Use Autolayout” option. Interface files that have Auto Layout turned off end up using Auto Layout under the hood. When a view is created, fixed height, width, and placement constraints are created for all views if no constraints exist.

To add a constraint to an item in your interface document, Control-drag from one item to another; a pop-up enables you to select one or more constraints to add between the selected items. You can edit the values of a constraint by selecting it and editing the relationship type (Equal, Greater Than, etc.) and constant for the constraint in the Inspector.

New to Xcode 5 are the Align, Add New Constraints, and Update Frames panels. Select two or more items, then open the Align panel to add constraints for aligning the edges or centers of those items. Select one or more items, then open the Add New Constraints panel to add constraints to those items, including Height and Width, and distance to nearest neighbor constraints.

Auto-Layout-iOS-7Auto-Layout-Alignment-Constraints

Xcode 5 now also tells you—before you run your code—whether the constraints you’ve added can’t be fully satisfied. If they can’t, the new Layout Issues panel shows a list of missing or invalid constraints and allows you to quickly add new constraints, remove constraints, or update constraints to make the system of constraints valid.

In addition to the errors panel, Xcode 5 adds an Add Missing Constraints menu, which quickly adds constraints to a view or updates the position and size of items in the interface file to match the final values (after applying all constraints). To migrate from an interface file that doesn’t have Auto Layout turned on, a good place to start is by using this menu to Reset to Suggested Constraints, then update from there rather than starting from scratch.

Auto-Layout-Figure-3

In order to handle both legacy layouts and layouts that support iOS 7’s translucent status bars, navigation bars, toolbars, and tab bars, iOS 7 can automatically adjust the scroll view insets on views. If this is turned on, either in the view’s Inspector or in code via a UIViewController’s automaticallyAdjustsScrollViewInsets property, the view controller adjusts scroll view insets within its views to allow for the screen areas consumed by the status bar and any toolbar, tab bar, or navigation bar in the view. Additional properties allow selective behavior, allowing you to dictate this only happen for top bars (status, navigation, and top bar toolbars) or bottom bars (tab bars and bottom bar toolbars).

UIViewController’s wantsFullScreenLayout property is deprecated under iOS 7, and its value is ignored, whether set in the interface file or directly in code. All view controllers are now full screen. If you’re using Auto Layout in your app, you likely won’t notice this change. If you’re manually laying out views by manipulating bounds and had this option turned off in your views, you may have some headaches reworking your code to work.

Once you’ve applied your constraints to a view, you can see how the view will lay out in a variety of situations using Xcode 5’s new Preview feature. In the Assistant editor’s location bar, select Preview > your file to view the preview of the interface file. Using the controls, you can see how the items in the view will look under iOS 6 and iOS 7, in landscape or portrait mode, and under 3-1/2 inch and 4-inch iPhone screens.

This preview is live, reflecting changes in the interface file immediately, allowing for rapid experimentation and updates.

Auto-Layout-Figure-4

This is the fourth in an 11-part Developer’s Guide to iOS 7. You can find the full guide here. For more information on how Double Encore can help you prepare your company for the changes in iOS 7, please email us.

Kevin Tatroe

Kevin Tatroe

Kevin Tatroe is a Software Engineer at Double Encore, specializing in iOS Development. Kevin is a published author and very active in the Cocoa community.
Article


Add your voice to the discussion: