Teach you how to use Size Class and sizeclass

Teach you how to use Size Class and sizeclass

In iOS8, we no longer need to create multiple xib files on a page to adapt to different types of screens, now we can put the adaptation of various screen sizes in one file, and then we can customize interfaces of various sizes through different types of sizes. In other words, the Storyboard in front of you is not a normal Storyboard, but a nine-in-One Storyboard that can manage nine types of screens.

For width and height, there are three situations: Compact, Any, and Regular. Therefore, there are 3x3 = 9 categories.

A prompt is displayed on the page when setting the Size Class. By default, the width and height are all Any, for example.

We can see from the Size Class setting interface that the text above Any Width Any Height indicates that the Width and Height are arbitrary. The text below For all layouts indicates that it is applicable to all sizes.

Size Class is used to classify screens of different sizes, while Autolayout is used for layout management.

Now let's do a small experiment. First add a center button to the view, as shown in

At this time, we will go to the Size Class setting interface and set the Size to as shown in

The text above the Size Class setting interface shows that the width is normal and the height is compact. The text below shows For 5.5 inch iPhones in landscape. That is, it is applicable to the 5.5-inch iPhone landscape screen, that is, the iPhone 6 + landscape screen. (For other sizes, I will not demonstrate them any more. I think you can give a similar picture ). At this time, let's assume a button in the screen, such

Then you can run the program to see the effect. The button we added for the first time will appear no matter iPhone 4, 5, or 6, but the button added for the second time, only the iPhone 6 + landscape screen is displayed. I think you should understand why the second button is only displayed on iPhone 6 +. I will not explain this.

Demo result (iPhone 6 + portrait screen and landscape screen)

Some netizens asked me what to do if a widget has different la s on different device sizes .. Next, let's explain it. The role of the Size Class mentioned above is to classify screens of different sizes, while the final layout management is always AutoLayout. Therefore, if you want a widget to have different la s in different sizes, you must modify AutoLayout.

We also return to the default Size interface, where the AutoLayout is previously added. My current requirement is to make the Button on the page 0 to the top of the parent view on the iPhone 6 + horizontal screen, rather than the current 121.

Next, we will change the Size to only the Size of the iPhone 6 + landscape screen. Click the constraint we want to modify. You can see a plus sign on the left of the constraint, click the plus sign, select the Size of the iPhone6 + landscape screen, and modify its value, change its value to 0. For example, after modification, run (the effect is as follows). Follow this method to modify the layout of the control in different sizes.