Size Classes is a new feature introduced by Apple in iOS 8, which is used to adapt the UI interface of different device screens. In Xcode 8, some changes have been made in the way Interface Builder supports Size Classes, but the idea of Size Classes hasn’t changed.
In Size Classes, the device’s width and height can be classified as Compact and Regular, and if not distinguished, the device is Any.
Referring to a map from a user, the graph is a bit older. I added the iPhone 7 series when I added the instructions. We can get the following information:
- All iPhone in vertical screen, the device screen is Regular high, and the device screen is Compact wide
- IPhone 4, 5, 6, 7, in the horizontal screen state, the screen width of the device is Compact, and the device screen is Compact high
- All the iPad (which is not considered Multitasking at this time), regardless of the horizontal screen or vertical screen, the width and height of the device screen are both Regular type
- IPhone 6, Plus, iPhone 7 Plus in the screen state, the screen width of the device is Regular type, the device screen is Compact high type
- The device screen has a width of Any, and the device screen has a high Any type. This time indicates that all the devices are wide and high
Interface Builder support
In Xcode 6 and Xcode 7, the Interface Builder support for Size Classes is in the form of a grid, as shown in figure
To see the support of Xcode 8, I see a familiar and unfamiliar feeling, but the operation is still basically the same.
Next, use a case to illustrate how Xcode’s Interface Builder uses Size Classes. This example is a simple interface, 2 View interface, a green background, the other is a red background, in the case of iPhone vertical screen is 2 View are arranged vertically in the iPad screen and iPhone Plus screen is 2 View horizontal arrangement.
Pull out 2 UIView, one fill the green background, and the other fill the red background
UIView of green background, width and height are 80, and the top of UIView is 80 from the top of the screen and horizontally centered.
green background constraint
The red background UIView, width and height are 80, and the top of the UIVIew is 80 from the bottom of the green background UIVIew and centered horizontally.
red background constraint
If we do not click on the lower right corner of the Vary for Size Classes Traits choose a specific type, then we add a default constraint is added to the Any type of Size Classes, which is all the equipment we use add constraint. That is to say, now that all 2 View constraints added to the red background and green background will be added to all the devices, then we’ll verify.
iPhone 7 vertical screen effect
iPhone 7 horizontal screen effect
iPad Air2 vertical screen effect
iPad Air2 horizontal screen effect
According to the running effect, we can see that the constraint added to the 2 UIVIew really works in all types of devices. Next, we improved the constraint in the iPhone vertical screen is 2 View are arranged vertically in the iPad screen, iPhone Plus screen is 2 View horizontal arrangement.
Screen of iPad equipment, screen width and height are Regular,
iPhone Plus in the cross screen, the screen width is Regular equipment. As shown in the following figure, the device selects iPhone 7 Plus, selects the screen in the device direction, and clicks Vary For Traits to eject the width and height options. Check “width” to list all the device types with a screen width of Regular in the screen state.
As shown, tick width, Xcode8, and list all the device types with a screen width of Regular across the screen, in 8 cases.
screen device type of Regular wide
Vary For Traits’s toolbar blue state, all do constraint changes will only use listed in the Vary Traits For device types, namely iPad screen, iPhone Plus screen state.
The first step is to delete the 2 position of the red background UIView, and bind
You can see that the 2 position of the red background UIView is grayed out, but it has not been really deleted, but instead of loading these 2 constraints in the current Size Classes.
does not really delete constraints
constraint is grayed out
Add the positional constraint to the UIView of the red background, and add the constraint, as shown in figure
After the current Size Classes constraint is added, click Done Varying. Tell the Xcode that the constraint is already OK and go back to the Size Classes state of the Any.
Go back to the Size Classes state of Any, when the toolbar for Vary for Traits is gray
The correct result should be in the iPad screen case, 2 UIView is horizontally arranged. In the iPhone 7 screen case, 2 UIView is vertically arranged. In the case of the iPhone 7 Plus vertical screen, the 2 UIView are aligned vertically. In the case of the iPhone 7 Plus horizontal screen, the 2 UIView are arranged crosswise. As you can see from the screenshot, we got the correct result.
iPad vertical screen
iPad horizontal screen
iPhone 7 Plus vertical screen
iPhone 7 Plus horizontal screen
iPhone 7 vertical screen
iPhone 7 horizontal screen
For iPad’s Multitasking, you need to be aware of the type of Size Classes. For APP, as long as you have the appropriate Size Classes type, you don’t have to worry about how the device screen changes.
No matter Xcode Interface Builder Size Classes to support change function is used to adapt the equipment, the core will not change, the change of width and height are included here: (Regular, Any, Compact wide), high (Regular, Any, Compact)
2, https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/AdoptingMultitaskingOniPad/QuickStartForSlideOverAndSplitView.html#//apple_ref/doc/uid/ TP40015145-CH13-SW1
4, http://www.hmttommy.com/2014/12/05/AutoLayout/ 3