The screen fits a size class

1. Three types of sizes (size class)

If the length and width of the screen are divided into three types (the official website becomes size Class): Compression (compact), arbitrary (any), general (Regular), then the long and wide combinations have 9 types. Here I refer to each of these types as a pattern.

In addition, the state of the screen can be divided into many situations depending on size and direction. The pattern and the state of the screen have a corresponding relationship, either one-on or one-to-many. For example, a pattern is called any mode, that is, the length is arbitrary, the width is arbitrary, this mode can correspond to all the screen state.

You can define its layout in different modes for the same interface. When the app runs, it detects the device's screen state (screen size and screen orientation) to determine which layout to use.
Controls and constraints that are added under any mode are in effect in all modes.
The controls and constraints that are added in a pattern are private to the schema.
The most efficient approach is to make layouts in any mode suitable for all screen states. But sometimes, due to the limitations of the content of the display, different sizes, or horizontal, vertical screen layout will be a big difference, and sometimes even increase or decrease the control. It is time to separate different patterns to layout the user interface.

2. Mode switching

Mode switching is achieved by using the size class tool in. box to select a different number of squares to correspond to different modes, the text below the tool indicates what screen state the mode applies to (screen size, horizontal screen, or vertical screen). Note that the number of squares is meaning, the number of squares in the horizontal direction represents a wide size type, and the number of squares in the vertical direction represents a high size type. Three size type compact, any, regular corresponding lattice number is one, 2, 3.

After you select a pattern, all layout-related actions correspond to that pattern. To make the layout look comfortable, you can change the size and direction of the simulator by two options. Note that the size and orientation of the simulator are not related to the current layout mode.

The corresponding relationship between the screen state and the wide and high size type mentioned above, here is a table for reference (from Apple's website):

3. Display of views in different modes

As mentioned above, the need to separate different patterns to layout a situation is that the difference between the screen is very large, or even increase or decrease the view. At this point, the view may need to be displayed in some mode, not displayed in a certain mode. Set the method for whether the view is displayed in some way (you need to click the view you want to set first). Tick installed to indicate that the view is displayed in any mode, or click the "+" sign, select a mode, and then determine whether the view is displayed in this mode by checking installed.

4. Display of different mode slices

In order to adapt to different modes, the same picture may require multiple-size versions. In this case, adapt assets.xcassets to manage these pictures. Creates a new image Set. On the right side of this image set, you can select which devices you want to support:

You can also combine different modes by selecting width and height, and then provide the corresponding picture version for some patterns according to the actual situation. Fill in the corresponding pattern with the corresponding picture. Shows an image Set that contains several patterns that indicate the meaning of the identities in them:

5. User-triggered screen state changes

The screen status is mentioned several times, including screen size and screen orientation. This information is encapsulated as a class--uitraitcollection.
After the user changes the screen state (horizontal screen, vertical screen and other actions), the following actions occur:
(1) Uikit will call this method to notify the respective view controller when the change of screen state is about to change.
Willtransitiontotraitcollection:withtransitioncoordinator:
(2) When the size of the view controller is about to change, Uikit will call
Viewwilltransitiontosize:withtransitioncoordinator:
(3) When the screen status changes, Uikit will call
Traitcollectiondidchange:

The parent controller can pin the mode of its child view controller so that it is not affected by changes in the screen state. There are two ways to implement (IOS 8.0 and later):

-(void)setOverrideTraitCollection:(UITraitCollection *)collection?            forChildViewController:(UIViewController *)childViewController`

-(UITraitCollection *)overrideTraitCollectionForChildViewController:(UIViewController *)childViewController

The screen fits a size class