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!
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:
Vertical - one of the 2 portrait orientations
Horizontal - one of the 2 landscape orientations
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:
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:
All the parameters combined form a quadrant that describes possible variations:
Implementing Size Classes
Theory is great, how about practice?!
In order to take advantage of classes, we need to create variations.
Let's refer back to our devices panel. This time we are going to use 'Vary for Traits' button:
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.
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:
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:
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.
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?
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:
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:
Now repeat the same thing for width constraint, setting the new constant value to 150pt:
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:
Click 'Add Variation' button. Observe that another line appeared on properties panel:
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:
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
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 Label, Color 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':
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:
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!
I'm sure you did very well!
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.
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!