When you click the Vary for Traits button in Interface Builder, you have three options to base your variation on:
- Vary on height.
- Vary on width.
- Vary on width and height.
If you select width, any new constraints you add will apply to all trait collections that match the size class axis you have chosen to vary on. So if you select the iPad view and then select to vary for width only, all Xcode will present several options that your variation would apply to. The following screenshot shows an example of this:
To make the larger image look good, you should vary both the width and height. If the larger image appears on an iPhone 6 Plus in landscape mode, it would cover too much of the screen, so the bigger image should only be shown on devices that can accommodate it on both the horizontal and vertical axis. Click on Vary for Traits again, and this time check the width and height boxes. You'll notice that the iPhone isn't in the list of devices anymore because a large screen iPhone has a regular width and a compact height. On the left-hand side of the Interface Builder window, you can find the document outline. In this outline, look for your image view. You can see the constraints that are added to the image view listed underneath the image view. Expand the constraints and select the width constraint. At the bottom of Attributes Inspector on the right-hand side of the screen, you'll find a plus icon, and a checkbox labeled Installed. Click on the plus symbol and navigate to the Regular width | Regular height | Any gamut (current) option as shown in the following screenshot:
After doing this, an extra checkbox will appear. Uncheck it so the width constraint is not installed for the current variation. Do the same for the image's height constraint; after doing this, the image might not be visible anymore because Auto Layout doesn't know its dimensions. With the image view selected, go to the Size Inspector and set the image's size to 120 x 120. This will make the image reappear. Now, use the Ctrl + drag technique to add width and height constraints, as you have done before. If you inspect these constraints, you'll see that they have a similar setup for their installation checkboxes as before, except that the general one is unchecked and the specific one is checked. Great! This means you've successfully set up the constraint variations for your app.
Go ahead and exit the variation mode by clicking on the Done Varying button and check out your layout on several screens. If the image size doesn't update automatically, select the entire view and update the frames from the Resolve Auto Layout Issues menu. This wraps up the layout of the top section of the detail page.