size-class

Hello Readers,

Lets, just recall the steps we follow when starting a new project, most of the time we unselect the Size Classes selection given just below the Auto Layout option, Today we will see what it is actually used for and see how it can be useful for our apps.

The size Classes is a new technology introduced in iOS 8, which allows users to specify width and height combinations to the design for different devices and even orientations. Prior to iOS 8 the developers had to use multiple storyboards and write code for orientation checks (Landscape / Portrait) to use different UILayout as per device / orientation. This tutorial will guide through the size classes and how to use its compact / regular heights for which devices.

Designing the view

Start by creating a new single view application, enter the details such as product name, organization name, organization identifier then select the language as swift and make sure that the devices is selected Universal. Go to the storyboard and edit the main view color to light blue and add 4 buttons, place each at one corner of the view. Name those buttons as one, two, three, four or as per their position in the view – top-left,top-right, bottom-left and bottom-right. The storyboard should look like this.Screen Shot 2015-10-27 at 11.17.47 AM

Now build and run your project in iPhone 5s simulator. You will see that the two right buttons are not visible on the screen. This is because The layout was designed with the Size class for Any-width and Any-height. Now, let’s pin the buttons to the corners.

Now make sure that the interface builder has these items selected, the Auto-Layout and the Size-Classes, as shown below.Screen Shot 2015-10-27 at 11.21.51 AM

Select the top-left button and use the right click and start dragging to the left, select the “leading space to container margin”, and do the same dragging towards the top and add the “Top space to layout guide” constraint for the button.

Add the following constraints for the other Buttons:

  • top-right button -> Trailing Space to Container Margin, Top Space to Top Layout Guide
  • bottom-left button -> Leading Space to Container Margin, Bottom Space to Bottom Layout Guide
  • bottom-right button -> Trailing Space to Container Margin, Bottom Space to Bottom Layout Guide

After this build and run the project, in iPhone and iPad check for all orientations too, the buttons will be set to their margins.

Now if you take your attention on the bottom of the screen you will see something like this, this “wAny hAny” is the default size class layout selected.

Screen Shot 2015-10-27 at 1.28.50 PM

Click on it a screen like below will open, on which when you drag your mouse pointer, different selection can be made. These are the different layout in the size classes which the Xcode offers.

Size Classes

The size classes tool presents a grid of nine tiles. When you select the size class Any for either dimension, green dots in tiles indicate areas where your base value design specifications take effect for this size combination. For example, for the Any Width | Any Height combination, green dots in all of the tiles show that the layout constraints and views that you specify on the Interface Builder canvas apply to every device size and orientation.

When you select either the compact size class or the regular size class for either dimension, any change you make to your layout for that dimension overrides the base layout specifications. For example, when you select the Compact Width | Any Height combination, the constraints that you change—and any views that you add or remove—apply only to compact width layouts, for any height.

When you select a specific size class for each dimension, a single green dot in a tile and the label Final Values indicate that your layout values apply exclusively to the shaded tiles on the grid. For example, when you select Compact Width | Regular Height, changes to layout constraints and views apply exclusively to iPhone devices in portrait orientation.

any-any           compact-any          compact-regular

The following image will show you the width and the height layout the devices use in their landscape and portrait mode.

size classes

Select the “wCompact hCompact” in the size class, you will notice that the size of the controller is reduced. this size class can be used for all iPhones except for iPhone 6 Plus.

Adding a button for Landscape orientation only

Now add a button at the top center of the view, name it “Top-Center”. Also give auto layout constraints to it, These constraints will allow the button to be placed at a fixed distance from the top and stay at the center.

  • Top Space to Top Layout Guide
  • Center Horizontally in Container

Now the Compact – Compact size class combination is for iPhone Landscape, so now we have updated the view for iPhone in the Landscape mode only. The landscape mode will have a button more than the portrait mode.

Simulator Screen Shot Oct 27, 2015, 2.19.44 PM               Simulator Screen Shot Oct 27, 2015, 2.19.49 PM

The above images are the screenshots of iPhone 4s Portrait and landscape modes.

Changing font for iPad only

Now lets see the layout which is designed for the iPad landscape and portrait mode. this can be done when you select the wRegular – hRegular on the layout menu os size classes. We are going to change the font size of the button but just for the iPad only. When we do note that the iPads use only the wRegular hRegular for both the orientations – landscape and portrait, so the change in the button size will be visible on both the orientations.

Select any one button on the view controller, and go to the right panel on the Xcode in the properties tab of the button. You will see a ‘+’ sign just left to the font selection tab.

Screen Shot 2015-10-27 at 3.19.29 PM                       Screen Shot 2015-10-27 at 3.19.38 PM

Click it, and a menu will be open which will offer you to select some options, These are the same size layout which we saw earlier, only this time we are giving them a different font for that particular size class. Select Regular Width and the Regular Height. A new font for wR hR is just below the Font tab. Now run the project in any iPhone simulator, it should not show any changes, but stop the project and run it again selecting any iPad device, you will see that the button size has changed.

Simulator Screen Shot Oct 26, 2015, 10.17.42 AM

So this was the tutorial on what size classes are and how to use them. Hope this was useful.

Size Classes Tutorial

Arpit Dhamane

I am a Computer Engineer, By profession i am iOS Developer. I like to explore & learn new things, R&D in new technologies, also there is a lot of SARCASM left in me to come out...!!! Feel free to contact me for any queries, i would be more than happy to help you out. I give my job description (in Hindi) as “Han Mai Keyboard Thokta Hun”.

Category: Uncategorized
992 views