== Enabling and Disabling Auto Layout in Interface Builder ==
By default, Auto Layout is switched on for user interface design files, both for storyboard and individual NIB files. Begin by selecting the MainStoryboard.storyboard file from the project navigator panel and then display the File Inspector panel (''View -> Utilities-> Show File Inspector''). Located within this inspector is an option labeled Use Autolayout as illustrated in Figure 1016-1:
[[Image:ios6_enable_disable_autolayout.png|Turning off iOS 6 Auto Layout]]
Figure 1016-1
[[Image:iphone_ios6_autolayout_portrait.png|iOS 6 Auto Layout view in portrait mode]]
Figure 1016-2
A problem arises, however, when the device rotates to landscape orientation. This can be demonstrated by compiling and running the application on a physical iPhone device or iOS Simulator in the usual way. Alternatively, the effect of an orientation change can be tested within the Interface Builder environment using a feature known as simulated metrics. Within the Document Outline panel (located to the left of the storyboard canvas panel), select the Auto Layout View Controller entry in the Auto Layout View Controller Scene box and, with the entry selected, display the Attributes Inspector in the Utilities panel on the far right. Under the Simulated Metrics heading, locate the Orientation option and change the menu setting from Portrait to Landscape as outlined in Figure 1016-3. Similarly, the layout behavior of the user interface on different screens may be tested using the Size setting. For example, the appearance on the 4 inch iPhone 5 screen can be tested by setting the Size menu to Retina 4 Full Screen.
Whilst this is a useful and quick way to check that the layout is working as intended, it is important to note Interface Builder does not output any diagnostic information in the event that constraints are invalid or conflict with each other. If the layout is not behaving as intended in Interface Builder, build and run the application either on a physical device or the simulator and check the console log for warnings about unsatisfiable or conflicting constraints.
[[Image:iphone_ios6_simulated_metrics.png|Xcode iOS 6 Simulated Metrics]]
Figure 1016-3
[[Image:iphone_ios6_autolayout_landscape.png|Auto layout - view in landscape]]
Figure 1016-4
As is evident from the previous example, Interface Builder will automatically set constraints on views as they are added to a layout and will continue to add and remove constraints as necessary as changes are made to the layout during the design process. It is important to understand that there is a distinction between constraints added automatically by Interface Builder and those added manually by the developer. In fact, constraints added manually are referred to as user constraints. As will be demonstrated later in this chapter, constraints added by Interface Builder may be removed by first promoting them to be user constraints. User constraints may also be configured for standard spacing as will be demonstrated later in this chapter.
The way that a view is positioned on the layout will also dictate how an Interface Builder constraint is configured. Moving the view to the center of the parent view will cause center guidelines to appear. Dropping the view at that point will result in a center constraint being created. Moving a view close to the edge of the window view will result in a margin guideline appearing as illustrated in Figure 1016-105. If placed at that location, Interface Builder will implement a constraint that fixes the corresponding edge of the view from the edge of the display using the Apple recommended standard spacing distance.
Figure 1016-5
The same standard setting will also be implemented if one view is moved close to the edge of another view as indicated by the vertical guide that appears on the edge of the view approaching the second view. This guide is visible on the right hand edge of the Save button in Figure 10 16-6 as it is moved close to the Cancel button:
[[Image:iphone_ios6_autolayout_spacer_standard_guide.png|The interface builder auto layout standard spacing indicator]]
Figure 1016-6
=== Visual Cues ===
Interface Builder includes a number of visual cues in the layout canvas to highlight the constraints currently configured on a view. When a view is selected within the Interface Builder layout canvas, the constraints that reference that view will be represented visually. Consider, for example, the label view created in our AutoLayout example application. When selected in the canvas, a number of additional lines appear as shown in Figure 1016-7:
[[Image:iphone_ios_6_auto_layout_center_horiz.png|Auto Layout center constraints]]
Figure 1016-7
</pre>
The I-beam line running from the bottom edge of the label view to the bottom edge of the parent view indicates that a vertical space constraint is in place between the two views. The absence of any additional visual information on the line indicates that this is an equality constraint. Figure 1016-8 shows an example of a “greater than or equal to” horizontal constraint between two button views:
[[Image:iphone_ios_6_inequal_constraint.png|Views with Auto Layout unequal constraint]]
Figure 1016-8
The horizontal line running beneath the Button label text indicates that constraints are in place to horizontally align the content baseline (represented by NSLayoutAttributeBaseline) of the two buttons. It should also be noted that the horizontal space constraint line is drawn thicker and bolder than the horizontal alignment line. The heavier line indicates that this is a user constraint whilst the narrow line indicates a constraint added automatically by Interface Builder.
Width constraints are indicated by an I-beam line running parallel to the edge of the view in the corresponding dimension. The text view object in Figure 1016-9, for example, has a “greater than or equal to” width constraint configured:
[[Image:iphone_ios_6_autolayout_width.png|A view with a greater than or equal to Auto Layout constraint]]
Figure 1016-9
=== Viewing and Editing Constraints Details ===
Exception encountered, of type "Error"
[8e385911] /index.php/Special:MobileDiff/15267 Error from line 434 of /home/techotopia/includes/diff/DairikiDiff.php: Call to undefined function each()
Backtrace:
#0 /home/techotopia/includes/diff/DairikiDiff.php(544): DiffEngine->diag()
#1 /home/techotopia/includes/diff/DairikiDiff.php(344): DiffEngine->compareSeq()
#2 /home/techotopia/includes/diff/DairikiDiff.php(227): DiffEngine->diffLocal()
#3 /home/techotopia/includes/diff/DairikiDiff.php(721): DiffEngine->diff()
#4 /home/techotopia/includes/diff/DairikiDiff.php(859): Diff->__construct()
#5 /home/techotopia/includes/diff/DairikiDiff.php(980): MappedDiff->__construct()
#6 /home/techotopia/extensions/MobileFrontend/includes/diff/InlineDiffFormatter.php(99): WordLevelDiff->__construct()
#7 /home/techotopia/includes/diff/DiffFormatter.php(140): InlineDiffFormatter->changed()
#8 /home/techotopia/includes/diff/DiffFormatter.php(82): DiffFormatter->block()
#9 /home/techotopia/extensions/MobileFrontend/includes/diff/InlineDifferenceEngine.php(117): DiffFormatter->format()
#10 /home/techotopia/includes/diff/DifferenceEngine.php(797): InlineDifferenceEngine->generateTextDiffBody()
#11 /home/techotopia/includes/diff/DifferenceEngine.php(728): DifferenceEngine->generateContentDiffBody()
#12 /home/techotopia/extensions/MobileFrontend/includes/specials/SpecialMobileDiff.php(241): DifferenceEngine->getDiffBody()
#13 /home/techotopia/extensions/MobileFrontend/includes/specials/SpecialMobileDiff.php(135): SpecialMobileDiff->showDiff()
#14 /home/techotopia/extensions/MobileFrontend/includes/specials/MobileSpecialPage.php(53): SpecialMobileDiff->executeWhenAvailable()
#15 /home/techotopia/includes/specialpage/SpecialPage.php(384): MobileSpecialPage->execute()
#16 /home/techotopia/includes/specialpage/SpecialPageFactory.php(553): SpecialPage->run()
#17 /home/techotopia/includes/MediaWiki.php(281): SpecialPageFactory::executePath()
#18 /home/techotopia/includes/MediaWiki.php(714): MediaWiki->performRequest()
#19 /home/techotopia/includes/MediaWiki.php(508): MediaWiki->main()
#20 /home/techotopia/index.php(41): MediaWiki->run()
#21 {main}