Tech Blogs

perspectives for IT decision makers

Introduction to Size Class in iOS

by (May 19, 2015)

Size-classes-in-iOS

Tim Cook and his team from Apple, Inc, introduced different iOS smart devices and, that, engages the developers more. Each device should have different aspect ratios, depending upon the usages, which are targeted. Therefore, the ‘controls’ or ‘constraints to controls’ might be different from the devices. To handle such situations, before the introduction of iOS 8, the developers had to use multiple storyboards. Hence, to reduce the logical and programmatic complexities, the team introduced ‘Size Class’ concept.

Apple started the movement towards adaptive UI, since iOS 6, by introducing auto layout concepts. After the launch of iOS 8, Apple made it clearer, by introducing Size classes. Size classes can be used to enable a storyboard or xib file, to work with all the available screen sizes, enabling the application to work on all iOS devices. We can build our interface, according to the sizes, then update, only, the parts that need to change with the devices.

Working with Size Classes

The size class feature is included from xCode 6 onwards.

EnableSizeClasses

 

 

 

 

 

 

 

 

Figure-1

The views, corresponding to the devices, can be set on the size class controller option. Every view controller, in an app, gets a trait collection object with two size classes – a horizontal size class and a vertical size class. Each of these classes has three possible values:

1. Compact
2. Regular
2. Any

The values will get changed with the device orientations. The size class enabled applications will display the user interfaces, corresponding to each view controller, based on the current status of the size classes. Apple uses a grid to let the user choose which configuration to work on.

AnyDevice

 

 

 

 

 

 

 

 

 

 

 

Figure-2

The figure 2 shows the selection of wAny hAny mode in size class controller. The universal controls and constraints are to be added in this mode. Hence, constraints will reflect in all the devices. But, these constraints can be re-edited and made device specific.

–> Figure-3a: All iPhones Landscape orientation except iPhone 6 Plus
–> Figure-3b: iPhone 6 Plus Landscape orientation
–> Figure-3c: All iPhones portrait orientation

Any controls or constraints added device, specifically, will be displayed in the same device only.

SizeClasses

Figure-3

If a button is added to a storyboard or any view controller in wCompact hRegular mode, then the button will be displayed only on iPhone portrait mode (figure 3c). Likewise, each control or constraint can be added to the device and orientation, specifically.

The case of iPad is different from others. Apple, currently, provides only a single size class for iPad, (wRegular hRegular) in either of the orientations, as shown in figure 4. Hence, it should be checked, programmatically.

iPad

The code below is an example.

 

NSString * device = [UIDevice currentDevice].model;                                           

NSString *iPad = @“iPad”;
if ( [device hasPrefix:iPad] ) { if(UIDeviceOrientationIsPortrait(self.interfaceOrientation)){

 // iPad Portrait } else                                                                                             

{
// iPad Landscape                                                                                                

} }

 

 

Figure-4

wAny hAny holds the controls with constraints which is to be displayed in all iOS devices. We can change constraints device, specifically, using size classes. For instance, if a global control’s height constraint has to be changed in iPhone portrait mode, it can be done by clicking ‘+’ sign prior to ‘Constant’ and select iPhone portrait (wRegular hCompact) mode, thus, setting the required height value. Also, install it by clicking the ‘+’ sign below the screen and select the corresponding (wRegular hCompact) mode. The ‘Constant’ value will be the corresponding constraint in wAny hAny. If new constraints are set for global controls in a particular device, it will override the previous global constraints. Any constraints can be made device, specifically, in this way.

SizeClassConstraint

 

 

 

 

 

 

 

 

 

 

 

Figure-5

Consider the figure 5, here the height of the image is changed with the device. In universal mode, it is kept at 600 units. This value is overridden by 200 units, when it is installed on an iPhone, and oriented in portrait mode. Also, these changes can be uninstalled.

Advantages

  • One storyboard for all devices.
  • Reduces programmatic complexities to handle orientation changes in source code.
  • Resource and time saving.

Disadvantages

  • Apple does not distinguish between landscape and portrait modes of iPad, using Size class. Hence, we have to check programmatically.
  • Violates the concept of universal story board in the case of iPad.

As an iOS developer, have you worked on size classes before? Do share your experience and any useful suggestions you have.

By,

Ajith K Jose, Sreenath T V, Anandu R Nair

iOS Developers, RapidValue Solutions

 

Sorry no comment yet.

LEAVE A COMMENT

24/7 Toll Free(877)-643-1850(US)

Would you like to know more about us?

  • This field is for validation purposes and should be left unchanged.
Scroll Top