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.

xcode1

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.
xcode2

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

xcode3

We will change component position based on orientation.

Portrait Mode

xcode4

Landscape Mode

xcode5

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.
      xcode6
    2. Select height & width in pop up that will change toolbar in blue color & also change device icon according size class in panel.
      xcode7
    3. Set all constraints for ImageView & Label
    4. Click on done in toolbar panel
      xcode8

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
        xcode9
      3. Re-arrange imageview & label & set constraints
      4. Click on done button to finish.

Now run project & check it.

mm

Chirag Daslaniya Sr. iOS Developer

Chirag Daslaniya is a passionate Mobile Application Developer, especially for iOS at Yudiz Solutions Pvt. Ltd. – a leading iPhone App Development company. He is zealous about making easy-to-use and user-friendly applications using simple yet striking interfaces.

Comments are closed.

Top