Experiences with Constraints and Storyboards

Well, it was a challenge, but I got it done. This past weekend I spent most of the time refactoring my personal app to using iOS 6.1’s autolayout capabilities. While I started off pulling out my hair, I ended the weekend with screens that looked pretty good, and that correctly handled almost everything I could throw at it. The net of all of this, is that I learned how to improve the flexibility of my apps. (I now can correctly re-size between iPhone 5 and pre-iPhone 5 layouts).

The biggest problem when going thru this, was that XCode kept trying to guess what I was trying to do. It would pin objects to the top of the screen, which would then disappear beyond the bottom of the screen when I rotated the screen. It would link two assets and then assume that I wanted the same spacing when I rotated, again pushing things around. The biggest thing I learned was to treat your screen layout like a bunch of sub-views. This allows you to then group things in subviews and build up relationships between the subviews. It reminded me of hand coding websites years ago, right after HTML introduced tables.

The other key thing to do, is make sure you pay attention to Less than, Equal, and Greater than. This impacts how things will grow or shrink. I cannot tell you how many times I caught myself with a Equal link(the default), when I wanted things to shrink down, a Less Than link. So far I have not gone into the details of code centric autolayouts, but for my simple app, I didn’t need that yet.

I can try and address questions if you have any, so drop a comment to the blog!

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.