Learn Size Classes In Xcode 8

Before few years ago,It was very hard to make UI in both orientations but now with size classes & Xcode 8 it’s very easy to do.

Let’s understand the basic concept

There are two size classes that can be applied to the horizontal (width) or vertical (height) dimension

1. regular
2. compact

The iPhone 6 Plus and iPhone 7 Plus are the only iPhone devices with a regular width in landscape orientation as you can see in below image [right side]. The bigger size is always regular and the small size is always compact.

The other iPhone models have a trickier set of size classes to remember. The bigger size of the device is regular in portrait mode, but become compact in landscape mode.

Let’s open main storyboard, at bottom is toolbar appearing with all devices icon repeat to size class.

We will change component position based on orientation.

Portrait Mode

Landscape Mode

First in portrait mode , Drag image view & label in view controller & set content according.

Now, Let go step by step, Make sure you select portrait mode

1. Select the vary for traits button in toolbar that will open one dialog pop up. There are two variations height & width.
   
2. Select height & width in pop up that will change toolbar in blue color & also change device icon according size class in panel.
   
3. Set all constraints for ImageView & Label
4. Click on done in toolbar panel
   

Cheers!!!…Here our first step is finished & portrait layout set according size class.

Now we set landscape mode

1. Click on landscape icon in bottom panel.
2. Click on vary for traits button & select height, check box will be appear with blue toolbar
   
3. Re-arrange imageview & label & set constraints
4. Click on done button to finish.

Now run project & check it.