Size classes in Xcode 8

Auto layout is vast for making adjustments to a layout based on constraints, but sometimes a layout requires more important adjustments based on the device type, screen size or orientation.

Probably you may need:

A large font size in the big iPad Pro screen than on the small iPhone SE

A sight to be laid out differently on iPhones when in landscape or portrait mode

To offer additional buttons in the iPad version of your app

When your app is in slide over or split view modes, layout content become different.

How to make sorts of adjustments to a layout?

In previous versions of iOS, you may have had various storyboards for iPads and iPhones.  With multiple devices, split view controllers (introduced in iOS 8) and slide over and split view multitasking modes (introduced in iOS 9) have made changing a layout to its environment even more complex.

To shorten things, Apple suggests a new paradigm. Rather than thinking your layout in terms of the many device types, resolutions, multitasking modes, and device orientation, you must focus instead on adjusting your layout to two types of widths (called compact and regular) and two types of heights (also compact and regular). These distinctions are called size classes. You can then exploit these size classes to define or adjust your layout.

Size classes decreases all of the different potential horizontal and vertical configurations to just two types:

•  Compact for more limited space
•  Regular for less limited space.

For example, consider an iPhone portrait orientation, to have a compact width and a regular height.

Observe the below image for ample breakdown of how the size classes communicate to devices and devices orientations.

By defining the size classes, following notes:

iPhones (other than 6+ and 6S+) are still considered to have compact widths, When there in landscape orientation.

Every iPads in portrait or landscape mode, are considered to have both regular widths and heights. This explains that alter in orientation on an iPad does not trigger a change in size class.

Size classes do not just illustrate device types and orientations. Size classes also illustrate an app’s environment when the app is presented inside iPad multitasking modes — such as Slide Over, Split View, and Side by Side

The below image explains Note that though the horizontal size class may alter for certain iPad multitasking modes, the vertical size class residue regular. In fact, a compact vertical size class is sufficient to involve that we’re working with an iPhone in landscape mode.

Size classes

Size classes are not a choice to constraints and auto layout, rather they work in cycle. You can make several changes to a layout with size classes, such as:

Views can be resized or repositioned.

Fonts and colors can be changed.

Constraints can be activated or deactivated, it also called installed and uninstalled.

Views can be included or removed, it also called  installed and uninstalled.

Size classes in Interface Builder

However you can adjust your interfaces for different size classes in code, the easiest and most suitable approach is commonly from Interface Builder, particularly with added features in updates to Xcode 8. You can just allocate your layouts and constraints to definite size classes in Interface Builder, and your layout will update automatically when there is a correction in size class — without writing a line of code!

By adding customizations for different size classes in Interface Builder in an app with a very simple layout, displaying an article with a title and body text.

Firstly build the iphone interface, the below image contains the title in a label and the body text in a text view .This layout, however, doesn’t look vast on the iPad.

To avoid this, use size classes to adapt the interface. Note the subtle and not so subtle differences between the layouts — as the iPad has more space, you are going to adjust font sizes, margin sizes and add a subtitle label.

Start by the basic interface and constraints.

Build a simple Single View Application and call it SimpleSizeClasses.

Choose the file inspector for the main storyboard. Make a note that the storyboard automatically has “Use Auto Layout” and “Use Trait Variations” selected. The following image indicates that this storyboard is ready to go for adaptive layout with constraints and size classes.

1. Drag a label onto the main storyboard.
2. Change the label’s text with “Title”, then use constraints in Interface Builder to center the label and pin it to the top layout guide. Select the “Title 1” font type.
3. below the label, drag on a text view, filling the available space.
4. Fix the text view to the title label, the bottom layout guide, and the left and right margins.

Specifying layouts for Size Classes

Let’s have a look at how to specify different layouts for different size classes in Interface Builder. There are two main approaches that you can use in cycle:

1. Add customizations to an attribute;
2. Vary for traits.

Employ both of these approaches to tailor our simple layout for different size classes.

Let’s look at both in turn.

Including customizations to an attribute

You can include customizations for a size class directly to an attribute. Discover using this feature by modifying font sizes and margin sizes for different size classes in our sample application.

Outlook the storyboard in the device configuration bars as an iPad Pro, and zoom out to observe the whole scene. In the above image you can observe how small text is on the expansive iPad screen. Then increase the font size for larger size classes.

1. Pick the title label and open the attributes inspector.
2. Observe the grey plus symbol to the left of the font attribute. Choosing the plus symbol gives you the opportunity to add a customized value for a size class. Select the plus symbol now. Here you can select the size class you’re interested in, from Width, Height, and a display type. The existing size class will be recommended as a default.
3. Select Regular Width, Regular Height to add a customized value for iPads. A tailored value will show for the font attribute, for the specified size class. Width regular and height regular stands for the cryptic wR hR to the left of the new attribute
4. Then adjust the new value for this size class.

Verify the layout in different devices, orientations and adaptations. You must discover that the font attributes adjust appropriately for the dissimilar size classes.

You can simply include multiple attributes for other size classes by going through the process again. Erasing a customized attribute is straightforward too — just chooses the cross to the left of the attribute.

Which other attributes can you tailor? Discover the attributes and size inspectors for the label. Any attribute with a plus sign can be tailored. For the label, for example, this adds some color attributes in the attributes inspector and margin attributes in the size inspector. Image 6

Adding customizations to a constraint

Notably, you can also tailor the values of a constraint for a size class. Let’s raises the leading and trailing margins of the text view to make it narrower on the iPad.

1. Choose the text view and the size inspector and find the Leading space constraint. Instead of choosing Edit, double click on the constraint in the size inspector to open up a more detailed edit view for the constraint.
2. Observe that the constraint’s Constant value has a plus sign. include a variation for iPads (Regular Width, Regular Height).
3. Provide the Constant a customized value of 50. See image 7.

Execute the similar for the text view’s trailing constraint (you’ll require to choose the text view again to be able to select a different constraint).

Tip: when the text view goes off screen after setting up the trailing constraint, you require reversing the first and second items. Choose the drop down for both the first or second item and pick Reverse the first and Second Item. Now change the constant to 50 again, and the constraint should be set up acceptably.

Note: effects of the changes made to the layout in different configurations. If everything fine, the text view should have a wider margin on the iPad.

Including customization to the installed attribute

Now, to create some more major changes to the iPad layout, include a subtitle label just for iPad users. But first eradicate the constraint between the title and the text view to make room for the subtitle view.

You might be noticed an additional customizable attribute in both the constraint inspector and the attribute inspector for the view: Installed. specific size classes allow the users to install or uninstall any view and constraints. Let’s use this attribute to remove the constraint.

1. Double click on the text view Top Space constraint.
2. Choose the plus symbol next to the Installed attribute to include a customization.
3. View the image 8. Deselect the checkbox for wR hR.

Now, let’s include the subtitle view, perform this by varying for traits.

Varying for traits

Varying for traits is vast for creating more important changes to a layout for a size class. Let’s explore varying for traits by including a view and a constraint for different size classes in the sample application.

You might be noticed the Vary for Traits button at the right of the device configuration bar, and wondered what that button was for. Fine, you can exploit the Vary for Traits button to start varying a layout just for specific size classes.

By an iPad device selected in the device configuration bar, select Vary for Traits. Choose both width and height. While making your selection, the device configuration bar will turn blue and you will observe which devices, orientations, and adaptations (multitasking environments) you will be varying the layout for. Observe image 9.

Figure 9 Vary for traits

As you can observe, the wR hR size class isn’t just relevant to iPads, but also to certain adaptions.

1. Include a subtitle label below the title.
2. Provide it some sample text.
3. Confer it a System font size of 30.
4. Assign the subtitle label to the title, and align it horizontally.
5. Assign the text view to the subtitle label, and modify the constraint constant to 8 points. The text view must slide properly under the new subtitle label.
6. You’re done varying the layout! Tap the Done Varying button in the device configuration bar.

Again, choose dissimilar devices or orientations in the device configuration bar to admire the results of your work. The subtitle should be display for iPads and disappear for other size classes. Note that different displays and constraints are installed or uninstalled in different size classes. Paled symbols in the document outline represent uninstalled views and constraints. See figure 10.