You have added constraints to BNRDetailViewController.xib that will allow Auto Layout to determine alignment rectangles for every view in the hierarchy and give you the layout that you want on the iPhone and the iPad. Given the sheer number of constraints, it is easy to introduce problems. You can miss a constraint, you could have constraints that conflict, or you could have a constraint that conflicts with how a view appears on the canvas.
Fortunately, there are several tools you can use to debug Auto Layout constraints. Let’s take a look at each of these in turn and see ways to fix them.
An ambiguous layout occurs when there is more then one way to fulfill a set of constraints. Typically, this means that you are missing at least one constraint.
Currently, there are no ambiguous layouts, so let’s introduce some. Add two labels to the UIControl under the dateLabel and position them next to one another. In the attributes inspector, change the background color of the labels to light gray so that you can see their frames. The interface should look like Figure 15.16.
Now let’s add some constraints to both labels. Hold down the Shift key and select both labels. Open the Pin Auto Layout menu, select the top, left, and right struts at the top, and then click Add 5 Constraints (Figure 15.17).
You have pinned three edges for two labels, so you may be wondering “Why 5 constraints and not 6?” The answer is that the trailing edge constraint of the label on the left and the leading edge constraint of the label on the right are the same constraint. Interface Builder recognizes this and only adds one constraint to satisfy both attributes.
If you build and run on an iPhone, everything will look fine, but running on the iPad is a different story. Build and run the project on an iPad and navigate to the detail interface. One of the two labels is wider than the other (Figure 15.18).
These labels do not have enough constraints to unambiguously define their frames. Auto Layout takes its best guess at runtime, and it is not what you wanted on the iPad. You are going to use two UIView methods, hasAmbiguousLayout and exerciseAmbiguousLayout, to debug this situation.
Open BNRDetailViewController.m. Override the method viewDidLayoutSubviews to check if any of its subviews has an ambiguous layout.
- (void)viewDidLayoutSubviews
{
for (UIView *subview in self.view.subviews) {
if([subview hasAmbiguousLayout])
NSLog(@"AMBIGUOUS: %@", subview);
}
}
viewDidLayoutSubviews gets called any time the view changes in size (for example, when the device is rotated) or when it is first presented on the screen.
Build and run the application on the iPad simulator and navigate to the BNRDetailViewController. Then check the console; it will report that the two labels are ambiguous. (Note that the output in the console is often duplicated, resulting in twice as many messages as you would expect.)
You can go a step further to actually see the other way this layout might appear. In BNRDetailViewController.m, edit the backgroundTapped: method to send the message exerciseAmbiguityInLayout to any ambiguous views.
- (IBAction)backgroundTapped:(id)sender
{
[self.view endEditing:YES];
for (UIView *subview in self.view.subviews) {
if ([subview hasAmbiguousLayout]) {
[subview exerciseAmbiguityInLayout];
}
}
}
Build and run the application again. Once on the BNRDetailViewController, tap the background view anywhere. The width of the two labels will swap.
Neither of the widths of the labels has been constrained, and so there is more than one solution to the system of Auto Layout equations. Because of this, there is an ambiguous layout and tapping the background switches between the two possible solutions. Due to the other constraints you have specified, as long as one of the labels has its width constrained, the other label’s width can be determined. You will get rid of the ambiguous layout by giving the two labels equal widths.
In BNRDetailViewController.xib, Control-drag from one label to the other, and then select Equal Widths. Build and run the application on iPad. Your labels have the same width. Check the console to confirm that there are no more ambiguous layouts. Tapping on the background will have no effect on the interface.
Your interface is once again properly set up. All views have enough constraints to fully construct their alignment rectangle, and so there are no more ambiguous views.
In BNRDetailViewController.xib, select and delete the two test labels.
The exerciseAmbiguityInLayout method is purely a debugging tool that allows Auto Layout to show you where your layouts could potentially end up. You should never leave this code in an application that you are shipping.
In BNRDetailViewController.m, delete viewDidLayoutSubviews and delete the code that calls exerciseAmbiguityInLayout in backgroundTapped:.
- (void)viewDidLayoutSubviews{ for (UIView *subview in self.view.subviews) { if([subview hasAmbiguousLayout]) NSLog(@"AMBIGUOUS: %@", subview); }}- (IBAction)backgroundTapped:(id)sender { [self.view endEditing:YES]; for (UIView *subview in self.view.subviews) { if ([subview hasAmbiguousLayout]) { [subview exerciseAmbiguityInLayout]; } }}
The problem of unsatisfiable constraints occurs when two or more constraints conflict. This often means that a view has too many constraints. To illustrate, let’s introduce this problem to the BNRDetailViewController.
In BNRDetailViewController.xib, select the label that displays the date. In the attributes inspector, change its background to light gray so that you can see its frame in the layout. Next, pin the width of this label to its current value.
Just as before, if you were to build and run the application on an iPhone, everything would be fine. Build and run the application on an iPad. The label may look just as it did before, but take a look at the console.
Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "<NSLayoutConstraint:0xa333da0 H:[UILabel:0xa333ca0(280)]>", "<NSLayoutConstraint:0xa394500 H:[UILabel:0xa333ca0]-(20)-| (Names: '|':UIControl:0xa38cd80 )>", "<NSLayoutConstraint:0xa394530 H:|-(20)-[UILabel:0xa333ca0] (Names: '|':UIControl:0xa38cd80 )>", "<NSAutoresizingMaskLayoutConstraint:0xa3a1a70 h=-&- v=-&- UIControl:0xa38cd80.width == _UIParallaxDimmingView:0xa37b140.width>", "<NSAutoresizingMaskLayoutConstraint:0xa3a21d0 h=--& v=--& H:[_UIParallaxDimmingView:0xa37b140(768)]>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0xa333da0 H:[UILabel:0xa333ca0(280)]> Break on objc_exception_throw to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
First, Xcode informs you that it is “unable to simultaneously satisfy constraints” and gives you some hints on what to look for. The console then lists all of the constraints that are related to the issue. Finally, you are told that one of the constraints will be ignored so that the label will have a valid frame. In this case, the constraint to pin the width will be ignored.
You can also just think through the problem. You constrained this label’s leading and trailing edges to resize with the superview. Then you constrained its width to a fixed value. These are conflicting constraints, and the solution is to remove one.
In BNRDetailViewController.xib, delete the width constraint that you just added to the label and set its background color back to clear.
If a view’s frame in a XIB does not match its constraints, then you have a misplaced view problem. This means that the frame of that view at runtime will not match how it currently appears on the canvas. Let’s cause a misplaced view problem.
Select the label that displays the date and drag it down a little bit so that the interface looks like Figure 15.20.
A rectangle with an orange, dashed border will appear where the label used to be. This is the runtime frame; at runtime, the existing constraints will position the label where this rectangle is and not where you just dragged it to.
How you fix the problem depends on whether the view’s size and position on the canvas are what you want. If so, then you change the constraints to work with this new position. If not, then you change the view’s size or position to match the constraints. Let’s say that moving the label was an accident and that you want the view’s position to match the existing constraints.
Select the date label. Then, in the Auto Layout constraints menu, select the 
icon
to reveal the Resolve Auto Layout Issues menu (Figure 15.21).
Select Update Frames at the top. This will reposition the label to match its constraints.
On the other hand, if you wanted the constraints to change to match the new position of the view, you would choose to Update Constraints.
The Resolve Auto Layout Issues menu is very powerful. Here is a description of the items in the top half of the menu.
|
Update Frames |
Adjusts the frame of the view to match its constraints. |
|
Update Constraints |
Adjusts the constraints of the view to match its frame. |
|
Add Missing Constraints |
For views with an ambiguous layout, this will add the necessary constraints to remove the ambiguity. However, the new constraints might not be what you want, so make sure to double-check and test this resolution. |
|
Reset to Suggested Constraints |
This will remove any existing constraints from the view and add new constraints. These suggested constraints are sensitive to the context of the view. For example, if the view is near the top of its superview, the suggested constraints will probably pin it to the top, whereas if the view is near the bottom of its superview, it will probably be pinned to the bottom. |
|
Clear Constraints |
All constraints are removed. If no explicit constraints are added to this view, it will have the default fixed position and size constraints added to it. |
The bottom section repeats these options but applies them to all of the subviews instead of only the selected view(s).