Often, you want an application’s interface to have a different layout depending on the dimensions and orientation of the screen. In this chapter, you will modify the interface for DetailViewController in Homepwner so that when it appears on a screen that has a relatively small height, the set of text fields and the image view are side by side instead of stacked on top of one another (Figure 17.1).
The relative sizes of screens are defined in size classes. A size class represents a relative amount of screen space in a given dimension. Each dimension (width and height) can either be compact or regular, so there are four possible combinations of size classes:
- Compact Width | Compact Height
-
iPhones with 3.5, 4, or 4.7-inch screens in landscape orientation
- Compact Width | Regular Height
-
iPhones of all sizes in portrait orientation
- Regular Width | Compact Height
-
iPhones with 5.5-inch screens in landscape orientation
- Regular Width | Regular Height
-
iPads of all sizes in all orientations
Notice that the size classes cover both screen sizes and orientations. Instead of thinking about interfaces in terms of orientation or device, it is better to think in terms of size classes.
When editing the interface for a specific size class combination, you are able to change:
-
properties for many views
-
whether a specific subview is installed
-
whether a specific constraint is installed
-
the constant of a constraint
-
the font for subviews that display text
In Homepwner, you are going to focus on the first item in that list – adjusting view properties depending on the size class configuration. The goal is to have the image view be on the right side of the labels and text fields in a compact height environment. In a regular height environment, the image view will be below the labels and text fields (as it currently is). Stack views will make this remarkably easy.
To begin, you are going to embed the existing vertical stack view within another stack view. This will make it easy to add an image view to the right side of the labels and text fields.
Open Homepwner.xcodeproj and Main.storyboard. Select the vertical stack view and click the 
icon to embed this stack view within another stack view. With this new stack view selected, open the Auto Layout Add New Constraints menu, configure it as shown in Figure 17.2, and add the constraints.
Next, open the new stack view’s attributes inspector. Increase the Spacing to be 8.
Now you are going to move the image view from the inner stack view to the outer stack view that you just created. This is how you will be able to have the image view on the right side of the rest of the interface: In a compact height environment, the stack view will be set to be horizontal and the image view will take up the right side of the interface.
Moving the image view from one stack view to the other can be a little tricky, so you are going to do it in a few steps.
Open the document outline and expand the section for the Detail View Controller Scene. Expand the outer two stack views as shown in Figure 17.3.
Drag the Image View right above the stack view that it is currently contained within (Figure 17.4). This will move it from the inner stack view to the outer stack view.
Finally, collapse the inner stack view and drag the Image View to be below it in the stack (Figure 17.5). Make sure the Image View is indented at the same level as the inner stack view. You may need to update frames at this point to get rid of any warnings.
Build and run the application. Confirm that the behavior of the stack view is unchanged.
At this point, you have updated everything that is common to all size classes. Next you will modify specific size classes to change the layout of the content.
At the bottom of Interface Builder, click on the text View as: iPhone 7 (wC hR) to expand the view options. Then select the landscape Orientation (Figure 17.6). Leave the Device as iPhone 7.
Next, you will update the properties for the outer stack view so that the image view is on the right side.
Select the outer stack view and open its attributes inspector. Under the Stack View heading, find the Axis property and click the + button on its left side. From the pop-up menu, choose Any for the Width variation and Compact for the Height variation (Figure 17.7). Click Add Variation. This will allow you to customize the axis property for all iPhones in landscape.
For the new option (hC), choose Horizontal (Figure 17.8). Now, whenever the interface has a compact height, the outer stack view will have a horizontal configuration. When the interface has a regular height, the outer stack view will have a vertical configuration.
The last change you want to make is for the inner stack view and the image view to fill the outer stack view equally. To do this, you will customize the outer stack view’s distribution.
With the attributes inspector still open for the outer stack view, click on the + next to Distribution and once again select Any for the Width variation and Compact for the Height variation from the pop-up menu. Change the distribution for this size class to be Fill Equally (Figure 17.9).
Build and run the application. Select an item and drill down to its details to add a photo, if it does not already have one. Rotate between portrait and landscape (on the simulator, you can use Command plus the left or right arrow key to rotate) and notice how the interface is laid out as you specified for both regular and compact height.
With that, your Homepwner application is complete. You have built an app with a flexible interface that can take photos and store data, and we hope you are proud of your accomplishment! Take some time to celebrate.