Developer Diary – Adapting SmartScales for the iPhone (Part I)

Work has begun to bring SmartScales to the small screen! 4 screens, to be exact; making an iPhone app now means catering for every screen size that has appeared on an iPhone. For the iPad version we were able to use specific coordinates to layout the UI elements and animate them. Doing this for an additional 4 screens would be immensely time-consuming. Thankfully, Apple introduced Auto Layout way back with iOS 6.

With Auto Layout, UI elements adapt to the screen size using constraints. And when animating motion, instead of moving objects from point A to B, you animate a change in one or more constraints. As you can see in the photo above, our title page looks quite different on each screen. This is because we want each element to be of a certain minimum size, instead of keeping their proportionate size. It takes some trial and error to get the content to look right on each screen, but overall it definitely takes less time then manually laying out each screen in Photoshop and getting the coordinates into the code.

We’re definitely aiming to use Auto Layout as much as we can, it’s just a much more elegant approach. This may not be always possible given the non-conventional interface we’ve created for SmartScales, especially in how we’ve used a tree plot for displaying the ABRSM syllabus.