iOS Programming: The Big Nerd Ranch Guide (5th Edition) (Big Nerd Ranch Guides)

If the text or font were to change, you would be in the same position you were in earlier. The size of the frame is absolute, so the frame would not hug to the content. This is where the intrinsic content size of a view comes into play. You can think of the intrinsic content size as the size that a view “wants” to naturally be. For labels, this size is the size of the text rendered at the given font. For images, this is the size of the image itself. A view’s intrinsic content size acts as implicit width and height constraints. If you do not specify constraints that explicitly determine the width, the view will be its intrinsic width. The same goes for the height. With this knowledge, let the top label have a flexible size by removing the explicit width and height constraints. In Main. storyboard, select the width constraint on the label. You can do this by clicking on the constraint on the canvas. Alternatively, in the document outline, you can click on the disclosure triangle next to the 212 label, then disclose the list of constraints for the label (Figure 3. 21). Once you have selected the width constraint, press the Delete key. Do the same for the height constraint. Figure 3. 21 Selecting the width constraint Notice that the constraints for the label are still blue. Since the width and height are being inferred from the label’s intrinsic content size, there are still enough constraints to determine the label’s alignment rectangle. Misplaced views As you have seen, blue constraints indicate that the alignment rectangle for a view is fully exact. Orange constraints often indicate a misplaced view. This means that the frame for the view in Interface Builder is different than the frame that Auto Layout has computed. A misplaced view is very easy to fix. That is good, because it is also a very common issue that you will encounter when working with Auto Layout. Give your top label a misplaced view so that you can see how to resolve this issue. Resize the top label on the canvas using the resize controls and look for the yellow warning in the top right corner of the canvas. Click on this warning icon to reveal the problem: “Frame for “212” will be different at run time” (Figure 3. 22). Figure 3. 22 Misplaced view warning As the warning says, the frame at runtime will not be the same as the frame specified on the canvas. If you look closely, you will see an orange dotted line that indicates what the runtime frame will be. Build and run the application. Notice that the label is still centered despite the new frame that you gave it in Interface Builder. This might seem great – you get the result that you want, after all. But the disconnect between what you have specified in Interface Builder and the constraints computed by Auto Layout will cause problems down the line as you continue to build your views. Let’s fix the misplaced view. Back in the storyboard, select the top label on the canvas. Click the icon (the rightmost icon) to reveal the Resolve Auto Layout Issues menu. Select Update Frames from the Selected Views section.