Size classes and Constraints: finer prints
Almost everyone doing serious iOS development has gone through the pain that is handling constraints for one, it seems arcane to most and two, you can never really escape the need of them. We need to tell the OS where to place your UI elements on the screen. This takes into consideration the response to internal changes like dynamic content, or external changes like form factors, screen orientation and rotation. There are three ways of doing this, as per the official documentation:
There are three main approaches to laying out a user interface. You can programmatically lay out the user interface, you can use autoresizing masks to automate some of the responses to external change, or you can use Auto Layout.
Out of all three, we’ll talk about Auto Layout. Auto Layout was introduced in iOS 6 and it is a system that lets us lay out our UI by creating a mathematical description of the relationships between the elements. We define these relationships in terms of constraints either on individual elements, or between sets of elements. If our UI were a building think of constraints as a scaffolding holding everything together in a defined place.
The quickest way to get things going with auto layout is the Stack, pin, align and resolve tools. The stack is a tool to use auto layout without using constraints. It is as easy as selecting the various elements and putting them up in the stack, so while screen rotation it will maintain the alignment between the elements inside. Stack views are probably the quickest and a mess-free way to layout UI but bear in mind they were introduced in iOS 9 so they cannot be used for previous versions.
Okay ‘nuf talk! Lets get those hands dirty, on auto layout with pin align and resolve. Say you have a UI requirement of having two equi-sized button appearing one under the other in potrait mode and when in landscape mode they should appear beside one another. And we’ll do all this without touching a single line of code, promise!
We’ll learn how to do this with size classes. This is a real cool 3x3 matrix and is arguably the fastest and efficient way to build UI. The wAny hAny denotes all form factors in all orientation. This also means any elements or constraints that we set in this will be visible in all devices and in all orientation. Your app might deal with iPad and iPhones, both, so it is a good idea to put up elements that are common in their UI’s. This helps you save time and easy to play with it when the design requirement changes.
Go over to your view and place your buttons into it, name them Green and Red, change their background colors also. We’ll start off by setting the position of green in our screen. This will be the only common constraint between landscape and portrait. Hit the Pin tool and uncheck the Constraints to margin check box and pin 2 edges (leading and top) as shown in the picture below:
We’ll change our Size class since we want an iPhone in a portrait mode, we’ll hover over the matrix and make the width Compact and height as Any(3x1) that will cover all our iPhones in portrait mode. Next up, pin the trailing edge on the Green with 50px to the right as shown:
Auto layout comes up with three eqautions which define the relationship of the green button to parent view. At this point, it is essential to understand how auto layout sees these constraints, the equal to sign is indicative of an equality of the item at left hand side and the right hand side, rather than an assignment. The auto layout strives to make both of the entities on either side of = sign as equal, while doing so there are bound to be errors refer to the official documentation for various type of errors it throws and why here.
Now we have set the position of Green button, all we need to do is to make Red button exactly the same and place it 20px lower than green button. Before proceeding do an update frames from the Resolve menu.
We’ll use the Align tool now, select both the buttons and check the Leading edge and the Trailing edges buttons. Auto layout it smart enough to decipher which button’s edges to be aligned with whom. Update frames and you’ll see Red on top of Green with equal heights and width but auto-layout will still complain that you still haven’t bound Red to Y axis. Drag the Red below Green, don’t worry you need not be accurate, we have auto-layout for that!
Once done pin the top of Red to Green with 20px. Remember to uncheck Constraints to margins. Also bear in mind that we need this 20px from the Green button, the drop down will give you options where do you want to pin it from, select Green.
Add constraint and update frames.
Voila! You have created a conflict free UI!! Before we rejoice, the job is not done yet. We have to show buttons side by side in landscape mode.
Once you do this in the document outline you will notice that some of the constraint equations are greyed out. This is because, we told auto-layout how to hold those buttons in postion for iPhone portrait mode not in landscape, this is what we are going to accomplish now. Hop on to the document outline and select both Red and Green. Check their Bottom and Top edges to be the same from the align menu. Now, drag the Red and bring it over to the right side of green and pin it to Green with 50px and to the right edge with 50 px. Select both the buttons once again and make their Widths equal from the Pin menu. The resultant being:
Awesome possum! Now run this on an iPhone and change orientation you’ll see the buttons as one beneath the other in portrait and one beside the other in landscape.
Wapping it all up: Auto-layout is a powerful and dynamic system that lets you rapidly create and maintain over time complex UI. This might take time to wrap your head around it but this seems to be totally worth it given the adaptive nature. It becomes imperetive to play more and more with Size classes and how to place elements into them according to the design requirement. And finally, Constraints are the abc’s to work your way through auto-layout with more control over UI.
If you want to see it all in action head over to this git link.
