34,333
edits
Changes
no edit summary
[[Image:xcode_8_use_auto_layout_control.png]]
Figure 19-1
[[Image:xcode_8_disable_trait_variations.png]]
Figure 19-2
[[Image:xcode_6_auto_layout_portrait_label.png]]
Figure 19-3
[[Image:xcode_8_view_as_button.png]]
Figure 19-4
[[Image:xcode_8_change_device_orientation.png]]
Figure 19-5
[[Image:ios_8_auto_layout_landscape.png]]
Figure 19-6
[[Image:xcode_6_auto_layout_pin_menu.png]]
Figure 19-7
[[Image:xcode_6_set_nearest_neighbor.png]]
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]]
Figure 19-9
[[Image:xcode_6_autolayout_landscape.png]]
Figure 19-10
[[Image:xcode_6_resolve_auto_layout_issues.png]]
Figure 19-11
[[Image:ios_8_interfacebuilder_constraints.png]]
Figure 19-12
[[Image:ios_8_greater_or_less_constraint.png]]
Figure 19-13
[[Image:ios_8_auto_layout_width.png]]
Figure 19-14
[[Image:iso_8_auto_layout_confict.png]]
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]]
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