34,333
edits
Changes
no edit summary
{{#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>
[[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
[[Image:xcode_6_autolayout_frame_update.png|An example layout with misplaced frames]]
Figure 19-17
