Adding constraints pretty much feel like guesswork at this point :
You are interested to create an iOS app, you picked up Swift and enjoyed learning it, you managed to create some simple app after following tutorials. But when it comes to designing user interface, Auto Layout doesn't make sense to you, it feels like you have to get lucky to get a layout working.
Months of coding work is getting thrown away as you can’t even get the user interface to display correctly. At this point, you are asking yourself whether it is a good choice to continue iOS programming, as spending the time to fight with Auto Layout doesn't feel worth it anymore.
Perhaps you have decided to grind through the Auto Layout maze, and finally managed to make a layout that looks good (yay!), but when you view it on another device with different screen size, UILabels and images are overlapping each other or there is a big area of blank space. Now you feel stuck, as changing the current constraints will break the layout on your current device, but if you don't change it, it doesn't fit on other devices.
"Auto Layout shouldn't be that hard! Is it too much to ask for a layout that works across different devices?!", I heard you. Let's take a moment and imagine the following :
What if you knew exactly which constraint to add for each element? You could save hours from trial and error-ing constraints. You’d know how to troubleshoot constraints whenever your layout looks off from their supposed position. You’d be confident that your app will look exactly like how you want it in all iPhones and iPads. You could finish the app that you have been working on for months, submit it to the App Store, and have a better resume for applying iOS developer positions.
The problem with Auto Layout is that winging it as you go along is not an option. With coding you often can trial and error until it works, so we are used to it. Auto Layout needs to be properly understood and applied systematically, you have to understand what every single constraint is doing, throwing them in at random until its all blue is never going to work.
Making Sense of Auto Layout focuses on the fundamentals of Auto Layout including how it decides the position and size of a UI Element (UIView, UILabel etc), what problems do Auto Layout solve, why do Xcode shows you red lines and how to troubleshoot them. Understanding the fundamental of Auto Layout can save you from bruteforcing constraints to make something work, as you can predict how it works and confidently place constraints.
Most of the time your app will communicate with a web API that returns JSON content, you can confidently create a layout that cater to dynamic content using Self-sizing table view cells or Scroll views with dynamic height.
By using the help of Stack views, you can add/remove UI element easily into the stack without having to add constraints all over again.
As the range of devices has increased over the last few years (iPhone 4", 4.7", 5.5", iPad Mini, Pro etc) and split screen mode in iPad is introduced, designing layout that caters for different screen resolution has become more challenging and almost impossible to specifically design layout for each possible screen size.
To simplify the process of designing layout that adapts to different screen size, Apple has introduced Size Classes in iOS 8, size classes categorizes different devices using width and height into 4 variants:
Using size classes, we can assign different constraint or even attribute of an UI element when viewed in different device easily :
Start creating the layout you want, looks good across all iOS devices, and submit it to App Store confidently.
By the end of the book, you would be equipped with the ability to build this :
With the case studies, you'll learn how to breakdown complex UI in other apps into individual components and implement them methodically. You would be able to apply the Auto Layout concept you learned in the book into implementing real layout you saw in other apps.
“dude… wow… good job on this Auto Layout series! One of the best explanations I’ve read!” – Alex Kluew
“I find the book a comprehensive break-down of the basics of Auto Layout, it's definitely a valuable resource for newcomers to iOS development” – Adrian Tineo
Absolutely! Grab your free sample below and start Making Sense of Auto Layout today.
Hi, I'm Axel Kee. I’ve been developing iOS apps for companies, clients and myself — from small indie app to social app that get hundreds of thousands of downloads — since 2016.
I used to struggle on Auto Layout when I first started picking up iOS development, it took me a lot of practice until it 'clicks' for me. Once I understand the intention behind Auto Layout and how it works, I come to appreciate it as it simplifies UI development a lot.
I hope this book can make it 'click' for you too.
I write about iOS development stuff here.