34,333
edits
Changes
→Enabling and Disabling Auto Layout in Interface Builder
{{#pagetitle: Working with iOS 10 Auto Layout Constraints in Interface Builder }}
<seo title="Working with iOS 10 Auto Layout Constraints in Interface Builder" titlemode="replace" keywords="ios 10, swift 3, auto layout, interface builder, xcode 8" description="A detailed guide to using Auto Layout constraints within Interface Builder to design flexible and adaptive iOS user interface layouts"></seo>
<table border="0" cellspacing="0" width="100%"><tr>
<td width="20%">[[An Introduction to Auto Layout in iOS 8|Previous]]<td align="center">[[iOS 8 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iOS 8 Auto Layout Example|Next]]</td>
== Enabling and Disabling Auto Layout in Interface Builder ==
<htmlet>adsdaqbox_flow</htmlet>
By default, Auto Layout is switched on for user interface design files, both for storyboard and individual XIB files. Begin by selecting the Main.storyboard file from the project navigator panel and select the main scene (the main scene in a storyboard can be identified by the arrow pointing to the left side) before displaying the File Inspector panel (View -> Utilities-> Show File Inspector). Located within this inspector is an option labeled Use Auto Layout as illustrated in Figure 19-1.
[[Image:xcode_8_use_auto_layout_control.png|Enabling Auto Layout in Xcode]]
Figure 19-1
Below the Use Auto Layout option is another item titled Use Trait Variations. Trait Variations enable different Auto Layout settings to be configured for different device screen sizes from within a single storyboard file. So that this chapter can focus solely on Auto Layout, and to avoid the confusion of learning two concepts at once, turn off the Use Trait Variations option for this project.
When the confirmation panel appears (Figure 19 -2), verify that the Keep size class data for menu is set to iPhone before clicking on the Disable Trait Variations button. Rest assured that trait variations and their relationship to Auto Layout constraints will be covered in considerable detail in the chapter entitled [[Using Trait Variations to Design Adaptive iOS User Interfaces]].
[[Image:xcode_8_disable_trait_variations.png|Disabling Trait Variations in Xcode]]
Figure 19-2
[[Image:xcode_6_auto_layout_portrait_label.png|An iOS view in portrait mode]]
Figure 19-3
[[Image:xcode_8_view_as_button.png|the Xcode Interface Builder View as button]]
Figure 19-4
[[Image:xcode_8_change_device_orientation.png|Changing the view layout orientation in Xcode Interface Builder]]
Figure 19-5
[[Image:ios_8_auto_layout_landscape.png|A view in Landscape orientation]]
Figure 19-6
[[Image:xcode_6_auto_layout_pin_menu.png|The Xcode Auto Layout Add New Constraint button]]
Figure 19-7
[[Image:xcode_6_set_nearest_neighbor.png|Setting a nearest neighbor auto layout constraint]]
Figure 19-8
Having added a constraint, Auto Layout now knows that the bottom edge of the label must always be positioned a fixed distance from the bottom edge of the containing superview. The layout is still missing a constraint to designate the horizontal position of the label in the superview. One way to add this constraint is to make use of the Align menu. With the label still selected in the view canvas and the Align menu panel displayed, enable the checkbox next to the Horizontally in Container property (Figure 19-9). Since no offset from the center is required, leave the offset value at 0.
[[Image:xcode_6_align_set_center_horizontal.png|The Xcode Auto Layout Algn menu]]
Figure 19-9
[[Image:xcode_6_autolayout_landscape.png|The layout with correct Auto Layout constraints on the label]]
Figure 19-10
[[Image:xcode_6_resolve_auto_layout_issues.png|The Xcode Resolve Auto Layout Issues menu]]
Figure 19-11
[[Image:ios_8_interfacebuilder_constraints.png|Auto Layout constraints displayed in Interface Builder]]
Figure 19-12
[[Image:ios_8_greater_or_less_constraint.png|An example Auto Layout configuration]]
Figure 19-13
[[Image:ios_8_auto_layout_width.png|An example Auto Layout configuration]]
Figure 19-14
[[Image:iso_8_auto_layout_confict.png|Conflicting iOS Auto Layout constraints]]
Figure 19-15
<htmlet>ios10</htmlet>
The layout canvas does not dynamically update the positions and sizes of the views that make up a user interface as constraints are added unless an option is selected from the Update Frames menu within the Auto Layout Add New Constraints or Align menus. It is possible, therefore, to have constraints configured that will result in layout behavior different to that currently displayed within the canvas. When such a situation arises, Interface Builder will draw a dotted orange outline indicating the actual size and location of the frame for the currently selected item. This is, perhaps, best demonstrated with an example. Within the AutoLayoutExample project, add a Text Field object to the layout so that it is positioned near to the top of the view and to the right of the horizontal center as shown in Figure 19 -16:
[[Image:xcode_6_auto_layout_text_view.png]]
Figure 19-16
[[Image:xcode_6_autolayout_frame_update.png|An example layout with misplaced frames]]
Figure 19-17
To reset the view to the size and position dictated by the constraints when using Xcode 8.1 or later so that the canvas matches the runtime layout, simply select the Text View object and click on the Update Frames button located in the Interface Builder status bar as highlighted in Figure 19-18. For Xcode 8.0, use one of the Update Frames options contained within the Resolve Auto Layout Issues menu:
[[Image:xcode_8_update_frames.png|The Xcode auto layout update frames button]]
Figure 19-18
[[Image:xcode_6_frames_updated.png]]
Figure 19-19
[[Image:xcode_8_document_outline_button.png|Show the Xcode Document Outline panel]]
Figure 19-20
Within this outline, a category listed as Constraints will be present which, when unfolded, will list all of the constraints currently configured for the layout. Note that when more than one container view is present in the view hierarchy there will be a separate constraints list for each one. Figure 19 -21, for example, lists the constraints for the user interface represented in Figure 19-12 above:
[[Image:xcode_6_auto_layout_contraint_outline.png|Listing constraints in the Xcode document outline panel]]
Figure 19-21
[[Image:xcode_7_edit_constraint.png|Editing a constraint]]
Figure 19-22
[[Image:xcode_7_edit_constraint_properties_2.png|The attributes of an iOS horizontal spacing constraint]]
Figure 19-23
[[Image:xcode_7_all_constraints_on_view.png|Editing an Auto Layout constraint]]
Figure 19-24
[[Image:xcode_7_interface_builder_contraint_popup.png|Setting a spacing constraint in Xcode]]
Figure 19-25
[[Image:xcode_7_interface_builder_aspect_ratio.png|Setting aspect ratio constraints in Xcode]]
Figure 19-26
[[Image:xcode_6_autolayout_warnings.png|Xcode layout warnings]]
Figure 19-27
[[Image:xcode_6_auto_layout_problems.png|Xcode warning of layout problems]]
Figure 19-28
[[Image:xcode_6_auto_layout_problem_details.png|Reviewing Auto Layout problems in Xcode]]
Figure 19-29
[[Image:xcode_6_autolayout_problem_solution.png|Resolving auto layout problems in Xcode]]
Figure 19-30
