development

smartscales autolayout instruments
Zen Ho
, , , , , , , , , ,
0

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

As we adapt the exercise selection views for the iPhone, we used a few more tools and tricks other than Auto Layout.

  • Size Classes group screens based on the amount of horizontal and vertical space available. This allows us to set different font sizes to be used within the storyboard, rather than having to do so in code. One exception was the 3.5″ screen of the iPhone 4/4s, which is the only one with the older 3:2 aspect ratio. This meant it has considerably less horizontal space, even though there is no way to isolate this screen size using size classes. We had to edit some font sizes in code just for this case.
  • We use scaling and translation animations to produce the effect of zooming in on a section of the scene as the user digs deeper into the selection hierarchy. On the iPad, we used absolute scale factors and translation vectors. On the iPhone, these are calculated based on the size and position of the instrument buttons after they are automatically laid out, how large we want them to appear relative to the height of the screen (after the animation), and the approximate location we want to move them to. The translation animation differs from the iPad in that again, it is the layout constraint being modified rather than the position of the scene.
  • On the iPad, the exercise cells are manually plotted except at the key selection level, so they have a loose and “random” look. We first calculate a valid content area using rules similar to those used in Auto Layout, then map the iPad coordinates directly to this different frame.
img_3111
Zen Ho
, , , ,
1

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.