If you’ve ever worked with Xcode above version 5 you’ve probably come across something that is called auto-layout. You’ve probably noticed those Icons especially in the newest versions and you have probably stumbled across the term „constraint“ here and there. Those are incredibly important things to know when dealing with development in Apples Ecosystem and their devices. This Module is all about those things.
It will teach you to understand constraints and how they work, understand how to create and manage them inside of the interface builder or inside of code because those are not mutually exclusive and you can use them in both way. The Theory behind them however stays the same. It’ll teach you how to debug constraints inside of Code and the Interface Builder and also how to test for different screen sizes and what to focus on when testing constraints.
Or in short, this module focuses on how to create adapting layouts for your apps, like a responsive website.
The concepts in this module are a little bit more advanced and they can seem confusing and daunting at first. They require a little bit of theory here and there. That’s why we’ll dive into that first and then later we’re going to look at the practice. That’s why I chose to split this module. It’s important that you know the theory before you get into the execution and working with constraints because it’ll make everything make sense. The Theory section is quite small but ist is super important to understand. You have to understand all of that in order to debug constraints fast and easy and to create them fast and efficiently. The Theory part is what helps you understand what will come in the practice section and it also defines the terminology that you need to know.
The practice part is part where the fun stuff happens and luckily, much longer than the theory. If you’ve taken a look at the outline the practice part is a lot longer. While the theory is important, the real value of the auto-layout concept is in the application, because it helps you maintain a beautiful UI throughout all devices, screen sizes and size configurations.
Let’s just take a quick look at the outline of the Module before we get started.
First of we have the Theory part of the module in which we have some things we need to touch on before we can dive into the application. First things on the list there is the Canvas system on Apples devices and how apple manages constants. Next we’ll take a look at the problems we have with layouts. This will lead to the solutions that apple implemented. This is basically auto-layout with a special focus on constraints as the are the vital part of making auto-layout work.
The next section will be the practice section and it includes common tasks like stacking elements and tables. But this is just the introduction. We’ll dive very deep into working with constraints, creating and modifying them inside of the interface builder or using code. This is the very interesting part of the module. You’ll learn all the practical stuff of making auto-layouts works. But that’s not all because we also need to get into the cases if you layout doesn’t work as expected, that’S why I have created a complete lesson dedicated to debugging and finally we’ll do some testing to see if our auto-layout works.
Finally there is a section on bonus materials which is super valuable as well. If you purchased the extended access, this will all be available to you and I recommend checking that out as well. The bonus content includes a lesson on workflows and how to create layouts for existing apps or how to design and app from scratch. Also I have a Constraints Cheatsheet prepared which is a PDF that includes all the important information that we cover in this module. Lastly I included a recording of a workshop I did that focuses on dealign with auto-layout using some libraries, because apples auto-layout in code is not super easy to write and quite verbose, but there are some really great libraries that can help you make this more efficient and make working with constraints in code much easier.
So let’s get started!