Building Adaptive Layout with Size Classes — Programmatically

Previously, building the user interface for iOS was very simply because there was only one iPhone size. The time has passed, we now have an array of iPhone sizes with the different screen sizes and orientations.

Imagine a layout being displayed on a screen with different dimensions.
How can you make these sorts of adjustments to a layout?

To do them the way you want, you must develop a separate condition and control mechanism for each view element.

Apple has introduced (in iOS 8) Size Classes which organize all of these screen sizes for each device and orientation into two categories.

To simplify, Apple proposes a new paradigm. Instead of evaluating your layout in terms of many device types, resolution, multitasking mode, and device orientation, you should focus on setting your layout to two widths (called compact and regular) and two height types (also compact and regular). These distinctions are called dimension classes. You can then use these dimension classes to define or adjust your layout.

Size classes decrease all different potential horizontal and vertical configurations to only compact and regular types: compact for more limited space; and regular for less limited space.

See figure 1 how the size classes correspond to devices and device orientations.

Different size class combinations apply to the full-screen experience on different devices, based on screen size.

Figure 1. Size Classes for iPhone

Working With Size Classes

In this guide, I am going to assist you with programmatically creating Vary for Traits. I can’t wait to move the main.storyboard to the trash when creating a project. This is a hobby for me.

Let’s start by setting up the basic interface and constraints.

Now I’m going to create two images and sequence them with auto layout. Then, I will make sure that these two images are suitable for the orientation of different iPhone devices.

Create three different arrays, that contains NSLayoutConstraint type. That should be like below. We will store the constraints according to device orientations.

And then create UI elements. You will see that it contains three elements; viewContainer, image1 and image2.

Create a function named setupUI. setupUI is gathered up all views and adds them to super view.

After that, you should create the second function like below. This function includes three arrays of constraints.

1. sharedConstraints, the array holds common constraints for all various.
2. regularConstraints, the array holds regular varying.
3. compactConstraints, the array hold compact varying.

We came to the most important part. This method decisions for auto layout with selected iPhone screen size and orientations. By sending the trait collection parameter and that determines the size classes

Override traitCollectionDidChange method, this will be notified when iPhone has changed in different orientations.

And final step. In viewDidLoad method you should call these functions.

1. setupUI is preparing the UI.
2. setupConsraints are preparing the all auto layout constraints.
3. And then activate common constraints
4. The last row captures the current traitCollection and sends it to the layoutTrait method.

You’re done varying the layout!.

Understanding Size Classes allows you the flexibility to development for different screen size. Size class traits make possible to support multiple devices and orientations.

For More information check out the Apple Link

If you have any criticism, question, or suggestion, feel free to post them in the comment section below!

Thanks for reading.

P.S.: and if you like my article, don’t forget to clap 👏

Follow me on Twitter and Linkedin

Some open-source projects I have created.

batikansosun/NetGuard

batikansosun/ENVGadgetFW

Photo by Etienne Boulanger on Unsplash