iOS Storyboards, AutoLayout, and Constraints


I’ve been in the process of refactoring my app – Wasted Time in order to add native Facebook integration and a new ToDo feature. As part of this refactoring, I am changing from a simple UITabBarController to a UINavagationController based root control. This change will allow me to have the ToDoViewController be able to be pushed on the stack and pop off the stack when the ToDo is complete. Overall, I am very happy with the progress I’ve made by doing this.

HOWEVER; (and yes I am yelling as I type this) my default struts based formatting, which has worked well for me on iPhone and iPad with a traditional NIB based interface, is going to be replaced with a Storyboard using AutoLayout and Constraints. This is a bit more complex than it may seem, but the overall goal is to allow future updates to devices (screen size, etc.) to be able to better resolve the interface elements of my app. Yes that is the promise.

After spending a couple evenings working on reformatting and tweaking the constraints, I finally broke down and thought, I should do a tutorial or two. I was pulling out my hair, and screaming at the screen. Every time I moved a single screen element it would screw up everything! While I can still pin things to the top/bottom, left/right, and Horizontal / Vertical, it was struggling with groups of elements that I want to keep on an area of the screen.

The first tutorial I found that seemed to take a pretty natural approach for stepping you thru the complexity. This is from the team over at RayWenderlich.com. There are a lot of different tutorials there, and they do provide enough info to get you started. Of course, the complexity of my simple screens was beyond the basics of parts 1 and 2 – I bought their book (IOS 6 By Tutorials). I guess they succeeded in providing me just enough content to make the purchase.

So now I plan to spend a bit of time over the next few weeks working on really learning how constraints work. Will post more information on this as I progress.