• 10 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 3/6/20

Utilize Size Classes

Log in or subscribe for free to enjoy all this course has to offer!

We’ve approached the final component to deal with layout - Size Classes. Which enables us to worry even less about particular dimensions or orientations.

What wasn't enough about Auto Layout?

It works great on it's own, however, we you can see in our final design, our elements are aligned as intended, however it's hard to accommodate all the sizes and orientations with a single variation of layout. On iPads, in particular, our UI appears too small and concentrated in isolated spots instead of taking advantage of the screen size.

We could patch-fix it of course - by managing it with code and make adjustments to  .constant  property of constraints, however, similarly to having to manipulate frame property directly. Considering the number of sizes and possible orientations, you can guess it would be a very tedious work.

The good news is - Auto Layout is not going anywhere, we'll continue using it! :zorro:

Understanding Size Classes

Size Classes are generalized layout categories. We can create unified layouts for each category and let the device deal with the rest.

Think of it as a group devices we'd need to make an adjustment for, but only once. Even though, the device sizes in a category are different, such grouping is sufficient to make significant improvements to the app layout.

The key components of size classes are:

  • Direction:

    • Vertical - one of the 2 portrait orientations

    • Horizontal - one of the 2 landscape orientations

  • and Size: 

    • Regular - the interface has expansive space.

    • Compact - the interface has only constrained space.

The size component describes size values - width and height independently. For example, iPhone Plus models in portrait and landscape orientations swap the width and height size references:

iPhone Plus models size reference
iPhone Plus models size reference

In Portrait iPhone Plus references regular height and compact with. And in landscape orientation - it's the opposite - compact height and regular width.

iPad models in full screen, on the other hand, reference regular width and height in both orientations:

iPad class size references
iPad models size reference

All the parameters combined form a quadrant that describes possible variations:

Size Classes Quadrant
Size Classes Quadrant

Implementing Size Classes

Theory is great, how about practice?!

In order to take advantage of classes, we need to create variations.

Creating variations

Let's refer back to our devices panel. This time we are going to use 'Vary for Traits' button:

Vary for Traits option
Vary for Traits option

This option allows to make modifications in our interface which will impact only the current size class. This means that we can modify all constraints and even move, add or delete views and this will only affect the current size class. :magicien:

We are going to create a variation for iPhone 8 landscape mode. Which, based on Size Classes Quadrant translates into (Compact, Compact) for the size.

Switch to iPhone 8 landscape mode in storyboard. Click on 'Vary for Traits' button, it displays a popup:

Vary for Traits options
Vary for Traits options

It offers to create a variation for width or height (or both).

If both are checked, the variation will only affect screens in the selected class: (Compact, Compact). If we uncheck the width, for example, the variation will affect all the screens which have a compact height whatever their width.

When we check or uncheck the boxes, the size selector turns blue and shows us only the screens that correspond to the variation we've chosen:

Variation affect
Variation affect

In our case, we're going to create a variation that affects all iPhones in landscape mode. So we want the height to be compact but the width can be compact or regular to include iPhone models. We'll check Height and leave Width unchecked.

Managing variations

Looking at our design, we can clearly see that no matter what we do with the current 1 column approach, we are not going to fit all the elements vertically in landscape mode for iPhones. And, there's no need to struggle. It will be much more appealing to place elements in 2 columns - leaving the Creation Frame on the left and moving the rest of the elements to the right. We'll keep the title in place.

Some of our constraints will no longer be relevant, so we need to alter or disable them and add new - more  suitable ones.

In order to accomplish it, we need to learn the following:

  • Alter base constraints - indicating that the constraints are still useful, however, need to hold a different constant value.

  • Disable base constraints for our variation - indicating that those should not take effect.

  • Add constraints specific to a size class - indicating that those should only effect a size class they are defined for.

Here's out To-Do list:

  • Title Image - alter width and height constraints.

  • Creation Frame  - keep at distance form the left edge, center vertically with an offset(!) to the bottom of 20pt - to allow some space for Title Image, alter width and height constraints.

  • Color Label - align top with Creation Frame, align left and right edges to the left and right edges of Color Swatch Container.

  • Color Swatch Container - keep distance form the right edge.

  • Share Button - align left and right edges to the left and right edges of Color Swatch Container, align bottom to the bottom of Creation Frame.

And, how do we proceed? o_O

Altering constant value for existing constraint

Let's proceed by making the title a bit smaller - we'll scale it from 250x52pt to 150x32pt. We need to alter the existing height and width constraints. To accomplish that, we need to create a variation for the constant value of those constraints.

Select the Height constraint, on Utilities panel click  +  icon before the constant input, and fill our the height property in the variation popup:

Creating a constant variation for an existing constraint
Creating a constant variation for an existing constraint

Click 'Add Variation', set the constant value for new variation to 32pt. Observe that the visual appearance of the title image has changes, as well as the value displayed in the navigation describing the width constraint:

Altering constant value for new variation
Altering constant value for new variation

Now repeat the same thing for width constraint, setting the new constant value to 150pt:

Altering constant value for new variation
Altering constant value for new variation

Now do the same thing for Creation Frame setting its width and height for variation to 240pt.

Disabling constraint for variation

Let's now disable the constraints we don't need in this variation - select all that are highlighted in the screenshot below. We need to add a variation for these constraint. To do that, on the Utilities panel, at the bottom of properties panel click  +  icon before 'Installed' option and fill out the popup indicating that we are creating a variation for compact height:

Adding variation to existing constraint
Adding variation to existing constraint

Click 'Add Variation' button. Observe that another line appeared on properties panel:

Variation added to existing constraints
Variation added to existing constraints

Uncheck this new option and observe that selected constraints are marked dimmed down - that indicates those constraints are not part of the size class we're currently viewing:

Disabled based constraint for Compact Height variation
Disabled based constraint for Compact Height variation

Now let's move and size our elements property.

Adding constraints specific to variation

How do we move those that are hidden in the bottom?

To move the elements I recommend selecting them in navigation and manually adjusting positioning properties in Attributes Inspector. This will help preventing a couple potential issues:

  • accidentally changing view order in view hierarchy.

  • accidentally moving subviews instead of intended view.

Select Creation Frame and acre 2 new constraints for it:

  • Distance from the left

  • Center Vertically with an offset

New constraints for Creation Frame
New constraints for Creation Frame

This will reposition Creation Frame view along with Startover Button as the button is constrained to that view.

Next, add constraints to the rest of the views:

  • Align top of Color Label to the top of Creation Frame

  • Align left and right edges of 3 views: Color LabelColor Swatch Container and Share Button.

  • Distance Color Swatch Container from the right - 20pt (Same as Creation Frame on the left)

  • Align Share Button with the bottom of Creation Frame.

And, finally, click 'Done Varying':

Done Varying!
Done Varying!

Once you exit varying mode, switch between landscape and portrait layouts on the bottom panel and observe that the portrait layout appears as before and the landscape - according to our resent modifications.

Let's take a look at our story board preview for the new landscape layout for Compact height - iPhone models:

iPhone landscape layout
iPhone landscape layout

Acceptable! :pirate:

App Launch Screen

And back to our launch screen - it could use some adjustments too! Go ahead and implement variants for iPhone landscape layout for the launch screen!

Was that easy?!
Was that easy?!

I'm sure you did very well! :zorro:

Tweaking Designs

As with the portrait layout, we did the best we could to fulfill the design requirements, however, the visual appearance can be improved further. This will occur occasionally during your work practice. Don't hesitate to speak with the design team to find the best solutions possible.

Let's Recap!

  • Size Classes are generalized layout categories.

  • Size Classes have 4 parameters: 2 directional - Horizontal and Vertical and 2 size references - Regular and Compact.

  • Directions describe orientations. Size describes width and height.

  • Variation is a size class parameter created for width/height in Regular/Compact size.

  • Size class customization includes:

    • Disabling base constraints

    • Adding new constraints exclusive to variation

    • Altering base constraints by providing variation specific constant value. 

Where do we stand?

Congratulations on awesome progress! In this course we’ve developed an interesting app that allowed us to learn various practical techniques along the way! You should now be able to:

  •  Architect the code of an application with the MVC model

  • Manage the assets of an application

  • Implement an interface based on a designer's requirements

  • Use structures in Swift

  • Utilize device resources and local storage

  • Interpret user gestures on the touch screen

  • Create simple animations

  • Master the essential components of iOS (UIViewController and UIView)

  • Implement adaptive layout

  • Create a functional app to start building your portfolio- Frame IT

Now you can apply this knowledge when analyzing the requirements for your future challenges and translate them into the building blocks to start the app implementation.

It’s most probable that every future project will present unfamiliar challenges - and that is the reason to continue learning!

See you in the next course! :zorro:

Example of certificate of achievement
Example of certificate of achievement