Xcode 8 Size Classes usage

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.

Size Classes

In Size Classes, the device’s width and height can be classified as Compact and Regular, and if not distinguished, the device is Any.

Xcode 8 Size Classes usage
schematic diagram

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:

  1. All iPhone in vertical screen, the device screen is Regular high, and the device screen is Compact wide
  2. 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
  3. 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
  4. 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
  5. 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

Xcode 8 Size Classes usage
square

To see the support of Xcode 8, I see a familiar and unfamiliar feeling, but the operation is still basically the same.

Xcode 8 Size Classes usage
image.png

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

Xcode 8 Size Classes usage
iPhone implementation

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.

Xcode 8 Size Classes usage
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.

Xcode 8 Size Classes usage
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.

Xcode 8 Size Classes usage
Any type
Xcode 8 Size Classes usage
iPhone 7 vertical screen effect
Xcode 8 Size Classes usage
iPhone 7 horizontal screen effect
Xcode 8 Size Classes usage
iPad Air2 vertical screen effect
Xcode 8 Size Classes usage
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.

Xcode 8 Size Classes usage
image.png

As shown, tick width, Xcode8, and list all the device types with a screen width of Regular across the screen, in 8 cases.

Xcode 8 Size Classes usage
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

Xcode 8 Size Classes usage
delete constraint

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.

Xcode 8 Size Classes usage
does not really delete constraints
The Xcode 8 Size Classes usage
constraint is grayed out

Add the positional constraint to the UIView of the red background, and add the constraint, as shown in figure

Xcode 8 Size Classes usage
image.png

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.

Xcode 8 Size Classes usage
done

Go back to the Size Classes state of Any, when the toolbar for Vary for Traits is gray

Xcode 8 Size Classes usage
Any

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.

Xcode 8 Size Classes usage
iPad vertical screen
Xcode 8 Size Classes usage
iPad horizontal screen
Xcode 8 Size Classes usage
iPhone 7 Plus vertical screen
Xcode 8 Size Classes usage
iPhone 7 Plus horizontal screen
Xcode 8 Size Classes usage
iPhone 7 vertical screen
Xcode 8 Size Classes usage
iPhone 7 horizontal screen

IPad Multitasking

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.

Xcode 8 Size Classes usage
Multitasking

summary

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)

Reference resources

1, https://developer.apple.com/videos/play/wwdc2014/216/
2, https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/AdoptingMultitaskingOniPad/QuickStartForSlideOverAndSplitView.html#//apple_ref/doc/uid/ TP40015145-CH13-SW1
, http://blog.sunnyxx.com/2014/09/09/ios8-size-classes/
4, http://www.hmttommy.com/2014/12/05/AutoLayout/ 3